@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,24 @@
+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/projects/onemrva/design-system/layout/src/components/layout-subroute/layout-subroute.component.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectorRef,
+  Component, ContentChildren,
+  Input, QueryList,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'onemrva-layout-subroute',
+  templateUrl: 'layout-subroute.component.html'
+})
+export class LayoutSubrouteComponent {
+  @Input() customNgClass: any;
+
+  @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+  @Input() routerLink: typeof RouterLink.prototype.routerLink;
+  @Input() routerLinkActiveOptions?: any;
+  @Input() dataCy?: string;
+
+  @ContentChildren(LayoutSubrouteComponent)
+  subroutes?: QueryList<LayoutSubrouteComponent>;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+
+  hasSubroutes() {
+    return this.subroutes !== undefined && this.subroutes.length > 0;
+  }
+}

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

@@ -0,0 +1,25 @@
+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/projects/onemrva/design-system/layout/src/components/layout-title/layout-title.component.ts

@@ -0,0 +1,17 @@
+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/projects/onemrva/design-system/layout/src/decorators/coerce-boolean-input.decorator.ts

@@ -0,0 +1,19 @@
+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/projects/onemrva/design-system/layout/src/decorators/observable-content.decorator.ts

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

package/projects/onemrva/design-system/layout/src/directives/drawer-host.directive.ts

@@ -0,0 +1,10 @@
+// Command to generate ng g d <Directive name>
+
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[drawerhost]',
+})
+export class DrawerHostDirective {
+  constructor(public viewContainerRef: ViewContainerRef) {}
+}

package/projects/onemrva/design-system/layout/src/enums/environment.enum.ts

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

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

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

package/projects/onemrva/design-system/layout/src/layout.module.ts

@@ -0,0 +1,103 @@
+import { APP_INITIALIZER, 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 {
+  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
+  MatMomentDateModule, //
+  MomentDateAdapter,
+} from '@angular/material-moment-adapter';
+
+import { components } from './components';
+import { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';
+import { TranslateModule, TranslateService } 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 { Observable, of } from 'rxjs';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+} from '@angular/material/core';
+import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
+
+function translateDatepicker(
+  translateService: TranslateService,
+  adapter: DateAdapter<Date>
+): () => Observable<any> {
+  return () => {
+    // For some cosmic reason, return translateService.onLangChange().asObservable()) + pipe(tap()) does not work
+    translateService.onLangChange.subscribe((event) => {
+      adapter.setLocale(event.lang);
+    });
+
+    // But this works fine...
+    return of('sin (a +- b) = sin a . cos b +- cos a . sin b');
+  };
+}
+
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'LL',
+  },
+  display: {
+    dateInput: 'DD/MM/YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+@NgModule({
+  declarations: [...components, DrawerHostDirective, StripHtmlPipe],
+  imports: [
+    CommonModule,
+    RouterModule,
+    LayoutModule,
+    MatToolbarModule,
+    MatDividerModule,
+    MatSidenavModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatIconModule,
+    TranslateModule,
+    OnemrvaMatAvatarModule,
+    MatTooltipModule,
+    TranslateModule,
+  ],
+  exports: [...components, LayoutModule],
+  providers: [
+    {
+      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
+      useValue: { horizontalPosition: 'right' },
+    },
+    {
+      provide: MAT_DATE_LOCALE,
+      useValue: 'fr',
+    },
+
+    {
+      provide: DateAdapter,
+      useClass: MomentDateAdapter,
+      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
+    },
+    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: translateDatepicker,
+      deps: [TranslateService, DateAdapter<any>],
+      multi: true,
+    },
+  ],
+})
+export class OnemrvaLayoutModule {}

package/projects/onemrva/design-system/layout/src/models/onem-language.model.ts

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

package/projects/onemrva/design-system/layout/src/models/onemrva-profile.model.ts

@@ -0,0 +1,57 @@
+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/projects/onemrva/design-system/layout/src/services/drawer.service.ts

@@ -0,0 +1,28 @@
+import { Injectable, Type } 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;
+
+  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/projects/onemrva/design-system/layout/src/striphtml.pipe.ts

@@ -0,0 +1,11 @@
+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/projects/onemrva/design-system/layout/src/test.ts

@@ -0,0 +1,25 @@
+// 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/projects/onemrva/design-system/mat-avatar/index.ts

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

package/projects/onemrva/design-system/mat-avatar/ng-package.json

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

package/projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.html

@@ -0,0 +1,17 @@
+<ng-template #defaultTemplate>
+    <ng-content></ng-content>
+</ng-template>
+
+<ng-template #imageTemplate>
+    <div #image class="onemrva-avatar__image" [style.backgroundImage]="getSrcUrl()"></div>
+</ng-template>
+
+<ng-template #initialsTemplate>
+    <span>{{initials | slice : 0 : 2}}</span>
+</ng-template>
+
+<ng-template #iconTemplate>
+    <mat-icon>{{icon}}</mat-icon>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="template"></ng-container>

package/projects/onemrva/design-system/mat-avatar/src/onemrva-mat-avatar.component.scss

@@ -0,0 +1,130 @@
+@use '../../utils';
+
+@mixin avatar($theme) {
+    onemrva-mat-avatar {
+        --size: 56px;
+        --font-size: 24px;
+        --resize: 12px;
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-user-select: none;
+        user-select: none;
+        color: var(--color);
+        background: var(--background);
+        vertical-align: middle;
+        outline-style: none;
+        flex-shrink: 0;
+        font-family: Poppins, sans-serif;
+        font-weight: 500;
+
+        &.onemrva-mat-avatar--extrasmall {
+            --size: 32px;
+            --font-size: 12px;
+            --resize: 4px;
+        }
+        &.onemrva-mat-avatar--small {
+            --size: 40px;
+            --font-size: 16px;
+            --resize: 8px;
+        }
+        &.onemrva-mat-avatar--large {
+            --size: 72px;
+            --font-size: 32px;
+            --resize: 16px;
+        }
+        &.onemrva-mat-avatar--extralarge {
+            --resize: 22px;
+            --size: 124px;
+            --font-size: 60px;
+            width: var(--size);
+            height: var(--size);
+        }
+        mat-icon.material-icons {
+            font-size: calc(var(--size) + var(--resize));
+            margin-top: calc(-1 * var(--resize));
+            margin-left: calc(-1 * var(--resize));
+            width: var(--size);
+            height: var(--size);
+        }
+        font-size: var(--font-size);
+        line-height: calc(var(--size) / 2);
+        width: var(--size);
+        height: var(--size);
+
+        &.mat-accent {
+            background: utils.gradient($theme);
+            color: utils.palette($theme, 'accent', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'error') !important;
+                background: utils.gradient($theme);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+
+                font-variation-settings: 'FILL' 0, 'wght' 900, 'GRAD' 0, 'opsz' 48;
+            }
+        }
+        &.mat-primary {
+            background: utils.palette($theme, 'primary');
+            color: utils.palette($theme, 'primary', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'primary') !important;
+            }
+        }
+        &.mat-info {
+            background: utils.palette($theme, 'info');
+            color: utils.palette($theme, 'info', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'info') !important;
+            }
+        }
+        &.mat-grayscale {
+            background: utils.palette($theme, 'grayscale');
+            color: utils.palette($theme, 'grayscale', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'grayscale') !important;
+            }
+        }
+        &.mat-warn {
+            background: utils.palette($theme, 'warn');
+            color: utils.palette($theme, 'warn', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'warn') !important;
+            }
+        }
+        &.mat-error {
+            background: utils.palette($theme, 'error');
+            color: utils.palette($theme, 'error', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'error') !important;
+            }
+        }
+        &.mat-success {
+            background: utils.palette($theme, 'success');
+            color: utils.palette($theme, 'success', '500-contrast');
+            &.onemrva-mat-avatar--icon {
+                background: transparent;
+                color: utils.palette($theme, 'success') !important;
+            }
+        }
+        .onemrva-avatar__image {
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+            background-color: var(--background);
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        &.onemrva-mat-avatar--rounded {
+            border-radius: var(--size);
+        }
+    }
+}