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

package/core/src/lib/core.module.ts

@@ -1,26 +0,0 @@
-import { ErrorHandler, NgModule } from '@angular/core';
-
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatIconModule } from '@angular/material/icon';
-import {
-  MatSnackBarModule,
-  MAT_SNACK_BAR_DEFAULT_OPTIONS,
-} from '@angular/material/snack-bar';
-import { OnemrvaErrorHandler } from './services';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  imports: [CommonModule, MatExpansionModule, MatIconModule, MatSnackBarModule],
-  exports: [MatSnackBarModule],
-  providers: [
-    {
-      provide: ErrorHandler,
-      useClass: OnemrvaErrorHandler,
-    },
-    {
-      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
-      useValue: { horizontalPosition: 'right' },
-    },
-  ],
-})
-export class OnemrvaCoreModule {}

package/core/src/lib/modules/index.ts

@@ -1 +0,0 @@
-//export * from "./translate.module";

package/core/src/lib/modules/translate.loader.ts

@@ -1,34 +0,0 @@
-// import {Injectable} from "@angular/core";
-// import {TranslateLoader} from "@ngx-translate/core";
-// import {HttpClient} from "@angular/common/http";
-// import {forkJoin, Observable, of} from "rxjs";
-// import {catchError, map} from "rxjs/operators";
-//
-// @Injectable()
-// export class OnemrvaTranslateHttpLoader implements TranslateLoader {
-//
-//     constructor(
-//         private http: HttpClient,
-//     ) {
-//
-//     }
-//
-//     /**
-//      * Gets the translations from the server
-//      */
-//     public getTranslation(lang: string): Observable<Object> {
-//
-//         const observables = [
-//             this.http.get(`${environment.translate.prefix}${lang}${environment.translate.suffix}`).pipe(catchError(() => of(null))),
-//             ...environment.translate.modules.map((m) =>
-//                 this.http.get(`${environment.translate.prefix}${m}/${lang}${environment.translate.suffix}`).pipe(catchError(() => of(null)))
-//             ),
-//         ];
-//
-//         return forkJoin(observables).pipe(
-//             map((all) => {
-//                 return (all.filter((v) => !!v) as Object[]).reduce((s, c) => ({ ...s, ...c }), {});
-//             })
-//         );
-//     }
-// }

package/core/src/lib/modules/translate.module.ts

@@ -1,66 +0,0 @@
-// import { HttpClient } from '@angular/common/http';
-// import {APP_INITIALIZER, NgModule} from '@angular/core';
-// import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-// import { environment } from "@env/environment";
-// import {OnemrvaTranslateHttpLoader} from "./translate.loader";
-//
-// @NgModule({
-//     imports: [
-//         TranslateModule.forRoot({
-//             defaultLanguage: environment.translate.language,
-//             loader: {
-//                 provide: TranslateLoader,
-//                 useFactory: (http: HttpClient) => {
-//                     return new OnemrvaTranslateHttpLoader(http);
-//                 },
-//                 deps: [HttpClient],
-//             },
-//         }),
-//     ],
-//     providers: [
-//         {
-//             provide: APP_INITIALIZER,
-//             deps: [TranslateService],
-//             useFactory: (translateService: TranslateService ) => {
-//                 return async () => {
-//                     const languages = environment.translate.languages.map(v => v.code);
-//                     translateService.addLangs(languages);
-//                     translateService.setDefaultLang(environment.translate.language);
-//
-//                     // getting language from localstorage
-//                     let language:string|null = localStorage.getItem('language');
-//                     // not set or incorrectly set ?
-//                     if (language === null || languages.indexOf(language) < 0) {
-//                         // getting language from browser
-//                         if (languages.indexOf(navigator.language) >= 0 ) {
-//                             language = navigator.language;
-//                         } else {
-//                             // getting language from one of the browser's languages
-//                             for (let lng of navigator.languages) {
-//                                 if (languages.indexOf(lng) >= 0 ) {
-//                                     language = lng;
-//                                     break;
-//                                 }
-//                             }
-//                             // getting default language
-//                             if (language === null || languages.indexOf(language) < 0) {
-//                                 language = environment.translate.language;
-//                             }
-//                         }
-//                     }
-//                     localStorage.setItem('language', language);
-//                     await translateService.use(language).toPromise();
-//
-//                     translateService.onLangChange.subscribe((value) => {
-//                         localStorage.setItem('language', value.lang);
-//                     });
-//                 };
-//             },
-//             multi: true,
-//         }
-//     ],
-//     exports: [
-//         TranslateModule
-//     ]
-// })
-// export class OnemrvaTranslateModule { }

package/core/src/lib/services/index.ts

@@ -1,2 +0,0 @@
-export * from './onemrva-error-handler.service';
-export * from './onemrva-missing-translation.service';

package/core/src/lib/services/onemrva-error-handler.service.ts

@@ -1,24 +0,0 @@
-import { ErrorHandler, Injectable } from '@angular/core';
-import {
-  MatSnackBar,
-  MatSnackBarHorizontalPosition,
-  MatSnackBarVerticalPosition,
-} from '@angular/material/snack-bar';
-
-@Injectable()
-export class OnemrvaErrorHandler implements ErrorHandler {
-  constructor(private _snackBar: MatSnackBar) {}
-  horizontalPosition: MatSnackBarHorizontalPosition = 'end';
-  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
-
-  handleError(error: any) {
-    console.error(error);
-    //alert("Error: " + error.message);
-    this._snackBar.open(`Error: ${error.message}`, '', {
-      duration: 5000,
-      panelClass: 'mat-primary',
-      horizontalPosition: this.horizontalPosition,
-      verticalPosition: this.verticalPosition,
-    });
-  }
-}

package/core/src/lib/services/onemrva-missing-translation.service.ts

@@ -1,12 +0,0 @@
-import {
-  MissingTranslationHandler,
-  MissingTranslationHandlerParams,
-} from '@ngx-translate/core';
-
-export class OnemrvaMissingTranslationHandler
-  implements MissingTranslationHandler
-{
-  handle(params: MissingTranslationHandlerParams) {
-    return `???${params.key}???`;
-  }
-}

package/core/src/test.ts

@@ -1,30 +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,
-  ): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// 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/layout/index.ts

@@ -1,7 +0,0 @@
-export * from './src/components';
-export * from './src/directives/drawer-host.directive';
-export * from './src/enums/environment.enum';
-export * from './src/models/onem-language.model';
-export * from './src/models/onemrva-profile.model';
-export * from './src/services/drawer.service';
-export * from './src/layout.module';

package/layout/ng-package.json

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

package/layout/src/components/index.ts

@@ -1,37 +0,0 @@
-import { LayoutComponent } from './layout/layout.component';
-import { LayoutContentComponent } from './layout-content/layout-content.component';
-import { LayoutFooterComponent } from './layout-footer/layout-footer.component';
-import { LayoutRouteComponent } from './layout-route/layout-route.component';
-import { LayoutTitleComponent } from './layout-title/layout-title.component';
-import { LayoutSidenavTitleComponent } from './layout-sidenav-title/layout-sidenav-title.component';
-import { LayoutSidenavComponent } from './layout-sidenav/layout-sidenav.component';
-import { LayoutLoginMenuComponent } from './layout-login-menu/layout-login-menu.component';
-import { LayoutSubrouteComponent } from './layout-subroute/layout-subroute.component';
-import { LayoutAfterNavComponent } from './layout-after-nav/layout-after-nav.component';
-
-export const components: any[] = [
-  LayoutComponent,
-  LayoutContentComponent,
-  LayoutFooterComponent,
-  LayoutRouteComponent,
-  LayoutSubrouteComponent,
-  LayoutTitleComponent,
-  LayoutSidenavTitleComponent,
-  LayoutSidenavComponent,
-  LayoutLoginMenuComponent,
-  LayoutAfterNavComponent,
-];
-
-export * from './layout/layout.component';
-export * from './layout-content/layout-content.component';
-export * from './layout-footer/layout-footer.component';
-export * from './layout-route/layout-route.component';
-export * from './layout-subroute/layout-subroute.component';
-export * from './layout-title/layout-title.component';
-export * from './layout-sidenav-title/layout-sidenav-title.component';
-export * from './layout-login-menu/layout-login-menu.component';
-export * from './layout-sidenav/layout-sidenav.component';
-export * from './layout-after-nav/layout-after-nav.component';
-export * from './layout-drawer-actions/layout-drawer-actions.component';
-export * from './layout-drawer-content/layout-drawer-content.component';
-export * from './layout-drawer-title/layout-drawer-title.component';

package/layout/src/components/layout/_layout-mixin.component.scss

@@ -1,189 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../../utils';
-
-@mixin layout($theme) {
-  $accent: mat.get-color-from-palette(map-get($theme, 'accent'));
-  $grey300: mat.get-color-from-palette(map-get($theme, 'grayscale'), 300);
-  $grey900: mat.get-color-from-palette(map-get($theme, 'grayscale'), 900);
-  $spacer: map-get($theme, 'spacer');
-  $typography: map.get($theme, typography);
-
-  .mat-drawer-content {
-    min-height: 100vh;
-  }
-
-  .mobile-menu-sidebar {
-    min-width: 250px;
-    .mobile-menu-item {
-      display: flex;
-      width: 100%;
-      background: #ffffff;
-      padding: 16px;
-      border: none;
-      box-shadow: none;
-      font-size: 16px;
-      align-items: center;
-      text-align: left;
-      &:active,
-      &.active {
-        border-right: 4px solid $accent;
-        font-weight: bold !important;
-      }
-      mat-icon {
-        margin-left: 4px;
-      }
-    }
-  }
-  mat-drawer {
-    padding: 16px;
-    .mat-drawer-inner-container {
-      overflow: hidden !important;
-    }
-    onemrva-drawer-title span:first-child {
-      @include mat.typography-level($typography, 'subtitle-1');
-      color: mat.get-color-from-palette(map-get($theme, 'error'), 500);
-    }
-    onemrva-drawer-content {
-      background-color: white;
-      padding: 23px 32px;
-      margin: 0 16px;
-      border-radius: 16px;
-      display: block;
-      height: calc(100vh - 200px);
-      overflow: auto;
-    }
-    onemrva-drawer-actions {
-      text-align: right;
-    }
-  }
-
-  mat-toolbar {
-    padding: 0 $spacer * 7;
-  }
-
-  .application-title {
-    color: $accent;
-    height: $spacer * 6;
-    margin: $spacer * 2.75 0;
-  }
-
-  .logo {
-    height: 42px;
-  }
-
-  .language-tabs {
-    align-self: center;
-    .mat-tab-labels {
-      gap: $spacer * 3;
-    }
-
-    .mat-mdc-tab-header {
-      margin-bottom: 0;
-
-      .mat-mdc-tab-labels {
-        gap: 24px;
-
-        .mdc-tab {
-          min-width: 24px;
-          padding: 0;
-          gap: 0;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  .flex-center {
-    display: flex;
-    align-items: center;
-  }
-
-  .nav-container {
-    gap: $spacer * 3;
-    padding: 0;
-
-    nav {
-      gap: $spacer * 6;
-    }
-
-    .mat-mdc-menu-trigger {
-      align-self: center;
-    }
-
-    .account-button {
-      padding: 0;
-      mat-icon {
-        font-size: 32px;
-        height: 32px;
-        width: 32px;
-        line-height: 32px;
-      }
-    }
-  }
-
-  .s-menu {
-    padding: $spacer $spacer * 3 0;
-    .s-menu-languages {
-      gap: $spacer * 3;
-    }
-    .s-menu-item {
-      margin-bottom: $spacer;
-      @include mat.typography-level($typography, 'body-2');
-
-      &:hover {
-        font-weight: 900;
-      }
-    }
-  }
-
-  //
-  // TAB LINK
-  //
-  .mat-mdc-tab-nav-bar {
-    &.onemrva-tab-links {
-      align-self: center;
-    }
-
-    .mat-mdc-tab-links {
-      gap: 6 * $spacer;
-
-      .mat-mdc-tab-link {
-        //font-weight: 700;
-        min-width: 24px;
-        padding: 0;
-        font-weight: 400;
-        align-items: center;
-        text-transform: uppercase;
-        color: $grey900;
-        font-family: utils.fontFamily($theme, 'headline-1');
-        font-size: 14px;
-
-        &.mdc-tab--active {
-          .mdc-tab__text-label {
-            text-shadow: 0 0 1px $grey900; // THC HACK
-            //font-weight: 700; // for some cosmic reason, this breaks the tab animation (but not with languages)
-            color: $grey900;
-          }
-        }
-      }
-    }
-  }
-
-  .mdc-tab-indicator__content--underline {
-    border: 2px solid $accent !important;
-  }
-
-  onemrva-layout {
-    .onemrva-footer {
-      color: $grey900;
-      border-top: 1px solid $grey300;
-      @include mat.typography-level($typography, 'label-smallbutton');
-      font-family: mat.font-family($typography, 'label-smallbutton');
-    }
-  }
-
-  .language-tabs .mat-mdc-tab-label-container {
-    padding: 0 12px;
-  }
-}

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

@@ -1,213 +0,0 @@
-<mat-drawer-container
-  class="example-container"
-  [hasBackdrop]="drawerService.hasBackdrop"
-  autosize
->
-  <div class="app-content">
-    <header>
-      <mat-toolbar class="mat-elevation-z4">
-        <div class="environment" [class]="environment">
-          {{ environment }}
-        </div>
-        <div
-          [class.container]="!fluid"
-          [class.container-fluid]="fluid"
-          class="nav-container flex-center"
-        >
-          {{ logoRedictionUrl }}
-          <img
-            class="logo"
-            [src]="logo"
-            [attr.data-cy]="'onemrva_logo_' + translateService.currentLang"
-            alt="Logo ONEM/RVA"
-            [routerLink]="
-              logoRedictionUrl !== null ? logoRedictionUrl : undefined
-            "
-            [ngStyle]="{
-              cursor: logoRedictionUrl !== null ? 'pointer' : 'default'
-            }"
-          />
-          <div
-            class="application-title"
-            [ngClass]="{ 'small-screen': isSmall }"
-          >
-            <ng-container *ngIf="title?.template as titleTpl">
-              <ng-container *ngTemplateOutlet="titleTpl"></ng-container>
-            </ng-container>
-          </div>
-
-          <div style="flex: 1"></div>
-          <div
-            class="flex-center"
-            mat-tab-nav-bar
-            [tabPanel]="tabPanel"
-            *ngIf="!isSmall"
-          >
-            <ng-container *ngFor="let e of routes?.toArray(); let i = index">
-              <a
-                mat-tab-link
-                [routerLink]="e.routerLink"
-                [routerLinkActiveOptions]="{ exact: !e.hasSubroutes() }"
-                #rla="routerLinkActive"
-                routerLinkActive="mdc-tab--active"
-                [active]="rla.isActive || e.isRouteActive()"
-              >
-                <ng-container *ngIf="e.template as routeTemplate">
-                  <ng-container *ngTemplateOutlet="routeTemplate">
-                  </ng-container>
-                </ng-container>
-              </a>
-            </ng-container>
-          </div>
-
-          <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
-
-          <ng-container *ngIf="afterNav?.template as tpl">
-            <ng-container *ngTemplateOutlet="tpl"></ng-container>
-          </ng-container>
-
-          <mat-divider
-            vertical
-            style="height: 1em; align-self: center"
-            *ngIf="!isSmall && routes?.toArray()?.length"
-          ></mat-divider>
-
-          <mat-tab-group
-            class="language-tabs"
-            [selectedIndex]="selectedIndex"
-            (selectedIndexChange)="changeLanguage($event)"
-            *ngIf="!isSmall"
-          >
-            <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 *ngIf="profile !== null">
-            <mat-divider
-              vertical
-              style="height: 1em; align-self: center"
-              *ngIf="!isSmall"
-            ></mat-divider>
-            <button
-              disableRipple
-              data-cy="accountMenu"
-              class="account-button"
-              [matMenuTriggerFor]="menu"
-              mat-icon-button
-              attr.aria-label="{{ 'layout.profile' | translate }}"
-            >
-              <mat-icon *ngIf="!profile.isLoggedIn" class="large"
-                >account_circle</mat-icon
-              >
-
-              <onemrva-mat-avatar
-                *ngIf="profile.isLoggedIn"
-                initials="{{ profile.initials() }}"
-                color="accent"
-                size="extrasmall"
-              ></onemrva-mat-avatar>
-            </button>
-            <mat-menu #menu="matMenu">
-              <ng-container *ngIf="profile.isLoggedIn; else notConnected">
-                <p class="accountName">
-                  {{ profile.firstName }} {{ profile.lastName }}
-                </p>
-                <mat-divider style="align-self: stretch"></mat-divider>
-
-                <ng-container *ngIf="loginMenu?.template as menuLoginTpl">
-                  <ng-container *ngTemplateOutlet="menuLoginTpl"></ng-container>
-                </ng-container>
-
-                <button
-                  type="button"
-                  class="mat-mdc-menu-item"
-                  mat-menu-itemMrzapoie
-                  data-cy="logoutButton"
-                  (click)="doLogout()"
-                  attr.aria-label="{{ 'layout.logout' | translate }}"
-                >
-                  <mat-icon>logout</mat-icon>{{ 'layout.logout' | translate }}
-                </button>
-              </ng-container>
-              <ng-template #notConnected>
-                <button
-                  type="button"
-                  mat-menu-item
-                  data-cy="loginButton"
-                  (click)="doLogin()"
-                  attr.aria-label="{{ 'layout.login' | translate }}"
-                >
-                  <mat-icon>login</mat-icon>{{ 'layout.login' | translate }}
-                </button>
-              </ng-template>
-            </mat-menu>
-          </ng-container>
-          <ng-container
-            *ngIf="
-              isSmall &&
-              (routes?.toArray()?.length || (languages && languages.length > 1))
-            "
-          >
-            <button
-              type="button"
-              mat-icon-button
-              class="menu-button"
-              data-cy="smallDeviceMenu"
-              (click)="toggleSideNav()"
-              attr.aria-label="{{ 'layout.menu' | translate }}"
-            >
-              <mat-icon>menu</mat-icon>
-            </button>
-          </ng-container>
-        </div>
-      </mat-toolbar>
-    </header>
-    <ng-container>
-      <div
-        [id]="id"
-        [attr.role]="role"
-        [class.container]="!fluid"
-        [class.container-fluid]="fluid"
-        class="onemrva-layout-content"
-        *ngIf="content?.template as tpl"
-      >
-        <ng-container *ngTemplateOutlet="tpl"></ng-container>
-
-        <ng-container
-          *ngIf="
-            environment &&
-            (environment === env.LOCAL || environment === env.TEST)
-          "
-        >
-          <button
-            id="accessibility_fab"
-            mat-fab
-            color="accent"
-            aria-label="Accessibility check"
-            matTooltip="Accessibility check"
-            onclick="javascript:(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);});})();"
-          >
-            <mat-icon>accessibility</mat-icon>
-          </button>
-        </ng-container>
-      </div>
-
-      <footer class="onemrva-footer" *ngIf="footer?.template as footer">
-        <div [class.container]="!fluid" [class.container-fluid]="fluid">
-          <ng-container *ngTemplateOutlet="footer"></ng-container>
-        </div>
-      </footer>
-    </ng-container>
-  </div>
-
-  <mat-drawer
-    class="onemrva-drawer mobile-menu-sidebar"
-    mode="over"
-    position="end"
-  >
-    <ng-template drawerhost></ng-template>
-  </mat-drawer>
-</mat-drawer-container>