@onemrvapublic/design-system 20.11.0-develop.1 → 20.11.0-develop.3

package/fesm2022/onemrvapublic-design-system-mat-notification.mjs

@@ -63,11 +63,11 @@ class OnemrvaMatNotificationComponent {
         this.notificationClose.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: OnemrvaMatNotificationComponent, isStandalone: true, selector: "onemrva-mat-notification", inputs: { message: "message", closable: "closable", id: "id", dataCy: "dataCy" }, outputs: { notificationClose: "notificationClose" }, host: { properties: { "class.collapse-notification": "this._closed", "attr.id": "this.id", "attr.data-cy": "this.dataCy", "attr.aria-live": "this.ariaLive", "attr.role": "this.role" } }, ngImport: i0, template: "<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host{position:fixed;top:var(--layout-header-height, 0);left:0;right:0;transition:max-height .4s ease-out;max-height:100vh;overflow:hidden;z-index:401;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border-bottom:1px solid var(--mat-sys-primary)}:host .onemrva-mat-notification{position:relative}:host .onemrva-mat-notification .onemrva-mat-notification-content{font:var(--mat-sys-body-medium);padding:var(--double-spacer) var(--spacer) var(--double-spacer) var(--spacer)}:host .onemrva-mat-notification .onemrva-mat-notification-content:before{margin-right:var(--double-spacer);margin-top:var(--quarter-spacer)}:host.collapse-notification{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: OnemrvaMatNotificationComponent, isStandalone: true, selector: "onemrva-mat-notification", inputs: { message: "message", closable: "closable", id: "id", dataCy: "dataCy" }, outputs: { notificationClose: "notificationClose" }, host: { properties: { "class.collapse-notification": "this._closed", "attr.id": "this.id", "attr.data-cy": "this.dataCy", "attr.aria-live": "this.ariaLive", "attr.role": "this.role" } }, ngImport: i0, template: "<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host .onemrva-mat-notification{transition:max-height .4s ease-out;max-height:100vh;z-index:401;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border-bottom:1px solid var(--mat-sys-primary)}:host .onemrva-mat-notification .onemrva-mat-notification-content{font:var(--mat-sys-body-medium);padding:var(--double-spacer) var(--spacer) var(--double-spacer) var(--spacer)}:host .onemrva-mat-notification .onemrva-mat-notification-content:before{margin-right:var(--double-spacer);margin-top:var(--quarter-spacer)}:host.collapse-notification{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-notification', standalone: true, imports: [CommonModule, TranslateModule, MatIconModule], template: "<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host{position:fixed;top:var(--layout-header-height, 0);left:0;right:0;transition:max-height .4s ease-out;max-height:100vh;overflow:hidden;z-index:401;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border-bottom:1px solid var(--mat-sys-primary)}:host .onemrva-mat-notification{position:relative}:host .onemrva-mat-notification .onemrva-mat-notification-content{font:var(--mat-sys-body-medium);padding:var(--double-spacer) var(--spacer) var(--double-spacer) var(--spacer)}:host .onemrva-mat-notification .onemrva-mat-notification-content:before{margin-right:var(--double-spacer);margin-top:var(--quarter-spacer)}:host.collapse-notification{display:none}\n"] }]
+            args: [{ selector: 'onemrva-mat-notification', standalone: true, imports: [CommonModule, TranslateModule, MatIconModule], template: "<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host .onemrva-mat-notification{transition:max-height .4s ease-out;max-height:100vh;z-index:401;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border-bottom:1px solid var(--mat-sys-primary)}:host .onemrva-mat-notification .onemrva-mat-notification-content{font:var(--mat-sys-body-medium);padding:var(--double-spacer) var(--spacer) var(--double-spacer) var(--spacer)}:host .onemrva-mat-notification .onemrva-mat-notification-content:before{margin-right:var(--double-spacer);margin-top:var(--quarter-spacer)}:host.collapse-notification{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { message: [{
                 type: Input
             }], closable: [{

package/fesm2022/onemrvapublic-design-system-mat-notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-mat-notification.mjs","sources":["../../../../projects/onemrva/design-system/mat-notification/src/onemrva-mat-notification.component.ts","../../../../projects/onemrva/design-system/mat-notification/src/onemrva-mat-notification.component.html","../../../../projects/onemrva/design-system/mat-notification/onemrvapublic-design-system-mat-notification.ts"],"sourcesContent":["import {\n  BreakpointObserver,\n  Breakpoints,\n  BreakpointState,\n} from '@angular/cdk/layout';\nimport { CommonModule } from '@angular/common';\nimport {\n  Component,\n  EventEmitter,\n  HostBinding,\n  inject,\n  Input,\n  OnDestroy,\n  Output,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'onemrva-mat-notification',\n  templateUrl: 'onemrva-mat-notification.component.html',\n  styleUrl: 'onemrva-mat-notification.component.scss',\n  standalone: true,\n  imports: [CommonModule, TranslateModule, MatIconModule],\n})\nexport class OnemrvaMatNotificationComponent implements OnDestroy {\n  @Input() message = '';\n  @Input() closable = true;\n\n  _isOpen = true;\n\n  @Output()\n  notificationClose = new EventEmitter<void>();\n\n  /** @hidden @internal */\n  @HostBinding('class.collapse-notification')\n  public get _closed(): boolean {\n    return !this._isOpen;\n  }\n\n  @HostBinding('attr.id')\n  @Input()\n  public id = `onemrva-mat-notification`;\n\n  @HostBinding('attr.data-cy')\n  @Input()\n  dataCy = 'onemrva-mat-notification';\n\n  /**\n   * Returns the `aria-label` attribute of the component.\n   *\n   * @example\n   * ```typescript\n   * let ariaLabel = this.avatar.ariaLabel;\n   * ```\n   *\n   */\n  @HostBinding('attr.aria-live')\n  public ariaLive = 'assertive';\n\n  /**\n   * Returns the `role` attribute of the component.\n   *\n   * @example\n   * ```typescript\n   * let avatarRole = this.avatar.role;\n   * ```\n   */\n  @HostBinding('attr.role')\n  public role = 'alert';\n\n  private destroyNotifier$ = new Subject<void>();\n  isSmall = false;\n  public breakpointObserver = inject(BreakpointObserver);\n\n  constructor() {\n    this.breakpointObserver\n      .observe([Breakpoints.XSmall, Breakpoints.Small])\n      .pipe(takeUntil(this.destroyNotifier$))\n      .subscribe((state: BreakpointState) => {\n        if (state.matches) {\n          this.isSmall = true;\n        } else {\n          this.isSmall = false;\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroyNotifier$.next();\n    this.destroyNotifier$.complete();\n  }\n\n  closeNotification() {\n    this._isOpen = false;\n    this.notificationClose.emit();\n  }\n}\n","<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"onemrvapublic-design-system-mat-notification.mjs","sources":["../../../../projects/onemrva/design-system/mat-notification/src/onemrva-mat-notification.component.ts","../../../../projects/onemrva/design-system/mat-notification/src/onemrva-mat-notification.component.html","../../../../projects/onemrva/design-system/mat-notification/onemrvapublic-design-system-mat-notification.ts"],"sourcesContent":["import {\n  BreakpointObserver,\n  Breakpoints,\n  BreakpointState,\n} from '@angular/cdk/layout';\nimport { CommonModule } from '@angular/common';\nimport {\n  Component,\n  EventEmitter,\n  HostBinding,\n  inject,\n  Input,\n  OnDestroy,\n  Output,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'onemrva-mat-notification',\n  templateUrl: 'onemrva-mat-notification.component.html',\n  styleUrl: 'onemrva-mat-notification.component.scss',\n  standalone: true,\n  imports: [CommonModule, TranslateModule, MatIconModule],\n})\nexport class OnemrvaMatNotificationComponent implements OnDestroy {\n  @Input() message = '';\n  @Input() closable = true;\n\n  _isOpen = true;\n\n  @Output()\n  notificationClose = new EventEmitter<void>();\n\n  /** @hidden @internal */\n  @HostBinding('class.collapse-notification')\n  public get _closed(): boolean {\n    return !this._isOpen;\n  }\n\n  @HostBinding('attr.id')\n  @Input()\n  public id = `onemrva-mat-notification`;\n\n  @HostBinding('attr.data-cy')\n  @Input()\n  dataCy = 'onemrva-mat-notification';\n\n  /**\n   * Returns the `aria-label` attribute of the component.\n   *\n   * @example\n   * ```typescript\n   * let ariaLabel = this.avatar.ariaLabel;\n   * ```\n   *\n   */\n  @HostBinding('attr.aria-live')\n  public ariaLive = 'assertive';\n\n  /**\n   * Returns the `role` attribute of the component.\n   *\n   * @example\n   * ```typescript\n   * let avatarRole = this.avatar.role;\n   * ```\n   */\n  @HostBinding('attr.role')\n  public role = 'alert';\n\n  private destroyNotifier$ = new Subject<void>();\n  isSmall = false;\n  public breakpointObserver = inject(BreakpointObserver);\n\n  constructor() {\n    this.breakpointObserver\n      .observe([Breakpoints.XSmall, Breakpoints.Small])\n      .pipe(takeUntil(this.destroyNotifier$))\n      .subscribe((state: BreakpointState) => {\n        if (state.matches) {\n          this.isSmall = true;\n        } else {\n          this.isSmall = false;\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroyNotifier$.next();\n    this.destroyNotifier$.complete();\n  }\n\n  closeNotification() {\n    this._isOpen = false;\n    this.notificationClose.emit();\n  }\n}\n","<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/layout/index.d.ts

@@ -94,6 +94,7 @@ declare class LayoutFooterComponent {
 interface OnemRvaLanguage {
     code: string;
     label: string;
+    imgCode?: string;
 }
 
 declare class OnemRvaProfile {
@@ -198,6 +199,7 @@ declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
     role: string;
     showThemeSwitcher: boolean;
     onemrvaClass: string;
+    private map;
     activeTheme: i0.WritableSignal<"light" | "dark" | "system">;
     color: Signal<OnemrvaMatColor>;
     toggleTheme(newTheme: 'light' | 'dark' | 'system'): void;
@@ -212,13 +214,14 @@ declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
     ngOnInit(): void;
     get currentLanguage(): string;
     ngAfterViewInit(): void;
+    languageImg(language?: OnemRvaLanguage): string;
     ngOnDestroy(): void;
     doLogout(): void;
     doLogin(): void;
     changeLanguage(langCode: string): void;
     toggleSideNav(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "onemrva-layout", never, { "logo": { "alias": "logo"; "required": false; }; "languages": { "alias": "languages"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "logoRedictionUrl": { "alias": "logoRedictionUrl"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "showThemeSwitcher": { "alias": "showThemeSwitcher"; "required": false; }; }, { "login": "login"; "logout": "logout"; }, ["title", "loginMenu", "content", "afterNav", "footer", "routes"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "onemrva-layout", never, { "logo": { "alias": "logo"; "required": false; }; "languages": { "alias": "languages"; "required": false; }; "environment": { "alias": "environment"; "required": false; }; "logoRedictionUrl": { "alias": "logoRedictionUrl"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "showThemeSwitcher": { "alias": "showThemeSwitcher"; "required": false; }; }, { "login": "login"; "logout": "logout"; }, ["title", "loginMenu", "content", "afterNav", "footer", "routes"], ["onemrva-mat-notification"], true, never>;
 }
 
 declare class LayoutSidenavComponent implements OnInit {

package/layout/src/components/layout/layout.component.scss

@@ -4,26 +4,49 @@
 :host {
   $spacer: 8px;
   position: relative;
+
   .onemrva-layout-container {
+    //padding-top: var(--layout-content-padding-top);
     width: 100%;
     box-sizing: border-box;
   }
+
   a {
     &:active {
       outline: none;
     }
   }
-  router-outlet {
-    display: block;
-    margin-bottom: 90px;
-  }
+
   header {
     mat-toolbar {
-      position: fixed;
-      height: var(--layout-header-height);
       z-index: 400;
       border-bottom: 1px solid var(--mat-sys-outline-variant);
 
+      a[mat-tab-link]:hover {
+        background: var(--mat-sys-surface-container-low);
+      }
+
+      @include mat.toolbar-overrides(
+        (
+          standard-height: var(--layout-header-height),
+          // TODO: align background colors with designs, also on sidenav
+           //container-background-color: orange,
+        )
+      );
+
+      @include mat.tabs-overrides(
+        (
+          divider-color: transparent,
+          container-height: var(--layout-header-height),
+          label-text-font: var(--text-font),
+          label-text-weight: 400,
+          active-indicator-height: 8px,
+          active-hover-indicator-color: var(--mat-sys-surface-container-low),
+          active-focus-indicator-color: var(--mat-sys-surface-container-low),
+          inactive-ripple-color: var(--mat-sys-surface-container-low),
+        )
+      );
+
       .topMenu {
         .mat-mdc-tab-header-pagination-before,
         .mat-mdc-tab-header-pagination-after {
@@ -31,12 +54,19 @@
         }
       }
 
+      .mdc-tab {
+        padding: 0 16px;
+        min-width: unset;
+      }
+
       .logo {
         height: 42px;
       }
 
       // TODO use a design token
       .application-title {
+        display: flex;
+        align-items: center;
         font-size: 1.3rem;
         font-weight: 700;
         height: 42px;
@@ -48,42 +78,11 @@
         }
       }
 
-      @include mat.tabs-overrides(
-        (
-          divider-color: transparent,
-        )
-      );
       .mat-mdc-tab-nav-bar {
         text-transform: uppercase;
       }
     }
   }
-  .onemrva-layout-content {
-    padding-top: var(--layout-content-padding-top);
-    min-height: calc(100vh - 48px);
-    .container-with-nav {
-      display: flex;
-      .left-content {
-        flex: 0 0 240px;
-        @media screen and (max-width: 640px) {
-          position: absolute;
-          z-index: 10;
-          margin-left: -240px;
-          transition: 0.5s ease-in-out margin-left;
-          overflow: hidden;
-          &.open {
-            margin-left: 0;
-          }
-        }
-      }
-      .right-content {
-        flex: 1;
-      }
-    }
-  }
-  .mat-drawer-content {
-    min-height: 100vh;
-  }
 
   #accessibility_fab {
     position: fixed;
@@ -115,7 +114,91 @@
     }
   }
 
+  mat-drawer-content {
+    display: grid;
+    grid-template-areas:
+      'header'
+      'main';
+
+    @media screen and (min-width: 640px) {
+      grid-template-columns: 240px 1fr;
+
+      grid-template-areas:
+        'header         header'
+        'left-sidenav   main';
+    }
+
+    header {
+      grid-area: header;
+    }
+
+    onemrva-layout-left-sidenav {
+      grid-area: left-sidenav;
+      border-right: 1px solid var(--mat-sys-outline-variant);
+
+      @media screen and (max-width: 640px) {
+        display: none;
+      }
+    }
+
+    #language-trigger {
+      display: flex;
+
+      &__child {
+        border: 1px solid var(--mat-sys-outline-variant);
+        border-radius: 500px;
+      }
+
+      &:hover {
+        background: transparent;
+      }
+
+      img {
+        width: 22px;
+        height: 26px;
+      }
+    }
+
+    main {
+      display: block;
+      grid-area: main;
+      position: relative;
+      width: 100%;
+      overflow-y: auto;
+      max-height: calc(100vh - var(--layout-header-height));
+      max-width: calc(100vw - 240px);
+
+      & > .notification {
+        z-index: 999;
+        position: sticky;
+        top: 0;
+      }
+
+      & > section {
+        width: 95%;
+        max-width: 1400px;
+        margin-left: auto;
+        margin-right: auto;
+        min-height: calc(100vh - var(--layout-header-height));
+      }
+    }
+
+    &.no-sidenav {
+      grid-template-columns: 1fr;
+      grid-template-areas:
+        'header'
+        'main';
+
+      main {
+        max-width: 100vw;
+      }
+    }
+  }
+
   mat-drawer {
+    max-height: 100vh;
+    overflow: hidden;
+
     &:not(.side-menu) {
       padding: var(--double-spacer);
       background: var(--mat-sys-surface-container-high);
@@ -144,21 +227,6 @@
   }
 }
 
-.mat-mdc-menu-content {
-  button {
-    &.active > * {
-      font-weight: bold !important;
-    }
-    mat-icon {
-      font-size: 1.125rem !important;
-      height: 1.125rem;
-      width: 1.125rem;
-    }
-    span {
-      font-size: 14px !important;
-    }
-  }
-}
 nav a.disabled {
   pointer-events: none;
 }

package/layout/src/components/layout-left-sidenav/layout-left-sidenav.component.scss

@@ -1,10 +1,5 @@
 :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;
+  display: flex;
+  overflow-y: hidden;
+  max-height: calc(100vh - var(--layout-header-height));
 }

package/layout/src/components/layout-route/layout-route.component.scss

@@ -0,0 +1,4 @@
+.subroutes-menu-trigger {
+  display: flex;
+  align-items: center;
+}

package/layout/src/components/layout-sidenav/layout-sidenav.component.scss

@@ -1,10 +1,10 @@
 :host {
-  min-width: 250px;
   .close-button {
     display: flex;
     justify-content: flex-end;
     padding: var(--spacer);
   }
+
   .mobile-menu-item {
     display: flex;
     width: 100%;
@@ -24,6 +24,7 @@
       margin-left: 4px;
     }
   }
+
   .sidebar {
     overflow: scroll;
     display: flex;

package/mat-navigation/src/mat-navigation-tree/onemrva-mat-navigation-tree.component.scss

@@ -1,3 +1,5 @@
 :host {
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }

package/mat-navigation/src/onemrva-mat-navigation.component.scss

@@ -1,10 +1,14 @@
 onemrva-mat-navigation {
-  min-width: 250px;
-  border-right: 1px solid var(--mat-sys-outline-variant);
   display: flex;
+  width: 100%;
+  max-height: calc(100vh - var(--layout-header-height));
+  overflow-y: auto;
+  padding: var(--double-spacer) 0;
+
   .mat-expansion-panel-body {
     padding: 0;
   }
+
   .mobile-menu-item {
     display: flex;
     width: 100%;

package/mat-notification/src/onemrva-mat-notification.component.scss

@@ -1,18 +1,13 @@
 :host {
-  position: fixed;
-  top: var(--layout-header-height, 0);
-  left: 0;
-  right: 0;
-  transition: max-height 400ms ease-out;
-  max-height: 100vh;
-  overflow: hidden;
-  z-index: 401;
-  background-color: var(--mat-sys-primary-container);
-  color: var(--mat-sys-on-primary-container);
-  border-bottom: 1px solid var(--mat-sys-primary);
-
   .onemrva-mat-notification {
-    position: relative;
+    transition: max-height 400ms ease-out;
+    max-height: 100vh;
+    z-index: 401;
+
+    background-color: var(--mat-sys-primary-container);
+    color: var(--mat-sys-on-primary-container);
+    border-bottom: 1px solid var(--mat-sys-primary);
+
     .onemrva-mat-notification-content {
       font: var(--mat-sys-body-medium);
       padding: var(--double-spacer) var(--spacer) var(--double-spacer)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "20.11.0-develop.1",
+  "version": "20.11.0-develop.3",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"