@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

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

@@ -1,104 +0,0 @@
-<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)"
-            [attr.data-cy]="e.dataCy"
-          >
-            {{ e.label }}
-            <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)"
-                [attr.data-cy]="es.dataCy"
-              >
-                <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"
-                    [attr.data-cy]="ess.dataCy"
-                  >
-                    &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/layout/src/components/layout-sidenav/layout-sidenav.component.ts

@@ -1,88 +0,0 @@
-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 { Observable, map, startWith } from 'rxjs';
-import { OnemrvaDrawerService } from '../../services/drawer.service';
-import {
-  animate,
-  state,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-import { OnemRvaLanguage } from '../../models/onem-language.model';
-
-@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/layout/src/components/layout-sidenav-title/layout-sidenav-title.component.ts

@@ -1,9 +0,0 @@
-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/layout/src/components/layout-subroute/layout-subroute.component.html

@@ -1,43 +0,0 @@
-<!--
-// 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>

package/layout/src/components/layout-subroute/layout-subroute.component.spec.ts

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

package/layout/src/components/layout-subroute/layout-subroute.component.ts

@@ -1,62 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  Input,
-  QueryList,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
-
-@Component({
-  selector: 'onemrva-layout-subroute',
-  templateUrl: 'layout-subroute.component.html',
-})
-export class LayoutSubrouteComponent implements AfterViewInit {
-  @Input() customNgClass: any;
-
-  @ViewChild(TemplateRef) template?: TemplateRef<any>;
-
-  @Input() routerLink: typeof RouterLink.prototype.routerLink | string;
-  @Input() routerLinkActiveOptions?: any;
-  @Input() dataCy?: string;
-
-  @ContentChildren(LayoutSubrouteComponent)
-  subroutes?: QueryList<LayoutSubrouteComponent>;
-
-  constructor(
-    private cd: ChangeDetectorRef,
-    private router: Router,
-  ) {}
-
-  ngAfterViewInit() {
-    this.cd.detectChanges();
-  }
-
-  hasSubroutes() {
-    return this.subroutes !== undefined && this.subroutes.length > 0;
-  }
-
-  hasActiveSubroute() {
-    return this.subroutes?.some(x => this.isActiveRoute(x)) ?? false;
-  }
-
-  private isActiveRoute(subroute: LayoutSubrouteComponent): boolean {
-    if (subroute.routerLink) {
-      const routerLink = Array.isArray(subroute.routerLink)
-        ? this.router.createUrlTree(subroute.routerLink)
-        : subroute.routerLink;
-
-      return this.router.isActive(routerLink, {
-        paths: 'exact',
-        queryParams: 'exact',
-        fragment: 'ignored',
-        matrixParams: 'ignored',
-      });
-    } else {
-      return false;
-    }
-  }
-}

package/layout/src/components/layout-title/layout-title.component.spec.ts

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

package/layout/src/components/layout-title/layout-title.component.ts

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

package/layout/src/decorators/coerce-boolean-input.decorator.ts

@@ -1,19 +0,0 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-
-export function CoerceBooleanInput(defaultValue: boolean) {
-  return (target: any, propertyKey: string | symbol) => {
-    Object.defineProperty(target, propertyKey, {
-      get() {
-        return this[propertyKey.toString() + '__underlying_field'];
-      },
-      set(newValue: any) {
-        const v =
-          newValue === '' || newValue === null || newValue === undefined
-            ? defaultValue
-            : coerceBooleanProperty(newValue);
-
-        this[propertyKey.toString() + '__underlying_field'] = v;
-      },
-    });
-  };
-}

package/layout/src/decorators/observable-content.decorator.ts

@@ -1,13 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-
-export function ObservableContent() {
-  return (target: any, propertyKey: string) => {
-    const value = new BehaviorSubject(undefined);
-    Object.defineProperty(target, propertyKey, {
-      get: () => value,
-      set: (v: any) => {
-        value.next(v);
-      },
-    });
-  };
-}

package/layout/src/directives/drawer-host.directive.ts

@@ -1,42 +0,0 @@
-// Command to generate ng g d <Directive name>
-
-import {
-  AfterViewInit,
-  DestroyRef,
-  Directive,
-  inject,
-  Inject,
-  ViewContainerRef,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DOCUMENT } from '@angular/common';
-import { MatDrawer } from '@angular/material/sidenav';
-
-@Directive({
-  selector: '[drawerhost]',
-})
-export class DrawerHostDirective implements AfterViewInit {
-  private destroyRef = inject(DestroyRef);
-
-  constructor(
-    private drawer: MatDrawer,
-    public viewContainerRef: ViewContainerRef,
-    @Inject(DOCUMENT) private document: Document,
-  ) {}
-
-  private bodyClass() {
-    if (this.drawer?.opened) {
-      this.document.body.style.overflow = 'hidden';
-    } else {
-      this.document.body.style.overflow = 'inherit';
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.drawer?.openedChange
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => {
-        this.bodyClass();
-      });
-  }
-}

package/layout/src/enums/environment.enum.ts

@@ -1,6 +0,0 @@
-export enum Environment {
-  LOCAL = 'LOCAL',
-  TEST = 'TEST',
-  VAL = 'VAL',
-  PROD = 'PROD',
-}

package/layout/src/layout.module.ts

@@ -1,47 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LayoutModule } from '@angular/cdk/layout';
-import { RouterModule } from '@angular/router';
-
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-
-import { components } from './components';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { DrawerHostDirective } from './directives/drawer-host.directive';
-import { StripHtmlPipe } from './striphtml.pipe';
-import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
-import { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';
-
-@NgModule({
-  declarations: [...components, DrawerHostDirective, StripHtmlPipe],
-  imports: [
-    CommonModule,
-    RouterModule,
-    LayoutModule,
-    MatToolbarModule,
-    MatDividerModule,
-    MatSidenavModule,
-    MatTabsModule,
-    MatButtonModule,
-    MatMenuModule,
-    MatIconModule,
-    OnemrvaMatAvatarModule,
-    MatTooltipModule,
-    TranslateModule,
-  ],
-  exports: [...components, LayoutModule],
-  providers: [
-    {
-      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
-      useValue: { horizontalPosition: 'right' },
-    },
-  ],
-})
-export class OnemrvaLayoutModule {}

package/layout/src/models/onem-language.model.ts

@@ -1,4 +0,0 @@
-export interface OnemRvaLanguage {
-  code: string;
-  label: string;
-}

package/layout/src/models/onemrva-profile.model.ts

@@ -1,57 +0,0 @@
-export class OnemRvaProfile {
-  private _isLoggedIn: boolean = false;
-  private _firstName: string = '';
-  private _lastName: string = '';
-
-  public constructor();
-  public constructor(firstName: string, lastName: string);
-
-  public constructor(...args: any[]) {
-    if (args.length === 2) {
-      this._firstName = args[0];
-      this._lastName = args[1];
-      this._isLoggedIn = true;
-    }
-  }
-
-  initials(): string {
-    if (this._firstName === '' || this._lastName === '') return '';
-    return `${this._firstName.slice(0, 1)}${this._lastName.slice(0, 1)}`;
-  }
-
-  get firstName(): string {
-    return this._firstName;
-  }
-
-  set firstName(value: string) {
-    this._firstName = value;
-  }
-
-  get lastName(): string {
-    return this._lastName;
-  }
-
-  set lastName(value: string) {
-    this._lastName = value;
-  }
-
-  get isLoggedIn(): boolean {
-    return this._isLoggedIn;
-  }
-
-  set isLoggedIn(value: boolean) {
-    this._isLoggedIn = value;
-  }
-
-  login(firstName: string, lastName: string) {
-    this._firstName = firstName;
-    this._lastName = lastName;
-    this._isLoggedIn = true;
-  }
-
-  logout() {
-    this._firstName = '';
-    this._lastName = '';
-    this._isLoggedIn = false;
-  }
-}

package/layout/src/services/drawer.service.ts

@@ -1,30 +0,0 @@
-import { Injectable } from '@angular/core';
-import { DrawerHostDirective } from '../directives/drawer-host.directive';
-import { MatDrawer } from '@angular/material/sidenav';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class OnemrvaDrawerService {
-  public host?: DrawerHostDirective;
-  drawer?: MatDrawer;
-
-  hasBackdrop = false;
-
-  constructor() {}
-
-  toggle() {
-    if (!this.drawer) return;
-    this.drawer?.toggle();
-  }
-
-  open() {
-    if (!this.drawer) return;
-    this.drawer?.open();
-  }
-
-  close() {
-    if (!this.drawer) return;
-    this.drawer?.close();
-  }
-}

package/layout/src/striphtml.pipe.ts

@@ -1,10 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'striphtml',
-})
-export class StripHtmlPipe implements PipeTransform {
-  transform(value: string): any {
-    return value.replace(/<.*?>/g, ''); // replace tags
-  }
-}

package/layout/src/test.ts

@@ -1,31 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp,
-  ): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/mat-avatar/index.ts

@@ -1,2 +0,0 @@
-export * from './src/onemrva-mat-avatar.module';
-export * from './src/onemrva-mat-avatar.component';

package/mat-avatar/ng-package.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
-  "lib": {
-    "entryFile": "index.ts"
-  }
-}