npm - @onemrvapublic/design-system - Versions diffs - 20.6.1-develop.1 → 20.6.1-develop.10 - Mend

@onemrvapublic/design-system 20.6.1-develop.1 → 20.6.1-develop.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/fesm2022/onemrvapublic-design-system.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, effect, HostBinding, Input, Component, ChangeDetectorRef, TemplateRef, ContentChildren, ViewChild, Pipe, DestroyRef, ViewContainerRef, DOCUMENT, Directive, EventEmitter, isDevMode, Output, ContentChild, NgModule, ElementRef, Renderer2, HostListener, ViewEncapsulation, forwardRef, ChangeDetectionStrategy, InjectionToken, input, QueryList, output, ComponentFactoryResolver, HostAttributeToken, NgZone, RendererFactory2, ErrorHandler } from '@angular/core';
+import { signal, Injectable, inject, effect, HostBinding, Input, Component, ChangeDetectorRef, TemplateRef, ContentChildren, ViewChild, Pipe, DestroyRef, ViewContainerRef, DOCUMENT, Directive, EventEmitter, isDevMode, Output, ContentChild, NgModule, ElementRef, input, Renderer2, HostListener, ViewEncapsulation, forwardRef, ChangeDetectionStrategy, InjectionToken, QueryList, output, ComponentFactoryResolver, HostAttributeToken, NgZone, RendererFactory2, ErrorHandler } from '@angular/core';
 import { Subject, takeUntil, startWith, BehaviorSubject, of, interval, take, map, catchError, tap, mergeMap, withLatestFrom, filter as filter$1, throttle, takeWhile, switchMap, forkJoin, merge, debounceTime, combineLatest, combineLatestWith, zip, pairwise, distinctUntilChanged, ReplaySubject, Subscription, timer, NEVER, shareReplay, finalize, skip, from } from 'rxjs';
 import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
 import * as i1$2 from '@angular/common';
@@ -116,11 +116,11 @@ class LayoutLeftSidenavComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutLeftSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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{width:240px;margin-right:40px;border-right:1px solid var(--mat-sys-outline-variant)}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationComponent$1, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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\n<span class=\"left-content-toggle d-none-medium d-none-large d-none-xlarge\"\n  ><mat-icon>arrow_right</mat-icon></span\n>\n", styles: [":host{width:240px;margin-right:40px;border-right:1px solid var(--mat-sys-outline-variant);position:fixed;height:calc(100vh - var(--layout-header-height) - var(--double-spacer));padding-top:var(--double-spacer);overflow-y:auto;overflow-x:hidden}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationComponent$1, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutLeftSidenavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent$1], 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{width:240px;margin-right:40px;border-right:1px solid var(--mat-sys-outline-variant)}\n"] }]
+            args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent$1, MatIcon], 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\n<span class=\"left-content-toggle d-none-medium d-none-large d-none-xlarge\"\n  ><mat-icon>arrow_right</mat-icon></span\n>\n", styles: [":host{width:240px;margin-right:40px;border-right:1px solid var(--mat-sys-outline-variant);position:fixed;height:calc(100vh - var(--layout-header-height) - var(--double-spacer));padding-top:var(--double-spacer);overflow-y:auto;overflow-x:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{
                 type: Input
             }], _isHidden: [{
@@ -678,7 +678,7 @@ class LayoutComponent {
         this.drawerService.toggle(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role", showThemeSwitcher: "showThemeSwitcher" }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true }, { propertyName: "routes", predicate: LayoutRouteComponent }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, static: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div class=\"app-content\">\n      <header>\n        <mat-toolbar class=\"mat-elevation-z4\">\n          <div class=\"environment\" [class]=\"environment\">\n            {{ environment }}\n          </div>\n          <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n            {{ logoRedictionUrl }}\n            <img\n              class=\"logo align-center clickable\"\n              [src]=\"logo\"\n              [attr.data-cy]=\"\n                'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n              \"\n              alt=\"Logo ONEM/RVA\"\n              [routerLink]=\"\n                logoRedictionUrl !== null ? logoRedictionUrl : undefined\n              \"\n              [ngStyle]=\"{\n                cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n              }\"\n            />\n            <div\n              class=\"application-title\"\n              [ngClass]=\"{ 'small-screen': isSmall }\"\n            >\n              @if (title?.template; as titleTpl) {\n                <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n              }\n            </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              >\n                <mat-icon>{{\n                  activeTheme() === 'dark'\n                    ? 'dark_mode'\n                    : activeTheme() === 'light'\n                      ? 'light_mode'\n                      : 'brightness_auto'\n                }}</mat-icon>\n              </button>\n              <mat-menu #themeSwitch>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.dark' | translate\"\n                  (click)=\"toggleTheme('dark')\"\n                >\n                  <mat-icon>dark_mode</mat-icon>\n                  <span>{{ 'layout.mode.dark' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.light' | translate\"\n                  (click)=\"toggleTheme('light')\"\n                >\n                  <mat-icon>light_mode</mat-icon>\n                  <span>{{ 'layout.mode.light' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.system' | translate\"\n                  (click)=\"toggleTheme('system')\"\n                >\n                  <mat-icon>brightness_auto</mat-icon>\n                  <span>{{ 'layout.mode.system' | translate }}</span>\n                </button>\n              </mat-menu>\n            }\n            @if (afterNav?.template; as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            }\n\n            @if (profile !== null) {\n              @if (!isSmall) {\n                <mat-divider\n                  vertical\n                  style=\"height: 1em; align-self: center\"\n                ></mat-divider>\n              }\n              @if (profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  initials=\"{{ profile.initials() }}\"\n                  color=\"accent\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              @if (!profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  icon=\"account_circle\"\n                  color=\"\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              <mat-menu #menu=\"matMenu\">\n                @if (profile.isLoggedIn) {\n                  <div class=\"menu-header m mb-m\">\n                    {{ profile.firstName }} {{ profile.lastName }}\n                  </div>\n                  <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n                  @if (loginMenu?.template; as menuLoginTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"menuLoginTpl\"\n                    ></ng-container>\n                  }\n\n                  <button\n                    type=\"button\"\n                    class=\"mat-mdc-menu-item\"\n                    mat-menu-item\n                    data-cy=\"logoutButton\"\n                    (click)=\"doLogout()\"\n                    [attr.aria-label]=\"'layout.logout' | translate\"\n                  >\n                    <mat-icon>logout</mat-icon>\n                    {{ 'layout.logout' | translate }}\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    mat-menu-item\n                    data-cy=\"loginButton\"\n                    (click)=\"doLogin()\"\n                    [attr.aria-label]=\"'layout.login' | translate\"\n                  >\n                    <mat-icon>login</mat-icon>\n                    {{ 'layout.login' | translate }}\n                  </button>\n                }\n              </mat-menu>\n            }\n\n            @if (\n              isSmall &&\n              (routes?.toArray()?.length || (languages && languages.length > 1))\n            ) {\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"menu-button\"\n                data-cy=\"smallDeviceMenu\"\n                (click)=\"this.toggleSideNav()\"\n                [attr.aria-label]=\"'layout.menu' | translate\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (!isSmall) {\n              <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n                <a\n                  [matMenuTriggerFor]=\"languageMenu\"\n                  data-cy=\"languageMenu\"\n                  [attr.aria-label]=\"'language.selection' | translate\"\n                  mat-tab-link\n                >\n                  {{ currentLanguage }}\n                  <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n                </a>\n              </div>\n            }\n            <mat-menu #languageMenu>\n              @for (lang of languages; track lang.code) {\n                <button\n                  type=\"button\"\n                  class=\"mat-mdc-menu-item\"\n                  mat-menu-item\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                  (click)=\"changeLanguage(lang.code)\"\n                  [attr.aria-label]=\"lang.label\"\n                >\n                  {{ lang.label }}\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </mat-toolbar>\n      </header>\n      <ng-container>\n        @if (content?.template; as tpl) {\n          <div\n            [id]=\"id\"\n            [attr.role]=\"role\"\n            class=\"onemrva-layout-content onemrva-layout-container\"\n          >\n            @if (leftSidenavService.items().length > 0) {\n              <div class=\"container-with-nav\">\n                <div class=\"left-content\">\n                  <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n                </div>\n                <div class=\"right-content\">\n                  <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n                </div>\n              </div>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\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=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n              >\n                <mat-icon>accessibility</mat-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <footer class=\"onemrva-footer p mb text-center\">\n          @if (footer?.template; as footerTpl) {\n            <div class=\"onemrva-layout-container\">\n              <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n            </div>\n          }\n        </footer>\n      </ng-container>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .onemrva-layout-content .container-with-nav{display:flex}:host .onemrva-layout-content .container-with-nav .left-content{flex:0 0 240px}:host .onemrva-layout-content .container-with-nav .right-content{flex:1}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width: 640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule$1 }, { 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$1, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective$1, 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]", 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: "logo", languages: "languages", environment: "environment", logoRedictionUrl: "logoRedictionUrl", profile: "profile", id: "id", role: "role", showThemeSwitcher: "showThemeSwitcher" }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true }, { propertyName: "routes", predicate: LayoutRouteComponent }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, static: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, static: true }], ngImport: i0, template: "<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div class=\"app-content\">\n      <header>\n        <mat-toolbar class=\"mat-elevation-z4\">\n          <div class=\"environment\" [class]=\"environment\">\n            {{ environment }}\n          </div>\n          <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n            {{ logoRedictionUrl }}\n            <img\n              class=\"logo align-center clickable\"\n              [src]=\"logo\"\n              [attr.data-cy]=\"\n                'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n              \"\n              alt=\"Logo ONEM/RVA\"\n              [routerLink]=\"\n                logoRedictionUrl !== null ? logoRedictionUrl : undefined\n              \"\n              [ngStyle]=\"{\n                cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n              }\"\n            />\n            <div\n              class=\"application-title\"\n              [ngClass]=\"{ 'small-screen': isSmall }\"\n            >\n              @if (title?.template; as titleTpl) {\n                <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n              }\n            </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              >\n                <mat-icon>{{\n                  activeTheme() === 'dark'\n                    ? 'dark_mode'\n                    : activeTheme() === 'light'\n                      ? 'light_mode'\n                      : 'brightness_auto'\n                }}</mat-icon>\n              </button>\n              <mat-menu #themeSwitch>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.dark' | translate\"\n                  (click)=\"toggleTheme('dark')\"\n                >\n                  <mat-icon>dark_mode</mat-icon>\n                  <span>{{ 'layout.mode.dark' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.light' | translate\"\n                  (click)=\"toggleTheme('light')\"\n                >\n                  <mat-icon>light_mode</mat-icon>\n                  <span>{{ 'layout.mode.light' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.system' | translate\"\n                  (click)=\"toggleTheme('system')\"\n                >\n                  <mat-icon>brightness_auto</mat-icon>\n                  <span>{{ 'layout.mode.system' | translate }}</span>\n                </button>\n              </mat-menu>\n            }\n            @if (afterNav?.template; as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            }\n\n            @if (profile !== null) {\n              @if (!isSmall) {\n                <mat-divider\n                  vertical\n                  style=\"height: 1em; align-self: center\"\n                ></mat-divider>\n              }\n              @if (profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  initials=\"{{ profile.initials() }}\"\n                  color=\"accent\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              @if (!profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  icon=\"account_circle\"\n                  color=\"\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              <mat-menu #menu=\"matMenu\">\n                @if (profile.isLoggedIn) {\n                  <div class=\"menu-header m mb-m\">\n                    {{ profile.firstName }} {{ profile.lastName }}\n                  </div>\n                  <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n                  @if (loginMenu?.template; as menuLoginTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"menuLoginTpl\"\n                    ></ng-container>\n                  }\n\n                  <button\n                    type=\"button\"\n                    class=\"mat-mdc-menu-item\"\n                    mat-menu-item\n                    data-cy=\"logoutButton\"\n                    (click)=\"doLogout()\"\n                    [attr.aria-label]=\"'layout.logout' | translate\"\n                  >\n                    <mat-icon>logout</mat-icon>\n                    {{ 'layout.logout' | translate }}\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    mat-menu-item\n                    data-cy=\"loginButton\"\n                    (click)=\"doLogin()\"\n                    [attr.aria-label]=\"'layout.login' | translate\"\n                  >\n                    <mat-icon>login</mat-icon>\n                    {{ 'layout.login' | translate }}\n                  </button>\n                }\n              </mat-menu>\n            }\n\n            @if (\n              isSmall &&\n              (routes?.toArray()?.length || (languages && languages.length > 1))\n            ) {\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"menu-button\"\n                data-cy=\"smallDeviceMenu\"\n                (click)=\"this.toggleSideNav()\"\n                [attr.aria-label]=\"'layout.menu' | translate\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (!isSmall) {\n              <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n                <a\n                  [matMenuTriggerFor]=\"languageMenu\"\n                  data-cy=\"languageMenu\"\n                  [attr.aria-label]=\"'language.selection' | translate\"\n                  mat-tab-link\n                >\n                  {{ currentLanguage }}\n                  <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n                </a>\n              </div>\n            }\n            <mat-menu #languageMenu>\n              @for (lang of languages; track lang.code) {\n                <button\n                  type=\"button\"\n                  class=\"mat-mdc-menu-item\"\n                  mat-menu-item\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                  (click)=\"changeLanguage(lang.code)\"\n                  [attr.aria-label]=\"lang.label\"\n                >\n                  {{ lang.label }}\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </mat-toolbar>\n      </header>\n      <ng-container>\n        @if (content?.template; as tpl) {\n          <div\n            [id]=\"id\"\n            [attr.role]=\"role\"\n            class=\"onemrva-layout-content onemrva-layout-container\"\n          >\n            @if (leftSidenavService.items().length > 0) {\n              <div class=\"container-with-nav\">\n                <div class=\"left-content\">\n                  <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n                </div>\n                <div class=\"right-content\">\n                  <div class=\"content-container\">\n                    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n                  </div>\n                </div>\n              </div>\n            } @else {\n              <div class=\"content-container\">\n                <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n              </div>\n            }\n            @if (\n              environment &&\n              (environment === env.LOCAL || environment === env.TEST)\n            ) {\n              <button\n                id=\"accessibility_fab\"\n                mat-fab\n                color=\"accent\"\n                aria-label=\"Accessibility check\"\n                matTooltip=\"Accessibility check\"\n                onclick=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n              >\n                <mat-icon>accessibility</mat-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <footer class=\"onemrva-footer p mb text-center\">\n          @if (footer?.template; as footerTpl) {\n            <div class=\"onemrva-layout-container\">\n              <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n            </div>\n          }\n        </footer>\n      </ng-container>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .onemrva-layout-content .container-with-nav{display:flex}:host .onemrva-layout-content .container-with-nav .left-content{flex:0 0 240px}@media screen and (max-width: 640px){:host .onemrva-layout-content .container-with-nav .left-content{position:absolute;z-index:10;margin-left:-240px;transition:.5s ease-in-out margin-left;overflow:hidden}:host .onemrva-layout-content .container-with-nav .left-content.open{margin-left:0}}:host .onemrva-layout-content .container-with-nav .right-content{flex:1}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width: 640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule$1 }, { 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$1, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective$1, 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]", 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -710,7 +710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         OnemRvaColorDirective$1,
                         MatSidenavModule,
                         LayoutLeftSidenavComponent,
-                    ], template: "<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div class=\"app-content\">\n      <header>\n        <mat-toolbar class=\"mat-elevation-z4\">\n          <div class=\"environment\" [class]=\"environment\">\n            {{ environment }}\n          </div>\n          <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n            {{ logoRedictionUrl }}\n            <img\n              class=\"logo align-center clickable\"\n              [src]=\"logo\"\n              [attr.data-cy]=\"\n                'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n              \"\n              alt=\"Logo ONEM/RVA\"\n              [routerLink]=\"\n                logoRedictionUrl !== null ? logoRedictionUrl : undefined\n              \"\n              [ngStyle]=\"{\n                cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n              }\"\n            />\n            <div\n              class=\"application-title\"\n              [ngClass]=\"{ 'small-screen': isSmall }\"\n            >\n              @if (title?.template; as titleTpl) {\n                <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n              }\n            </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              >\n                <mat-icon>{{\n                  activeTheme() === 'dark'\n                    ? 'dark_mode'\n                    : activeTheme() === 'light'\n                      ? 'light_mode'\n                      : 'brightness_auto'\n                }}</mat-icon>\n              </button>\n              <mat-menu #themeSwitch>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.dark' | translate\"\n                  (click)=\"toggleTheme('dark')\"\n                >\n                  <mat-icon>dark_mode</mat-icon>\n                  <span>{{ 'layout.mode.dark' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.light' | translate\"\n                  (click)=\"toggleTheme('light')\"\n                >\n                  <mat-icon>light_mode</mat-icon>\n                  <span>{{ 'layout.mode.light' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.system' | translate\"\n                  (click)=\"toggleTheme('system')\"\n                >\n                  <mat-icon>brightness_auto</mat-icon>\n                  <span>{{ 'layout.mode.system' | translate }}</span>\n                </button>\n              </mat-menu>\n            }\n            @if (afterNav?.template; as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            }\n\n            @if (profile !== null) {\n              @if (!isSmall) {\n                <mat-divider\n                  vertical\n                  style=\"height: 1em; align-self: center\"\n                ></mat-divider>\n              }\n              @if (profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  initials=\"{{ profile.initials() }}\"\n                  color=\"accent\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              @if (!profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  icon=\"account_circle\"\n                  color=\"\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              <mat-menu #menu=\"matMenu\">\n                @if (profile.isLoggedIn) {\n                  <div class=\"menu-header m mb-m\">\n                    {{ profile.firstName }} {{ profile.lastName }}\n                  </div>\n                  <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n                  @if (loginMenu?.template; as menuLoginTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"menuLoginTpl\"\n                    ></ng-container>\n                  }\n\n                  <button\n                    type=\"button\"\n                    class=\"mat-mdc-menu-item\"\n                    mat-menu-item\n                    data-cy=\"logoutButton\"\n                    (click)=\"doLogout()\"\n                    [attr.aria-label]=\"'layout.logout' | translate\"\n                  >\n                    <mat-icon>logout</mat-icon>\n                    {{ 'layout.logout' | translate }}\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    mat-menu-item\n                    data-cy=\"loginButton\"\n                    (click)=\"doLogin()\"\n                    [attr.aria-label]=\"'layout.login' | translate\"\n                  >\n                    <mat-icon>login</mat-icon>\n                    {{ 'layout.login' | translate }}\n                  </button>\n                }\n              </mat-menu>\n            }\n\n            @if (\n              isSmall &&\n              (routes?.toArray()?.length || (languages && languages.length > 1))\n            ) {\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"menu-button\"\n                data-cy=\"smallDeviceMenu\"\n                (click)=\"this.toggleSideNav()\"\n                [attr.aria-label]=\"'layout.menu' | translate\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (!isSmall) {\n              <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n                <a\n                  [matMenuTriggerFor]=\"languageMenu\"\n                  data-cy=\"languageMenu\"\n                  [attr.aria-label]=\"'language.selection' | translate\"\n                  mat-tab-link\n                >\n                  {{ currentLanguage }}\n                  <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n                </a>\n              </div>\n            }\n            <mat-menu #languageMenu>\n              @for (lang of languages; track lang.code) {\n                <button\n                  type=\"button\"\n                  class=\"mat-mdc-menu-item\"\n                  mat-menu-item\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                  (click)=\"changeLanguage(lang.code)\"\n                  [attr.aria-label]=\"lang.label\"\n                >\n                  {{ lang.label }}\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </mat-toolbar>\n      </header>\n      <ng-container>\n        @if (content?.template; as tpl) {\n          <div\n            [id]=\"id\"\n            [attr.role]=\"role\"\n            class=\"onemrva-layout-content onemrva-layout-container\"\n          >\n            @if (leftSidenavService.items().length > 0) {\n              <div class=\"container-with-nav\">\n                <div class=\"left-content\">\n                  <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n                </div>\n                <div class=\"right-content\">\n                  <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n                </div>\n              </div>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\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=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n              >\n                <mat-icon>accessibility</mat-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <footer class=\"onemrva-footer p mb text-center\">\n          @if (footer?.template; as footerTpl) {\n            <div class=\"onemrva-layout-container\">\n              <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n            </div>\n          }\n        </footer>\n      </ng-container>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .onemrva-layout-content .container-with-nav{display:flex}:host .onemrva-layout-content .container-with-nav .left-content{flex:0 0 240px}:host .onemrva-layout-content .container-with-nav .right-content{flex:1}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width: 640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"] }]
+                    ], template: "<mat-drawer-container\n  id=\"onemrva-drawer-container\"\n  [hasBackdrop]=\"drawerService.hasBackdrop()\"\n  autosize\n>\n  <mat-drawer\n    #mainDrawer\n    [class]=\"drawerService.classes()\"\n    mode=\"over\"\n    position=\"end\"\n  >\n    <ng-template drawerhost></ng-template>\n  </mat-drawer>\n  <mat-drawer-content>\n    <div class=\"app-content\">\n      <header>\n        <mat-toolbar class=\"mat-elevation-z4\">\n          <div class=\"environment\" [class]=\"environment\">\n            {{ environment }}\n          </div>\n          <div class=\"nav-container onemrva-layout-container flex-center g-m\">\n            {{ logoRedictionUrl }}\n            <img\n              class=\"logo align-center clickable\"\n              [src]=\"logo\"\n              [attr.data-cy]=\"\n                'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\n              \"\n              alt=\"Logo ONEM/RVA\"\n              [routerLink]=\"\n                logoRedictionUrl !== null ? logoRedictionUrl : undefined\n              \"\n              [ngStyle]=\"{\n                cursor: logoRedictionUrl !== null ? 'pointer' : 'default',\n              }\"\n            />\n            <div\n              class=\"application-title\"\n              [ngClass]=\"{ 'small-screen': isSmall }\"\n            >\n              @if (title?.template; as titleTpl) {\n                <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n              }\n            </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              >\n                <mat-icon>{{\n                  activeTheme() === 'dark'\n                    ? 'dark_mode'\n                    : activeTheme() === 'light'\n                      ? 'light_mode'\n                      : 'brightness_auto'\n                }}</mat-icon>\n              </button>\n              <mat-menu #themeSwitch>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.dark' | translate\"\n                  (click)=\"toggleTheme('dark')\"\n                >\n                  <mat-icon>dark_mode</mat-icon>\n                  <span>{{ 'layout.mode.dark' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.light' | translate\"\n                  (click)=\"toggleTheme('light')\"\n                >\n                  <mat-icon>light_mode</mat-icon>\n                  <span>{{ 'layout.mode.light' | translate }}</span>\n                </button>\n                <button\n                  mat-menu-item\n                  [attr.aria-label]=\"'layout.mode.system' | translate\"\n                  (click)=\"toggleTheme('system')\"\n                >\n                  <mat-icon>brightness_auto</mat-icon>\n                  <span>{{ 'layout.mode.system' | translate }}</span>\n                </button>\n              </mat-menu>\n            }\n            @if (afterNav?.template; as tpl) {\n              <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n            }\n\n            @if (profile !== null) {\n              @if (!isSmall) {\n                <mat-divider\n                  vertical\n                  style=\"height: 1em; align-self: center\"\n                ></mat-divider>\n              }\n              @if (profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  initials=\"{{ profile.initials() }}\"\n                  color=\"accent\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              @if (!profile.isLoggedIn) {\n                <onemrva-mat-avatar\n                  matRipple\n                  [matMenuTriggerFor]=\"menu\"\n                  icon=\"account_circle\"\n                  color=\"\"\n                  size=\"xsmall\"\n                  class=\"clickable\"\n                ></onemrva-mat-avatar>\n              }\n              <mat-menu #menu=\"matMenu\">\n                @if (profile.isLoggedIn) {\n                  <div class=\"menu-header m mb-m\">\n                    {{ profile.firstName }} {{ profile.lastName }}\n                  </div>\n                  <mat-divider style=\"align-self: stretch\"></mat-divider>\n\n                  @if (loginMenu?.template; as menuLoginTpl) {\n                    <ng-container\n                      *ngTemplateOutlet=\"menuLoginTpl\"\n                    ></ng-container>\n                  }\n\n                  <button\n                    type=\"button\"\n                    class=\"mat-mdc-menu-item\"\n                    mat-menu-item\n                    data-cy=\"logoutButton\"\n                    (click)=\"doLogout()\"\n                    [attr.aria-label]=\"'layout.logout' | translate\"\n                  >\n                    <mat-icon>logout</mat-icon>\n                    {{ 'layout.logout' | translate }}\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    mat-menu-item\n                    data-cy=\"loginButton\"\n                    (click)=\"doLogin()\"\n                    [attr.aria-label]=\"'layout.login' | translate\"\n                  >\n                    <mat-icon>login</mat-icon>\n                    {{ 'layout.login' | translate }}\n                  </button>\n                }\n              </mat-menu>\n            }\n\n            @if (\n              isSmall &&\n              (routes?.toArray()?.length || (languages && languages.length > 1))\n            ) {\n              <button\n                type=\"button\"\n                mat-icon-button\n                class=\"menu-button\"\n                data-cy=\"smallDeviceMenu\"\n                (click)=\"this.toggleSideNav()\"\n                [attr.aria-label]=\"'layout.menu' | translate\"\n              >\n                <mat-icon>menu</mat-icon>\n              </button>\n            }\n            @if (!isSmall) {\n              <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n                <a\n                  [matMenuTriggerFor]=\"languageMenu\"\n                  data-cy=\"languageMenu\"\n                  [attr.aria-label]=\"'language.selection' | translate\"\n                  mat-tab-link\n                >\n                  {{ currentLanguage }}\n                  <mat-icon style=\"width: 16px\">expand_more</mat-icon>\n                </a>\n              </div>\n            }\n            <mat-menu #languageMenu>\n              @for (lang of languages; track lang.code) {\n                <button\n                  type=\"button\"\n                  class=\"mat-mdc-menu-item\"\n                  mat-menu-item\n                  [attr.data-cy]=\"'language_' + lang.code\"\n                  (click)=\"changeLanguage(lang.code)\"\n                  [attr.aria-label]=\"lang.label\"\n                >\n                  {{ lang.label }}\n                </button>\n              }\n            </mat-menu>\n          </div>\n        </mat-toolbar>\n      </header>\n      <ng-container>\n        @if (content?.template; as tpl) {\n          <div\n            [id]=\"id\"\n            [attr.role]=\"role\"\n            class=\"onemrva-layout-content onemrva-layout-container\"\n          >\n            @if (leftSidenavService.items().length > 0) {\n              <div class=\"container-with-nav\">\n                <div class=\"left-content\">\n                  <onemrva-layout-left-sidenav></onemrva-layout-left-sidenav>\n                </div>\n                <div class=\"right-content\">\n                  <div class=\"content-container\">\n                    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n                  </div>\n                </div>\n              </div>\n            } @else {\n              <div class=\"content-container\">\n                <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n              </div>\n            }\n            @if (\n              environment &&\n              (environment === env.LOCAL || environment === env.TEST)\n            ) {\n              <button\n                id=\"accessibility_fab\"\n                mat-fab\n                color=\"accent\"\n                aria-label=\"Accessibility check\"\n                matTooltip=\"Accessibility check\"\n                onclick=\"(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();\"\n              >\n                <mat-icon>accessibility</mat-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <footer class=\"onemrva-footer p mb text-center\">\n          @if (footer?.template; as footerTpl) {\n            <div class=\"onemrva-layout-container\">\n              <ng-container *ngTemplateOutlet=\"footerTpl\"></ng-container>\n            </div>\n          }\n        </footer>\n      </ng-container>\n    </div>\n  </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host router-outlet{display:block;margin-bottom:90px}:host header mat-toolbar{position:fixed;height:var(--layout-header-height);z-index:400;--mat-tab-divider-color: transparent}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host .onemrva-layout-content{padding-top:var(--layout-content-padding-top);min-height:calc(100vh - 48px)}:host .onemrva-layout-content .container-with-nav{display:flex}:host .onemrva-layout-content .container-with-nav .left-content{flex:0 0 240px}@media screen and (max-width: 640px){:host .onemrva-layout-content .container-with-nav .left-content{position:absolute;z-index:10;margin-left:-240px;transition:.5s ease-in-out margin-left;overflow:hidden}:host .onemrva-layout-content .container-with-nav .left-content.open{margin-left:0}}:host .onemrva-layout-content .container-with-nav .right-content{flex:1}:host .mat-drawer-content{min-height:100vh}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:60px;height:50px;padding:15px 20px;font-weight:700;font-size:16px;border-radius:0 0 100%;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST{background-color:#36c;display:block}:host .environment.VAL{background-color:#093;display:block}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width: 640px){:host mat-drawer{width:99%!important}}.mat-mdc-menu-content button.active>*{font-weight:700!important}.mat-mdc-menu-content button mat-icon{font-size:1.125rem!important;height:1.125rem;width:1.125rem}.mat-mdc-menu-content button span{font-size:14px!important}nav a.disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { routes: [{
                 type: ContentChildren,
                 args: [LayoutRouteComponent]
@@ -798,11 +798,11 @@ class LayoutDrawerContentComponent {
         this.drawerService = inject(OnemrvaDrawerService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LayoutDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", 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 - 180px);overflow:auto}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", 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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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 - 180px);overflow:auto}\n"] }]
+            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"] }]
         }] });
 class LayoutDrawerTitleComponent {
@@ -1376,30 +1376,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 class OnemrvaMatBreadcrumbComponent {
     constructor() {
-        this.fakePath = null;
+        this.paths = input([], ...(ngDevMode ? [{ debugName: "paths" }] : []));
         this.breadcrumbService = inject(OnemrvaMatBreadcrumbService);
-    }
-    ngOnInit() {
-        if (this.fakePath) {
-            this.breadcrumbs$ = of(this.fakePath.map(path => ({
-                label: path,
-                url: path,
-                translate: false,
-            })));
-        }
-        else {
-            this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
-        }
+        effect(() => {
+            if (this.paths().length > 0) {
+                this.breadcrumbs$ = of(this.paths());
+            }
+            else {
+                this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatBreadcrumbComponent, isStandalone: true, selector: "onemrva-mat-breadcrumb", inputs: { fakePath: "fakePath" }, ngImport: i0, template: "@if (breadcrumbs$ | async; as bc) {\n  <ng-container>\n    @if (bc.length > 0) {\n      <ul class=\"onemrva-mat-breadcrumb\">\n        @for (breadcrumb of bc; track breadcrumb.label; let bridx = $index) {\n          <li\n            class=\"onemrva-mat-breadcrumb-link-container\"\n            [ngStyle]=\"{\n              display: bc.length <= 6 || bridx <= 2 ? 'list-item' : 'none',\n            }\"\n          >\n            <div\n              [routerLink]=\"breadcrumb.url\"\n              class=\"onemrva-mat-breadcrumb-link\"\n            >\n              @if (breadcrumb.translate) {\n                {{ breadcrumb.label | translate }}\n              } @else {\n                {{ breadcrumb.label }}\n              }\n            </div>\n\n            @if (bridx < bc.length - 1) {\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            }\n          </li>\n          @if (bc.length > 6) {\n            <li\n              class=\"onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden\"\n            >\n              ...\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            </li>\n            <li class=\"onemrva-mat-breadcrumb-link-container\">\n              <div\n                [routerLink]=\"bc[bc.length - 1].url\"\n                class=\"onemrva-mat-breadcrumb-link\"\n              >\n                {{ bc[bc.length - 1].label }}\n              </div>\n            </li>\n          }\n        }\n      </ul>\n    }\n  </ng-container>\n}\n", styles: [".onemrva-mat-breadcrumb{display:flex;list-style:none;padding:0;align-items:baseline}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container{margin-right:8px}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container .chevron-right{margin:0 var(--spacer);font-family:var(--icon-font);content:\"\\e5e1\";line-height:1rem;font-size:1rem;vertical-align:middle;height:1rem;width:.25rem}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child) .onemrva-mat-breadcrumb-link{text-decoration:none;color:var(--mat-sys-primary);display:inline-block;font:var(--mat-sys-body-small-size)}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child):hover .onemrva-mat-breadcrumb-link{text-decoration:underline;color:var(--mat-sys-primary);cursor:pointer}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link{display:inline-block;text-decoration:none}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link:hover{cursor:default}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child:hover{cursor:default}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatBreadcrumbComponent, isStandalone: true, selector: "onemrva-mat-breadcrumb", inputs: { paths: { classPropertyName: "paths", publicName: "paths", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (breadcrumbs$ | async; as bc) {\n  <ng-container>\n    @if (bc.length > 0) {\n      <ul class=\"onemrva-mat-breadcrumb\">\n        @for (breadcrumb of bc; track breadcrumb.label; let bridx = $index) {\n          <li\n            class=\"onemrva-mat-breadcrumb-link-container\"\n            [ngStyle]=\"{\n              display: bc.length <= 6 || bridx <= 2 ? 'list-item' : 'none',\n            }\"\n          >\n            <div\n              [routerLink]=\"breadcrumb.url\"\n              class=\"onemrva-mat-breadcrumb-link\"\n            >\n              @if (breadcrumb.translate) {\n                {{ breadcrumb.label | translate }}\n              } @else {\n                {{ breadcrumb.label }}\n              }\n            </div>\n\n            @if (bridx < bc.length - 1) {\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            }\n          </li>\n          @if (bc.length > 6) {\n            <li\n              class=\"onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden\"\n            >\n              ...\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            </li>\n            <li class=\"onemrva-mat-breadcrumb-link-container\">\n              <div\n                [routerLink]=\"bc[bc.length - 1].url\"\n                class=\"onemrva-mat-breadcrumb-link\"\n              >\n                {{ bc[bc.length - 1].label }}\n              </div>\n            </li>\n          }\n        }\n      </ul>\n    }\n  </ng-container>\n}\n", styles: [".onemrva-mat-breadcrumb{display:flex;list-style:none;padding:0;align-items:baseline}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container{margin-right:8px}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container .chevron-right{margin:0 var(--spacer);font-family:var(--icon-font);content:\"\\e5e1\";line-height:1rem;font-size:1rem;vertical-align:middle;height:1rem;width:.25rem}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child) .onemrva-mat-breadcrumb-link{text-decoration:none;color:var(--mat-sys-primary);display:inline-block;font:var(--mat-sys-body-small-size)}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child):hover .onemrva-mat-breadcrumb-link{text-decoration:underline;color:var(--mat-sys-primary);cursor:pointer}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link{display:inline-block;text-decoration:none}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link:hover{cursor:default}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child:hover{cursor:default}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-mat-breadcrumb', imports: [NgStyle, RouterLink, MatIcon, AsyncPipe, TranslatePipe], standalone: true, template: "@if (breadcrumbs$ | async; as bc) {\n  <ng-container>\n    @if (bc.length > 0) {\n      <ul class=\"onemrva-mat-breadcrumb\">\n        @for (breadcrumb of bc; track breadcrumb.label; let bridx = $index) {\n          <li\n            class=\"onemrva-mat-breadcrumb-link-container\"\n            [ngStyle]=\"{\n              display: bc.length <= 6 || bridx <= 2 ? 'list-item' : 'none',\n            }\"\n          >\n            <div\n              [routerLink]=\"breadcrumb.url\"\n              class=\"onemrva-mat-breadcrumb-link\"\n            >\n              @if (breadcrumb.translate) {\n                {{ breadcrumb.label | translate }}\n              } @else {\n                {{ breadcrumb.label }}\n              }\n            </div>\n\n            @if (bridx < bc.length - 1) {\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            }\n          </li>\n          @if (bc.length > 6) {\n            <li\n              class=\"onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden\"\n            >\n              ...\n              <mat-icon class=\"chevron-right\" style=\"width: 10px\"\n                >chevron_right</mat-icon\n              >\n            </li>\n            <li class=\"onemrva-mat-breadcrumb-link-container\">\n              <div\n                [routerLink]=\"bc[bc.length - 1].url\"\n                class=\"onemrva-mat-breadcrumb-link\"\n              >\n                {{ bc[bc.length - 1].label }}\n              </div>\n            </li>\n          }\n        }\n      </ul>\n    }\n  </ng-container>\n}\n", styles: [".onemrva-mat-breadcrumb{display:flex;list-style:none;padding:0;align-items:baseline}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container{margin-right:8px}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container .chevron-right{margin:0 var(--spacer);font-family:var(--icon-font);content:\"\\e5e1\";line-height:1rem;font-size:1rem;vertical-align:middle;height:1rem;width:.25rem}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child) .onemrva-mat-breadcrumb-link{text-decoration:none;color:var(--mat-sys-primary);display:inline-block;font:var(--mat-sys-body-small-size)}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:not(:last-child):hover .onemrva-mat-breadcrumb-link{text-decoration:underline;color:var(--mat-sys-primary);cursor:pointer}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link{display:inline-block;text-decoration:none}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child .onemrva-mat-breadcrumb-link:hover{cursor:default}.onemrva-mat-breadcrumb .onemrva-mat-breadcrumb-link-container:last-child:hover{cursor:default}\n"] }]
-        }], propDecorators: { fakePath: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 class OnemrvaMatBreadcrumbModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4456,11 +4450,11 @@ class OnemrvaMatNavigationTreeComponent {
         this.translate = input(true, ...(ngDevMode ? [{ debugName: "translate" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatNavigationTreeComponent, isStandalone: true, selector: "onemrva-mat-navigation-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      ></onemrva-mat-navigation-tree>\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [""], dependencies: [{ kind: "component", type: OnemrvaMatNavigationTreeComponent, selector: "onemrva-mat-navigation-tree", inputs: ["items", "level", "translate"] }, { kind: "component", type: OnemrvaMatNavigationItemComponent, selector: "onemrva-mat-navigation-item", inputs: ["routerLink", "routerLinkActiveOptions", "dataCy", "baseRouteForActiveMenu", "label", "icon", "level", "highlighted", "opened", "children", "customNgClass", "translate"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatNavigationTreeComponent, isStandalone: true, selector: "onemrva-mat-navigation-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      ></onemrva-mat-navigation-tree>\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationTreeComponent, selector: "onemrva-mat-navigation-tree", inputs: ["items", "level", "translate"] }, { kind: "component", type: OnemrvaMatNavigationItemComponent, selector: "onemrva-mat-navigation-item", inputs: ["routerLink", "routerLinkActiveOptions", "dataCy", "baseRouteForActiveMenu", "label", "icon", "level", "highlighted", "opened", "children", "customNgClass", "translate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-navigation-tree', imports: [OnemrvaMatNavigationItemComponent], encapsulation: ViewEncapsulation.None, standalone: true, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      ></onemrva-mat-navigation-tree>\n    }\n  </onemrva-mat-navigation-item>\n}\n" }]
+            args: [{ selector: 'onemrva-mat-navigation-tree', imports: [OnemrvaMatNavigationItemComponent], standalone: true, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      ></onemrva-mat-navigation-tree>\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [":host{width:100%}\n"] }]
         }] });
 class OnemrvaMatNavigationComponent {
@@ -4804,11 +4798,11 @@ class OnemrvaMatPanelTitleComponent {
         this.cd.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatPanelTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatPanelTitleComponent, isStandalone: true, selector: "onemrva-mat-panel-title", inputs: { customNgClass: "customNgClass" }, queries: [{ propertyName: "content", first: true, predicate: OnemrvaMatPanelTitleActionComponent, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <div class=\"onemrva-mat-panel-title\" [ngClass]=\"customNgClass\">\n    <ng-content></ng-content>\n    @if (content?.template; as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n  </div>\n</ng-template>\n", styles: [".onemrva-mat-panel-title{font:var(--mat-sys-title-large);color:var(--mat-panel-title-color);display:flex;justify-content:space-between;width:100%}.is-expandable .onemrva-mat-panel-title{width:calc(100% - 50px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatPanelTitleComponent, isStandalone: true, selector: "onemrva-mat-panel-title", inputs: { customNgClass: "customNgClass" }, queries: [{ propertyName: "content", first: true, predicate: OnemrvaMatPanelTitleActionComponent, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template>\n  <div class=\"onemrva-mat-panel-title\" [ngClass]=\"customNgClass\">\n    <ng-content></ng-content>\n    @if (content?.template; as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n  </div>\n</ng-template>\n", styles: [".onemrva-mat-panel-title{font:var(--mat-sys-title-large);color:var(--mat-panel-title-color);display:flex;justify-content:space-between;width:100%;align-items:center}.is-expandable .onemrva-mat-panel-title{width:calc(100% - 50px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatPanelTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-panel-title', standalone: true, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template>\n  <div class=\"onemrva-mat-panel-title\" [ngClass]=\"customNgClass\">\n    <ng-content></ng-content>\n    @if (content?.template; as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n  </div>\n</ng-template>\n", styles: [".onemrva-mat-panel-title{font:var(--mat-sys-title-large);color:var(--mat-panel-title-color);display:flex;justify-content:space-between;width:100%}.is-expandable .onemrva-mat-panel-title{width:calc(100% - 50px)}\n"] }]
+            args: [{ selector: 'onemrva-mat-panel-title', standalone: true, encapsulation: ViewEncapsulation.None, imports: [NgClass, NgTemplateOutlet], template: "<ng-template>\n  <div class=\"onemrva-mat-panel-title\" [ngClass]=\"customNgClass\">\n    <ng-content></ng-content>\n    @if (content?.template; as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n  </div>\n</ng-template>\n", styles: [".onemrva-mat-panel-title{font:var(--mat-sys-title-large);color:var(--mat-panel-title-color);display:flex;justify-content:space-between;width:100%;align-items:center}.is-expandable .onemrva-mat-panel-title{width:calc(100% - 50px)}\n"] }]
         }], propDecorators: { customNgClass: [{
                 type: Input
             }], template: [{
@@ -4847,15 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: [TemplateRef]
             }] } });
-class MatExpansionPanelHeaderArrowDivider {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatExpansionPanelHeaderArrowDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: MatExpansionPanelHeaderArrowDivider, isStandalone: true, selector: "mat-expansion-panel-header-arrow-divider", ngImport: i0, template: "<span></span>\n", styles: [":host span{position:absolute;top:1.55rem;right:3.4rem;display:inline-flex;border-left:1px solid var(--mat-sys-outline-variant);height:30px;margin:0}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatExpansionPanelHeaderArrowDivider, decorators: [{
-            type: Component,
-            args: [{ selector: 'mat-expansion-panel-header-arrow-divider', imports: [], standalone: true, template: "<span></span>\n", styles: [":host span{position:absolute;top:1.55rem;right:3.4rem;display:inline-flex;border-left:1px solid var(--mat-sys-outline-variant);height:30px;margin:0}\n"] }]
-        }] });
+// import { MatExpansionPanelHeaderArrowDivider } from './mat-expansion-panel-header-arrow-divider';
 let NEXT_ID$5 = 0;
 class OnemrvaMatPanelComponent {
     constructor() {
@@ -4874,7 +4860,7 @@ class OnemrvaMatPanelComponent {
         this.cd.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatPanelComponent, isStandalone: true, selector: "onemrva-mat-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, data_cy: { classPropertyName: "data_cy", publicName: "data_cy", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "attr.id": "this.id", "attr.data-cy": "this.data_cy", "class.mat-disabled": "this.disabled", "class.has-icon": "this.icon", "class.is-expandable": "this.expandable" } }, queries: [{ propertyName: "panel", first: true, predicate: OnemrvaMatPanelComponent, descendants: true }, { propertyName: "title", first: true, predicate: OnemrvaMatPanelTitleComponent, descendants: true }, { propertyName: "content", first: true, predicate: OnemrvaMatPanelContentComponent, descendants: true }, { propertyName: "icon", first: true, predicate: OnemrvaMatPanelIconComponent, descendants: true }], ngImport: i0, template: "@if (icon?.template; as tpl) {\n  <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n}\n\n<div class=\"right-content\">\n  @if (expandable) {\n    @if (title?.template; as titleTpl) {\n      <mat-expansion-panel\n        [expanded]=\"expanded()\"\n        (expandedChange)=\"onChangeState($event)\"\n      >\n        <mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n          <mat-expansion-panel-header-arrow-divider />\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n      </mat-expansion-panel>\n    }\n  } @else {\n    @if (title?.template; as tpl) {\n      <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n    <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n  }\n</div>\n", styles: [":host{border-radius:var(--border-radius);border:1px solid var(--mat-sys-outline-variant);padding:var(--triple-spacer);display:block;position:relative;background:var(--mat-sys-surface-container-lowest);--mat-expansion-header-expanded-state-height: 80px;--mat-expansion-header-collapsed-state-height: 80px;--mat-expansion-container-background-color: transparant;--mat-panel-title-color: var(--test-title-color-panel, inherit)}:host.mat-primary{--mat-panel-title-color: var(--mat-sys-on-primary-container);--mat-expansion-container-background-color: var( --mat-sys-primary-container )}:host.is-expandable{padding:0}:host.is-expandable mat-expansion-panel.mat-expanded mat-expansion-panel-header.mat-expansion-panel-header{border-bottom:1px solid var(--mat-sys-outline-variant)}:host.is-expandable mat-expansion-panel-header.mat-expansion-panel-header{padding:0 var(--triple-spacer);border-bottom-left-radius:0;border-bottom-right-radius:0}:host.is-expandable .mat-expansion-panel{border-radius:var(--border-radius)}:host[class*=\" mat-\"],:host[class^=mat-]{background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient);border:none;--mat-form-field-outlined-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-outline-color: var(--on-background-gradient);--mat-form-field-outlined-focus-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-focus-outline-color: var(--on-background-gradient);--mat-form-field-outlined-hover-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-hover-outline-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-placeholder-color: var(--on-background-gradient);--mat-select-enabled-arrow-color: var(--on-background-gradient);--mat-select-focused-arrow-color: var(--on-background-gradient);--mat-select-placeholder-text-color: var(--on-background-gradient);--mat-select-enabled-trigger-text-color: var(--on-background-gradient)}:host a{color:var(--mat-sys-on-surface)}:host.has-icon .right-content{margin-left:calc(var(--spacer) * 10)}:host .onemrva-mat-panel-content{margin-top:var(--double-spacer)}:host .onemrva-mat-panel-content p:last-child{margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: MatExpansionPanelHeaderArrowDivider, selector: "mat-expansion-panel-header-arrow-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatPanelComponent, isStandalone: true, selector: "onemrva-mat-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, data_cy: { classPropertyName: "data_cy", publicName: "data_cy", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: false, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "attr.id": "this.id", "attr.data-cy": "this.data_cy", "class.mat-disabled": "this.disabled", "class.has-icon": "this.icon", "class.is-expandable": "this.expandable" } }, queries: [{ propertyName: "panel", first: true, predicate: OnemrvaMatPanelComponent, descendants: true }, { propertyName: "title", first: true, predicate: OnemrvaMatPanelTitleComponent, descendants: true }, { propertyName: "content", first: true, predicate: OnemrvaMatPanelContentComponent, descendants: true }, { propertyName: "icon", first: true, predicate: OnemrvaMatPanelIconComponent, descendants: true }], ngImport: i0, template: "@if (icon?.template; as tpl) {\n  <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n}\n\n<div class=\"right-content\">\n  @if (expandable) {\n    @if (title?.template; as titleTpl) {\n      <mat-expansion-panel\n        [expanded]=\"expanded()\"\n        (expandedChange)=\"onChangeState($event)\"\n      >\n        <mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n      </mat-expansion-panel>\n    }\n  } @else {\n    @if (title?.template; as tpl) {\n      <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n    <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n  }\n</div>\n", styles: [":host{border-radius:var(--border-radius);border:1px solid var(--mat-sys-outline-variant);padding:var(--triple-spacer);display:block;position:relative;background:var(--mat-sys-surface-container-lowest);--mat-expansion-header-expanded-state-height: 80px;--mat-expansion-header-collapsed-state-height: 80px;--mat-expansion-container-background-color: transparant;--mat-panel-title-color: var(--test-title-color-panel, inherit)}:host.mat-primary{--mat-panel-title-color: var(--mat-sys-on-primary-container);--mat-expansion-container-background-color: var( --mat-sys-primary-container )}:host.is-expandable{padding:0}:host.is-expandable mat-expansion-panel.mat-expanded mat-expansion-panel-header.mat-expansion-panel-header{border-bottom:1px solid var(--mat-sys-outline-variant)}:host.is-expandable mat-expansion-panel-header.mat-expansion-panel-header{padding:var(--double-spacer) var(--triple-spacer);height:auto;border-bottom-left-radius:0;border-bottom-right-radius:0}:host.is-expandable .mat-expansion-panel{border-radius:var(--border-radius)}:host[class*=\" mat-\"],:host[class^=mat-]{background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient);border:none;--mat-sys-on-surface: --on-background-gradient;--mat-form-field-outlined-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-outline-color: var(--on-background-gradient);--mat-form-field-outlined-focus-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-focus-outline-color: var(--on-background-gradient);--mat-form-field-outlined-hover-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-hover-outline-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-placeholder-color: var(--on-background-gradient);--mat-select-enabled-arrow-color: var(--on-background-gradient);--mat-select-focused-arrow-color: var(--on-background-gradient);--mat-select-placeholder-text-color: var(--on-background-gradient);--mat-select-enabled-trigger-text-color: var(--on-background-gradient)}:host a{color:var(--mat-sys-on-surface)}:host.has-icon .right-content{margin-left:calc(var(--spacer) * 10)}:host .onemrva-mat-panel-content{margin-top:var(--double-spacer)}:host .onemrva-mat-panel-content p:last-child{margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatPanelComponent, decorators: [{
             type: Component,
@@ -4882,8 +4868,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         NgTemplateOutlet,
                         MatExpansionPanel,
                         MatExpansionPanelHeader,
-                        MatExpansionPanelHeaderArrowDivider,
-                    ], standalone: true, template: "@if (icon?.template; as tpl) {\n  <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n}\n\n<div class=\"right-content\">\n  @if (expandable) {\n    @if (title?.template; as titleTpl) {\n      <mat-expansion-panel\n        [expanded]=\"expanded()\"\n        (expandedChange)=\"onChangeState($event)\"\n      >\n        <mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n          <mat-expansion-panel-header-arrow-divider />\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n      </mat-expansion-panel>\n    }\n  } @else {\n    @if (title?.template; as tpl) {\n      <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n    <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n  }\n</div>\n", styles: [":host{border-radius:var(--border-radius);border:1px solid var(--mat-sys-outline-variant);padding:var(--triple-spacer);display:block;position:relative;background:var(--mat-sys-surface-container-lowest);--mat-expansion-header-expanded-state-height: 80px;--mat-expansion-header-collapsed-state-height: 80px;--mat-expansion-container-background-color: transparant;--mat-panel-title-color: var(--test-title-color-panel, inherit)}:host.mat-primary{--mat-panel-title-color: var(--mat-sys-on-primary-container);--mat-expansion-container-background-color: var( --mat-sys-primary-container )}:host.is-expandable{padding:0}:host.is-expandable mat-expansion-panel.mat-expanded mat-expansion-panel-header.mat-expansion-panel-header{border-bottom:1px solid var(--mat-sys-outline-variant)}:host.is-expandable mat-expansion-panel-header.mat-expansion-panel-header{padding:0 var(--triple-spacer);border-bottom-left-radius:0;border-bottom-right-radius:0}:host.is-expandable .mat-expansion-panel{border-radius:var(--border-radius)}:host[class*=\" mat-\"],:host[class^=mat-]{background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient);border:none;--mat-form-field-outlined-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-outline-color: var(--on-background-gradient);--mat-form-field-outlined-focus-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-focus-outline-color: var(--on-background-gradient);--mat-form-field-outlined-hover-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-hover-outline-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-placeholder-color: var(--on-background-gradient);--mat-select-enabled-arrow-color: var(--on-background-gradient);--mat-select-focused-arrow-color: var(--on-background-gradient);--mat-select-placeholder-text-color: var(--on-background-gradient);--mat-select-enabled-trigger-text-color: var(--on-background-gradient)}:host a{color:var(--mat-sys-on-surface)}:host.has-icon .right-content{margin-left:calc(var(--spacer) * 10)}:host .onemrva-mat-panel-content{margin-top:var(--double-spacer)}:host .onemrva-mat-panel-content p:last-child{margin:0}\n"] }]
+                        // MatExpansionPanelHeaderArrowDivider,
+                    ], standalone: true, template: "@if (icon?.template; as tpl) {\n  <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n}\n\n<div class=\"right-content\">\n  @if (expandable) {\n    @if (title?.template; as titleTpl) {\n      <mat-expansion-panel\n        [expanded]=\"expanded()\"\n        (expandedChange)=\"onChangeState($event)\"\n      >\n        <mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"titleTpl\"></ng-container>\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n      </mat-expansion-panel>\n    }\n  } @else {\n    @if (title?.template; as tpl) {\n      <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n    <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n  }\n</div>\n", styles: [":host{border-radius:var(--border-radius);border:1px solid var(--mat-sys-outline-variant);padding:var(--triple-spacer);display:block;position:relative;background:var(--mat-sys-surface-container-lowest);--mat-expansion-header-expanded-state-height: 80px;--mat-expansion-header-collapsed-state-height: 80px;--mat-expansion-container-background-color: transparant;--mat-panel-title-color: var(--test-title-color-panel, inherit)}:host.mat-primary{--mat-panel-title-color: var(--mat-sys-on-primary-container);--mat-expansion-container-background-color: var( --mat-sys-primary-container )}:host.is-expandable{padding:0}:host.is-expandable mat-expansion-panel.mat-expanded mat-expansion-panel-header.mat-expansion-panel-header{border-bottom:1px solid var(--mat-sys-outline-variant)}:host.is-expandable mat-expansion-panel-header.mat-expansion-panel-header{padding:var(--double-spacer) var(--triple-spacer);height:auto;border-bottom-left-radius:0;border-bottom-right-radius:0}:host.is-expandable .mat-expansion-panel{border-radius:var(--border-radius)}:host[class*=\" mat-\"],:host[class^=mat-]{background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}:host.mat-accent{background:var(--background-gradient);color:var(--on-background-gradient);border:none;--mat-sys-on-surface: --on-background-gradient;--mat-form-field-outlined-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-outline-color: var(--on-background-gradient);--mat-form-field-outlined-focus-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-focus-outline-color: var(--on-background-gradient);--mat-form-field-outlined-hover-label-text-color: var(--on-background-gradient);--mat-form-field-outlined-hover-outline-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-color: var(--on-background-gradient);--mat-form-field-outlined-input-text-placeholder-color: var(--on-background-gradient);--mat-select-enabled-arrow-color: var(--on-background-gradient);--mat-select-focused-arrow-color: var(--on-background-gradient);--mat-select-placeholder-text-color: var(--on-background-gradient);--mat-select-enabled-trigger-text-color: var(--on-background-gradient)}:host a{color:var(--mat-sys-on-surface)}:host.has-icon .right-content{margin-left:calc(var(--spacer) * 10)}:host .onemrva-mat-panel-content{margin-top:var(--double-spacer)}:host .onemrva-mat-panel-content p:last-child{margin:0}\n"] }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -4955,6 +4941,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }] });
+class MatExpansionPanelHeaderArrowDivider {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatExpansionPanelHeaderArrowDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: MatExpansionPanelHeaderArrowDivider, isStandalone: true, selector: "mat-expansion-panel-header-arrow-divider", ngImport: i0, template: "<span></span>\n", styles: [":host span{position:absolute;top:1.55rem;right:3.4rem;display:inline-flex;border-left:1px solid var(--mat-sys-outline-variant);height:30px;margin:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MatExpansionPanelHeaderArrowDivider, decorators: [{
+            type: Component,
+            args: [{ selector: 'mat-expansion-panel-header-arrow-divider', imports: [], standalone: true, template: "<span></span>\n", styles: [":host span{position:absolute;top:1.55rem;right:3.4rem;display:inline-flex;border-left:1px solid var(--mat-sys-outline-variant);height:30px;margin:0}\n"] }]
+        }] });
 let index$1 = 0;
 class OnemrvaMatPopOverTriggerComponent {
     constructor() {
@@ -6249,11 +6244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 class OnemrvaMatStickerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatStickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatStickerComponent, isStandalone: true, selector: "onemrva-mat-sticker", ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, styles: [":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;cursor:default;background:var(--mat-sys-surface);opacity:1;border-radius:var(--small-border-radius);padding:2px 8px;font:var(--mat-sys-label-medium);box-sizing:border-box;border:2px solid var(--mat-sys-primary);color:var(--mat-sys-primary)}:host.mat-accent{background:var(--background-gradient)!important;border:none;padding:4px 10px;color:var(--on-background-gradient)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: OnemrvaMatStickerComponent, isStandalone: true, selector: "onemrva-mat-sticker", ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, styles: [":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;flex-shrink:0;align-items:center;cursor:default;background:var(--mat-sys-surface);opacity:1;border-radius:var(--small-border-radius);padding:2px 8px;font:var(--mat-sys-label-medium);box-sizing:border-box;border:2px solid var(--mat-sys-primary);color:var(--mat-sys-primary)}:host.mat-accent{background:var(--background-gradient)!important;border:none;padding:4px 10px;color:var(--on-background-gradient)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatStickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-sticker', template: ` <ng-content></ng-content>`, imports: [], standalone: true, encapsulation: ViewEncapsulation.Emulated, styles: [":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;cursor:default;background:var(--mat-sys-surface);opacity:1;border-radius:var(--small-border-radius);padding:2px 8px;font:var(--mat-sys-label-medium);box-sizing:border-box;border:2px solid var(--mat-sys-primary);color:var(--mat-sys-primary)}:host.mat-accent{background:var(--background-gradient)!important;border:none;padding:4px 10px;color:var(--on-background-gradient)}\n"] }]
+            args: [{ selector: 'onemrva-mat-sticker', template: ` <ng-content></ng-content>`, imports: [], standalone: true, encapsulation: ViewEncapsulation.Emulated, styles: [":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;flex-shrink:0;align-items:center;cursor:default;background:var(--mat-sys-surface);opacity:1;border-radius:var(--small-border-radius);padding:2px 8px;font:var(--mat-sys-label-medium);box-sizing:border-box;border:2px solid var(--mat-sys-primary);color:var(--mat-sys-primary)}:host.mat-accent{background:var(--background-gradient)!important;border:none;padding:4px 10px;color:var(--on-background-gradient)}\n"] }]
         }] });
 class OnemrvaMatStickerModule {