@onemrvapublic/design-system 21.0.0-develop.1 → 21.0.0-develop.11

package/README.md

@@ -33,55 +33,12 @@ If you need access to our design system board, send us a message.
 @Bram Decuypere (NL / EN)
 ## Changelog
 
-### 21.0.0-develop.1
+### 21.0.0-develop.11
 
-# [21.0.0-develop.1](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v20.11.1-develop.12...v21.0.0-develop.1) (2026-01-27)
+# [21.0.0-develop.11](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v21.0.0-develop.10...v21.0.0-develop.11) (2026-02-09)
 
 
 ### Bug Fixes
 
-* **file-panel:** a11y compatability for warn ([6bafc55](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/6bafc559ed18a0ae6e90a701d0da8da158178c1d))
-* **layout:** a11y ([f114cb8](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/f114cb8be52a6beee054e5a27fab29ba31f01fc6))
-* accessibility ([8b440b7](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/8b440b7b763889fcaa19ce4a7a0043a9ef1ee6cd))
-* **datepicker:** adjust background color ([aa1d5ea](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/aa1d5eaf4efa2f7f222e4321fba9d4561bc01139))
-* **autocomplete:** align background color ([3cf9a29](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/3cf9a29d69a96cc45a6f9317fbcd5e11c306b16c))
-* **prettier:** align code styling to prettier ([f0d991a](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/f0d991a4c19535aeea2b213f0618764062c4ec89))
-* cypress test ([88adced](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/88adced330e4ca378832b6bee540f20f87d9873c))
-* demo error ([1ed3d49](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/1ed3d49e462192df57121546e810003f1d03abf9))
-* **eslint:** fix codestyling ([d36748b](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/d36748b1c41aa8ffcf36028c032e562b5f9767f8))
-* **chips-input:** fix demo for chips a11y ([255c8b4](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/255c8b4fa100ba50add977a6e45a1b6b96e36b4c))
-* **selectable-box:** fix isChecked function ([2f93ae7](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/2f93ae7dd4a02cc11fcb96d6a133d10b159f1a46))
-* **choice-chip:** fix padding ([b10149a](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/b10149a549350f0f1c096ed77dee9aa87301f621))
-* **upgrade:** fix properties and bundler format ([2853cec](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/2853cec1c4d24d7b813d271dc77b2553b2082642))
-* **demos:** fix the demo paths ([6deae66](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/6deae6669e9011cc3fcd5e47a6b74a8c3719b8a6))
-* **demos:** fix the demo paths ([4d3cb2c](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/4d3cb2c720168376e11ee195a6610425a652926d))
-* **theme:** fix the styles index in the app + cleanup styles publishing ([87bb1ad](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/87bb1add82f7a8133a1b8d84b734d2ec31650afa))
-* **toc:** fix the toc colors and hiddenInToc classes ([b37ff73](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/b37ff7355512f07235f14f9c635ecd6d512f932a))
-* **demo:** improve signal reactivity and update config ([3545c97](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/3545c97e29aa62f304cebb2c8fe32ba65743189c))
-* **layout-sidenav:** improve signals routerlink check ([e01a225](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/e01a225cde9f97df65e5518c8811c9714872e540))
-* minor changes on signals ([27dbcbb](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/27dbcbb0a12f3715aa29ca8c98b472b62a18ee06))
-* **select:** overlay of select got class rename ([6ce98c4](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/6ce98c47beae5a4d92987c5242b6cdb0284d5e99))
-* **layout:** properly set signals ([c785eb0](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/c785eb093671ee5a53cb245b45617cc014c973cc))
-* **theme:** remove build script ([6fee794](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/6fee79433d56577dbd29991da3319b8ab68bdbb4))
-* update angular dependencies ([0b44123](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/0b441235f4d7df59c2839917dc48dd4e9367bcaf))
-* upgrade to 21 wip ([6b9ef9a](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/6b9ef9a3a7a10f550c7c888cddc062edaec6d07d))
-* upgrade to 21 wip ([e27be97](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/e27be976033898f3d3184a5f8dd1bf2afd6ed103))
-* upgrade to 21 wip ([a02964e](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/a02964ed0b79608758d449f116f3310ceccc9efa))
-* **phone-input:** use correct color for country code dropdown ([aaf4ec6](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/aaf4ec68f696ae04f982bb77f61c0f9176d079e4))
-* **ngxMask:** use provider to create config ([5c39aa0](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/5c39aa0ce92c5bf77b23aec7633c9ba7c23b07f2))
-* **tooltip:** use signals correctly to show html ([40a459c](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/40a459c27502654a85615509ae2211b53a65ccca))
-* **mat-task:** wrong inversion of using form ([6e32af5](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/6e32af5e84e19efd970427def5f539f25fa16e66))
-
-
-### Features
-
-* **theme:** move theme package into main package ([fd2df4f](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/fd2df4f2f503aabcd6cc93d54ba88323a4e7c516))
-* **timepicker:** update example of timepicker to use ([840c7e1](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/840c7e14c0e2b2735bb6766e56ba18d8af8c5ff3))
-* **angular21:** upgrade to angular 21 add package lock ([b0739b8](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/b0739b84156211fbf6145ba99693a81aa13770aa))
-
-
-### BREAKING CHANGES
-
-* **theme:** We are merging the design system and the theme package
-* **angular21:** final commit for angular 21 upgrade
+* **typography:** change order of typography ([3391a5e](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/3391a5e6104477b5a6020adab1a77cbfaa88f161))
 

package/assets/i18n/de.json

@@ -71,8 +71,8 @@
     "search.input.label": "Suche"
   },
   "paginator": {
-    "Previous": "< Previous",
-    "Next": "Next >",
+    "Previous": "Previous",
+    "Next": "Next",
     "records.per.page": "Elemente pro Seite",
     "outOf": "out of"
   },

package/assets/i18n/en.json

@@ -71,8 +71,8 @@
     "search.input.label": "Search"
   },
   "paginator": {
-    "Previous": "< Previous",
-    "Next": "Next >",
+    "Previous": "Previous",
+    "Next": "Next",
     "records.per.page": "Elements per page",
     "outOf": "out of"
   },

package/assets/i18n/fr.json

@@ -71,8 +71,8 @@
     "search.input.label": "Recherche"
   },
   "paginator": {
-    "Previous": "< Précédent",
-    "Next": "Suivant >",
+    "Previous": "Précédent",
+    "Next": "Suivant",
     "records.per.page": "Eléments par page",
     "outOf": "de"
   },

package/assets/i18n/nl.json

@@ -71,8 +71,8 @@
     "search.input.label": "Search"
   },
   "paginator": {
-    "Previous": "< Vorig",
-    "Next": "Next >",
+    "Previous": "Vorig",
+    "Next": "Next",
     "records.per.page": "Elementen per pagina",
     "outOf": "out of"
   },

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

@@ -639,7 +639,7 @@ class LayoutComponent {
         this.drawerService.toggle(true);
     }
     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" }] }); }
+    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 (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: "21.1.1", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -670,7 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         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 />\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"] }]
+                    ], 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 (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 {