@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/layout/src/components/layout/layout.component.ts

@@ -0,0 +1,187 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  Input,
+  AfterViewInit,
+  OnDestroy,
+  QueryList,
+  OnInit,
+  Inject,
+  isDevMode,
+  EventEmitter,
+  Output,
+  ViewChild,
+  ElementRef,
+} from '@angular/core';
+import { LayoutRouteComponent } from '../layout-route/layout-route.component';
+import { TranslateService } from '@ngx-translate/core';
+import { LayoutContentComponent } from '../layout-content/layout-content.component';
+import { Subject, takeUntil } from 'rxjs';
+import { LayoutTitleComponent } from '../layout-title/layout-title.component';
+
+import { CoerceBooleanInput } from '../../decorators/coerce-boolean-input.decorator';
+
+import { OnemRvaLanguage } from '../../models/onem-language.model';
+import { Environment } from '../../enums/environment.enum';
+import {
+  BreakpointObserver,
+  Breakpoints,
+  BreakpointState,
+} from '@angular/cdk/layout';
+import { DOCUMENT } from '@angular/common';
+import { LayoutFooterComponent } from '../layout-footer/layout-footer.component';
+import { OnemRvaProfile } from '../../models/onemrva-profile.model';
+import { LayoutLoginMenuComponent } from '../layout-login-menu/layout-login-menu.component';
+import { MatDrawer } from '@angular/material/sidenav';
+import { DrawerHostDirective } from '../../directives/drawer-host.directive';
+import { OnemrvaDrawerService } from '../../services/drawer.service';
+import { LayoutSidenavComponent } from '../layout-sidenav/layout-sidenav.component';
+
+@Component({
+  selector: 'onemrva-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss'],
+})
+export class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ContentChildren(LayoutRouteComponent)
+  routes?: QueryList<LayoutRouteComponent>;
+
+  @ContentChild(LayoutTitleComponent) title?: LayoutTitleComponent;
+  @ContentChild(LayoutLoginMenuComponent) loginMenu?: LayoutLoginMenuComponent;
+  @ContentChild(LayoutContentComponent) content?: LayoutContentComponent;
+
+  @ContentChild(LayoutFooterComponent)
+  footer?: LayoutFooterComponent;
+
+  @Input()
+  @CoerceBooleanInput(true)
+  fluid: any = false;
+
+  @Input()
+  logo: string = ''; // custom logo, empty string will show default onem/rva/neo/lfa localised logo
+
+  @Input()
+  languages: OnemRvaLanguage[] = []; // list of languages
+
+  @Input()
+  environment?: Environment; // possible environment to show on the frontend LOCAL, TEST, VAL, PROD
+
+  @Input()
+  logoRedictionUrl?: string | any[] | null = ''; // value for routerLink from logo. "" by default. Deactivated when set to null
+
+  selectedIndex = 0;
+  destroyNotifier$: Subject<void> = new Subject();
+
+  @Input()
+  profile: OnemRvaProfile | null = null; // To be defined for application with authentication
+
+  @Output()
+  login: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  logout: EventEmitter<void> = new EventEmitter<void>();
+  //    isLogoutUsed: boolean = false;
+
+  env = Environment;
+
+  isSmall = true;
+
+  @ViewChild(MatDrawer, { static: true }) drawer!: MatDrawer;
+  @ViewChild(DrawerHostDirective, { static: true })
+  drawerHost!: DrawerHostDirective;
+
+  @Input()
+  id: string = 'main';
+
+  @Input()
+  role: string = 'main';
+
+  constructor(
+    public translateService: TranslateService,
+    private cd: ChangeDetectorRef,
+    public breakpointObserver: BreakpointObserver,
+    @Inject(DOCUMENT) private document: Document,
+    public drawerService: OnemrvaDrawerService
+  ) {
+    //      this.isLogoutUsed = this.logout.observers.length > 0;
+  }
+
+  ngOnInit() {
+    this.selectedIndex = this.languages.findIndex(
+      (l) => l.code === this.translateService.currentLang
+    );
+
+    this.document.documentElement.lang = this.translateService.currentLang;
+
+    this.breakpointObserver
+      .observe([Breakpoints.XSmall, Breakpoints.Small])
+      .pipe(takeUntil(this.destroyNotifier$))
+      .subscribe((state: BreakpointState) => {
+        if (state.matches) {
+          this.isSmall = true;
+        } else {
+          this.drawerService.close();
+          this.isSmall = false;
+        }
+      });
+
+    if (this.logo === '') {
+      this.logo = `/assets/logo_${this.translateService.currentLang}.svg`;
+      this.translateService.onLangChange
+        .pipe(takeUntil(this.destroyNotifier$))
+        .subscribe((lang) => {
+          this.logo = `/assets/logo_${lang.lang}.svg`;
+        });
+    }
+    this.translateService.onLangChange
+      .pipe(takeUntil(this.destroyNotifier$))
+      .subscribe((event) => {
+        this.selectedIndex = this.languages.findIndex(
+          (lang) => lang.code === event.lang
+        );
+      });
+
+    this.drawerService.host = this.drawerHost;
+    this.drawerService.drawer = this.drawer;
+  }
+
+  ngAfterViewInit() {
+    if (isDevMode()) {
+      this.cd.detectChanges();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyNotifier$.next();
+    this.destroyNotifier$.complete();
+  }
+
+  doLogout() {
+    this.logout.next();
+  }
+
+  doLogin() {
+    this.login.next();
+  }
+
+  changeLanguage(index: number) {
+    const language = this.languages[index];
+    this.translateService.use(language.code);
+    this.document.documentElement.lang = language.code;
+  }
+
+  toggleSideNav() {
+    this.drawerHost.viewContainerRef.clear();
+    const componentRef = this.drawerHost.viewContainerRef.createComponent(
+      LayoutSidenavComponent
+    );
+    componentRef.instance.isSmall = this.isSmall;
+    componentRef.instance.languages = this.languages;
+    componentRef.instance.routes = this.routes;
+    this.drawerService.hasBackdrop = false;
+
+    this.drawer.open();
+  }
+}

package/projects/onemrva/design-system/layout/src/components/layout-content/layout-content.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutContentComponent } from './layout-content.component';
+
+describe('LayoutContentComponent', () => {
+    let component: LayoutContentComponent;
+    let fixture: ComponentFixture<LayoutContentComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [LayoutContentComponent],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LayoutContentComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/projects/onemrva/design-system/layout/src/components/layout-content/layout-content.component.ts

@@ -0,0 +1,23 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'onemrva-layout-content',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class LayoutContentComponent {
+  @Input() customNgClass: any;
+
+  @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+}

package/projects/onemrva/design-system/layout/src/components/layout-footer/layout-footer.component.ts

@@ -0,0 +1,11 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'onemrva-layout-footer',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class LayoutFooterComponent {
+  @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+  constructor() {}
+}

package/projects/onemrva/design-system/layout/src/components/layout-login-menu/layout-login-menu.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutLoginMenuComponent } from './layout-login-menu.component';
+
+describe('LayoutLoginMenuComponent', () => {
+  let component: LayoutLoginMenuComponent;
+  let fixture: ComponentFixture<LayoutLoginMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LayoutLoginMenuComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutLoginMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/onemrva/design-system/layout/src/components/layout-login-menu/layout-login-menu.component.ts

@@ -0,0 +1,17 @@
+import {AfterViewInit, ChangeDetectorRef, Component, Input, TemplateRef, ViewChild} from '@angular/core';
+
+@Component({
+    selector: 'onemrva-layout-login-menu',
+    template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class LayoutLoginMenuComponent implements AfterViewInit {
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+    constructor(private cd: ChangeDetectorRef) {}
+
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
+}

package/projects/onemrva/design-system/layout/src/components/layout-route/layout-route.component.html

@@ -0,0 +1,57 @@
+
+<ng-template #navTpl>
+  <ng-container  *ngIf="!hasSubroutes()">
+    <ng-container *ngTemplateOutlet="contentTmpl"></ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="hasSubroutes()">
+    <span
+      [matMenuTriggerFor]="menu">
+      {{ label }}
+    </span>
+    <mat-icon
+      [matMenuTriggerFor]="menu" style="width: 16px;">expand_more</mat-icon>
+    <mat-menu #menu>
+      <ng-container *ngFor="let e of subroutes?.toArray(); let i = index">
+        <ng-container *ngIf="!e.hasSubroutes()">
+          <button mat-menu-item
+                  [routerLink]="e.routerLink"
+                  routerLinkActive="active">
+            <ng-container *ngIf="e.template as routeTemplate">
+              <ng-container *ngTemplateOutlet="routeTemplate"></ng-container>
+            </ng-container>
+          </button>
+        </ng-container>
+        <ng-container *ngIf="e.hasSubroutes()">
+          <button  mat-menu-item
+                   [matMenuTriggerFor]="submenu">
+            <ng-container *ngIf="e.template as routeTemplate">
+              <ng-container *ngTemplateOutlet="routeTemplate"></ng-container>
+            </ng-container>
+          </button>
+          <mat-menu #submenu>
+            <ng-container *ngFor="let es of e.subroutes?.toArray(); let i = index">
+              <button mat-menu-item
+                      [routerLink]="es.routerLink"
+                      routerLinkActive="active">
+                <ng-container *ngIf="es.template as routeTemplate">
+                  <ng-container *ngTemplateOutlet="routeTemplate">
+
+                  </ng-container>
+                </ng-container>
+              </button>
+            </ng-container>
+          </mat-menu>
+        </ng-container>
+      </ng-container>
+    </mat-menu>
+  </ng-container>
+</ng-template>
+
+<ng-template #navMblTpl>
+  <ng-container *ngTemplateOutlet="contentTmpl"></ng-container>
+</ng-template>
+
+<ng-template #contentTmpl>
+  <ng-content></ng-content>
+</ng-template>

package/projects/onemrva/design-system/layout/src/components/layout-route/layout-route.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutRouteComponent } from './layout-route.component';
+
+describe('LayoutRouteComponent', () => {
+    let component: LayoutRouteComponent;
+    let fixture: ComponentFixture<LayoutRouteComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [LayoutRouteComponent],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LayoutRouteComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/projects/onemrva/design-system/layout/src/components/layout-route/layout-route.component.ts

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectorRef,
+  Component, ContentChildren,
+  Input, QueryList,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import {Router, RouterLink} from '@angular/router';
+import {LayoutSubrouteComponent} from "../layout-subroute/layout-subroute.component";
+
+@Component({
+  selector: 'onemrva-layout-route',
+  templateUrl: 'layout-route.component.html'
+})
+export class LayoutRouteComponent {
+  @Input() customNgClass: any;
+
+  @ViewChild('navTpl') template: TemplateRef<any> | null = null;
+  @ViewChild('navMblTpl') mobileTemplate: TemplateRef<any> | null = null;
+  @ViewChild('contentTpl') contentTemplate: TemplateRef<any> | null = null;
+
+  @Input() routerLink: typeof RouterLink.prototype.routerLink;
+  @Input() routerLinkActiveOptions?: any;
+  @Input() dataCy?: string;
+  @Input() baseRouteForActiveMenu?: string;
+  @Input() label?: string;
+
+  @ContentChildren(LayoutSubrouteComponent)
+  subroutes?: QueryList<LayoutSubrouteComponent>;
+
+  hasSubroutes() {
+    return this.subroutes !== undefined && this.subroutes.length > 0;
+  }
+  constructor(
+    private cd: ChangeDetectorRef,
+    private router: Router
+  ) {
+  }
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+
+  isRouteActive() {
+    if (
+      this.routerLink === null ||
+      this.routerLink === undefined ) {
+      if (this.baseRouteForActiveMenu) {
+        const split_route = this.router.url.split('/');
+        const split_menu_route = this.baseRouteForActiveMenu.split('/');
+        return  split_route[1] === split_menu_route[1];
+      }
+    }
+    return false;
+  }
+}

package/projects/onemrva/design-system/layout/src/components/layout-sidenav/layout-sidenav.component.html

@@ -0,0 +1,104 @@
+<ng-container
+  *ngIf="
+    isSmall &&
+    (routes?.toArray()?.length || (languages && languages.length > 1))
+  "
+>
+  <button
+    type="button"
+    mat-icon-button
+    class="menu-close-button"
+    (click)="close()"
+    data-cy="smallDeviceMenu"
+    attr.aria-label="{{ 'layout.menu' | translate }}"
+  >
+    <mat-icon>close</mat-icon>
+  </button>
+  <ng-container *ngIf="isSmall && languages && languages.length > 1">
+    <mat-tab-group
+      class="language-tabs"
+      [selectedIndex]="selectedLanguageIndex$ | async"
+      (selectedIndexChange)="changeLanguage($event)"
+    >
+      <mat-tab *ngFor="let lang of languages">
+        <div *matTabLabel [attr.data-cy]="'language_' + lang.code">
+          {{ lang.label }}
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </ng-container>
+  <ng-container *ngIf="isSmall && routes?.toArray()?.length">
+    <mat-divider
+      style="align-self: stretch; margin-bottom: 10px"
+      *ngIf="languages && languages.length > 1"
+    ></mat-divider>
+    <div>
+      <ng-container *ngFor="let e of routes?.toArray(); let i = index">
+        <ng-container *ngIf="!e.hasSubroutes()">
+          <button
+            [routerLink]="e.routerLink"
+            [routerLinkActiveOptions]="{ exact: true }"
+            routerLinkActive="active"
+            class="mobile-menu-item"
+          >
+            <ng-container *ngIf="e.mobileTemplate as routeTemplate">
+              <ng-container *ngTemplateOutlet="routeTemplate"></ng-container>
+            </ng-container>
+          </button>
+        </ng-container>
+        <ng-container *ngIf="e.hasSubroutes()">
+          <button
+            [routerLink]="e.routerLink"
+            [routerLinkActiveOptions]="{ exact: false }"
+            routerLinkActive="active"
+            class="mobile-menu-item"
+            (click)="openSubmenu(i)"
+          >
+            <ng-container *ngIf="e.mobileTemplate as routeTemplate">
+              <ng-container *ngTemplateOutlet="routeTemplate"></ng-container>
+            </ng-container>
+            <mat-icon>expand_more</mat-icon>
+          </button>
+          <div [@slideInOut]="helpMenuOpen[i][0]">
+            <ng-container
+              *ngFor="let es of e.subroutes?.toArray(); let j = index"
+            >
+              <button
+                [routerLink]="es.routerLink"
+                [routerLinkActiveOptions]="{ exact: true }"
+                routerLinkActive="active"
+                class="mobile-menu-item"
+                (click)="openSubmenu(i, j + 1)"
+              >
+                &nbsp;&nbsp;&nbsp;
+                <ng-container *ngIf="es.template as routeTemplate">
+                  <ng-container
+                    *ngTemplateOutlet="routeTemplate"
+                  ></ng-container>
+                </ng-container>
+                <mat-icon *ngIf="es.hasSubroutes()">expand_more</mat-icon>
+              </button>
+              <div [@slideInOut]="helpMenuOpen[i][j + 1]">
+                <ng-container *ngFor="let ess of es.subroutes?.toArray()">
+                  <button
+                    [routerLink]="ess.routerLink"
+                    [routerLinkActiveOptions]="{ exact: false }"
+                    routerLinkActive="active"
+                    class="mobile-menu-item"
+                  >
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <ng-container *ngIf="ess.template as routeTemplate">
+                      <ng-container
+                        *ngTemplateOutlet="routeTemplate"
+                      ></ng-container>
+                    </ng-container>
+                  </button>
+                </ng-container>
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+      </ng-container>
+    </div>
+  </ng-container>
+</ng-container>

package/projects/onemrva/design-system/layout/src/components/layout-sidenav/layout-sidenav.component.ts

@@ -0,0 +1,88 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, Input, OnInit, QueryList } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { LayoutRouteComponent } from '../layout-route/layout-route.component';
+import { OnemRvaLanguage } from '../../models/onem-language.model';
+import { Observable, map, startWith } from 'rxjs';
+import { OnemrvaDrawerService } from '../../services/drawer.service';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+@Component({
+  selector: 'onemrva-layout-sidenav',
+  templateUrl: 'layout-sidenav.component.html',
+  animations: [
+    trigger('slideInOut', [
+      state(
+        'in',
+        style({
+          overflow: 'hidden',
+          height: '*',
+        })
+      ),
+      state(
+        'out',
+        style({
+          opacity: '0',
+          overflow: 'hidden',
+          height: '0px',
+        })
+      ),
+      transition('in => out', animate('400ms ease-in-out')),
+      transition('out => in', animate('400ms ease-in-out')),
+    ]),
+  ],
+})
+export class LayoutSidenavComponent implements OnInit {
+  @Input() isSmall!: boolean;
+  @Input() languages!: OnemRvaLanguage[];
+  @Input() routes?: QueryList<LayoutRouteComponent>;
+
+  selectedLanguageIndex$: Observable<number>;
+
+  helpMenuOpen!: string[][];
+
+  constructor(
+    private translateService: TranslateService,
+    @Inject(DOCUMENT) private document: Document,
+    private drawerService: OnemrvaDrawerService
+  ) {
+    this.selectedLanguageIndex$ = this.translateService.onLangChange.pipe(
+      startWith(null),
+      map(() =>
+        this.languages.findIndex(
+          (l) => l.code === this.translateService.currentLang
+        )
+      )
+    );
+  }
+
+  ngOnInit() {
+    if (!!this.routes)
+      this.helpMenuOpen = this.routes.map((route) =>
+        route.hasSubroutes()
+          ? ['out', ...route.subroutes!.map(() => 'out')]
+          : ['in']
+      );
+  }
+
+  changeLanguage(index: number) {
+    const language = this.languages[index];
+    this.translateService.use(language.code);
+    this.document.documentElement.lang = language.code;
+  }
+
+  close() {
+    this.drawerService.close();
+  }
+
+  openSubmenu(index: number, subIdx: number = 0) {
+    this.helpMenuOpen[index][subIdx] =
+      this.helpMenuOpen[index][subIdx] === 'out' ? 'in' : 'out';
+  }
+}

package/projects/onemrva/design-system/layout/src/components/layout-sidenav-title/layout-sidenav-title.component.ts

@@ -0,0 +1,9 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'onemrva-layout-sidenav-title',
+  template: ` <ng-template><ng-content></ng-content></ng-template> `,
+})
+export class LayoutSidenavTitleComponent {
+  @ViewChild(TemplateRef) template?: TemplateRef<any>;
+}

package/projects/onemrva/design-system/layout/src/components/layout-subroute/layout-subroute.component.html

@@ -0,0 +1,44 @@
+<!--
+// This does not seem to work for sub menus as they how the sub menu only on click instead of on hover
+<ng-template #navTpl>
+  <ng-container *ngIf="!hasSubroutes()">
+    <button mat-menu-item
+            [routerLink]="routerLink"
+            routerLinkActive="active">
+      <ng-container *ngIf="template as routeTemplate">
+
+        <ng-container *ngTemplateOutlet="contentTmpl"></ng-container>
+      </ng-container>
+    </button>
+  </ng-container>
+
+  <ng-container *ngIf="hasSubroutes()">
+    <button  mat-menu-item
+      [matMenuTriggerFor]="submenu">
+    <ng-container *ngTemplateOutlet="contentTmpl"></ng-container>
+    </button>
+    <mat-menu #submenu>
+      <ng-container *ngFor="let e of subroutes?.toArray(); let i = index">
+        <button mat-menu-item
+                [routerLink]="e.routerLink"
+                routerLinkActive="active">
+          <ng-container *ngIf="e.template as routeTemplate">
+            <ng-container *ngTemplateOutlet="routeTemplate">
+
+            </ng-container>
+          </ng-container>
+        </button>
+      </ng-container>
+    </mat-menu>
+  </ng-container>
+
+  <ng-template #contentTmpl>
+    <ng-content></ng-content>
+  </ng-template>
+
+</ng-template>-->
+
+
+  <ng-template>
+    <ng-content></ng-content>
+  </ng-template>