@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,36 @@
+<mat-chip-row
+  *ngIf="isSmall; else sideMenu"
+  class="onemrva-side-menu"
+  role="navigation"
+>
+  <mat-chip
+    role=""
+    *ngFor="let menu of menus; let i = index"
+    class="onemrva-side-menu-option"
+    (click)="selectMenu(menu)"
+    [ngClass]="{
+      'onemrva-side-menu-current-option':
+        menu.path === currentMenu || menu.key === currentMenu
+    }"
+    [attr.data-cy]="'onemrva-side-menu-chip-option_' + i"
+  >
+    {{ menu.wordingKey | translate }}
+  </mat-chip>
+</mat-chip-row>
+<ng-template #sideMenu>
+  <nav class="onemrva-side-menu onemrva-expanded-side-menu">
+    <div class="onemrva-side-menu-header">{{ menuHeaderKey | translate }}</div>
+    <div
+      *ngFor="let menu of menus; let i = index"
+      class="onemrva-side-menu-option"
+      [ngClass]="{
+        'onemrva-side-menu-current-option':
+          menu.path === currentMenu || menu.key === currentMenu
+      }"
+      (click)="selectMenu(menu)"
+      [attr.data-cy]="'onemrva-side-menu-option_' + i"
+    >
+      {{ menu.wordingKey | translate }}
+    </div>
+  </nav>
+</ng-template>

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

@@ -0,0 +1,50 @@
+@use '../../utils';
+
+@mixin sideMenu($theme) {
+    onemrva-mat-side-menu {
+        $divider: utils.palette($theme, 'grayscale', 900, 0.12);
+
+        $grey-1: utils.palette($theme, 'grayscale', 900);
+        $grey-3: utils.palette($theme, 'grayscale', 700);
+        $grey-8: utils.palette($theme, 'grayscale', 300);
+        $grey-12: utils.palette($theme, 'grayscale', 50);
+
+        mat-chip-list {
+            width: 100%;
+        }
+        .onemrva-side-menu-option {
+            color: $grey-1;
+            background-color: $grey-12;
+            &:hover {
+                cursor: pointer;
+                background-color: $grey-8;
+            }
+            &.onemrva-side-menu-current-option {
+                background-color: $grey-8;
+            }
+        }
+        .onemrva-expanded-side-menu {
+            width: 250px;
+            border: 1px solid $divider;
+            border-radius: 20px;
+
+            .onemrva-side-menu-header {
+                border-radius: 20px 20px 0 0;
+                padding: 27px 30px 25px;
+                background-color: $grey-3;
+                color: white;
+                font-weight: 700;
+                text-transform: uppercase;
+            }
+
+            .onemrva-side-menu-option {
+                border-top: 1px solid $divider;
+                padding: 20px 30px;
+
+                &:last-child {
+                    border-radius: 0 0 20px 20px;
+                }
+            }
+        }
+    }
+}

package/projects/onemrva/design-system/mat-side-menu/src/onemrva-mat-side-menu.component.spec.ts

@@ -0,0 +1,66 @@
+import { TestBed, ComponentFixture } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { TranslateModule } from "@ngx-translate/core";
+import { jest } from '@jest/globals';
+
+import { OnemrvaMatSideMenuComponent, OnemrvaMenu } from './onemrva-mat-side-menu.component';
+import { MatChipsModule } from "@angular/material/chips";
+import { LayoutModule } from "@angular/cdk/layout";
+
+describe('OnemrvaMatSideMenuComponent', () => {
+    let component: OnemrvaMatSideMenuComponent;
+    let fixture: ComponentFixture<OnemrvaMatSideMenuComponent>;
+
+    const menu1: OnemrvaMenu = {
+        wordingKey: "menu1",
+        path: "path1"
+    };
+    const menu2: OnemrvaMenu = {
+        wordingKey: "menu2",
+        path: "path2"
+    };
+    const menus: OnemrvaMenu[] = [menu1, menu2];
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [OnemrvaMatSideMenuComponent],
+            imports: [TranslateModule.forRoot(), MatChipsModule, LayoutModule],
+        }).compileComponents(); // the component will be compiled
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(OnemrvaMatSideMenuComponent);
+        component = fixture.componentInstance;
+        component.menus = menus;
+        fixture.detectChanges();
+
+        component.ngOnInit()
+    });
+
+    it("Must display all the menus", () => {
+        const { debugElement } = fixture;
+        expect(debugElement.queryAll(By.css(".onemrva-side-menu-option")).length).toEqual(menus.length);
+    });
+
+    it("Must notify the parent component about the selected option", () => {
+        jest.spyOn(component.onSelectOption, 'emit');
+
+        const option1 = fixture.nativeElement.querySelector("[data-cy=onemrva-side-menu-option_0]");
+        option1.click();
+        expect(component.onSelectOption.emit).toHaveBeenCalledWith(menu1);
+
+        const option2 = fixture.nativeElement.querySelector("[data-cy=onemrva-side-menu-option_1]");
+        option2.click();
+        expect(component.onSelectOption.emit).toHaveBeenCalledWith(menu2);
+    });
+
+    describe("Responsivity", () => {
+        it("Must display chips when the resolution becomes too small", () => {
+            component.isSmall = true; // HWKTODO find out a way to manually resize the screen instead
+            fixture.detectChanges();
+
+            const { debugElement } = fixture;
+            expect(debugElement.queryAll(By.css(".mat-chip")).length).toEqual(menus.length);
+        });
+    });
+});

package/projects/onemrva/design-system/mat-side-menu/src/onemrva-mat-side-menu.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
+import { Subscription } from 'rxjs';
+
+export interface OnemrvaMenu {
+    wordingKey: string;
+    path?: string;
+    key?: string;
+}
+
+@Component({
+    selector: 'onemrva-mat-side-menu',
+    templateUrl: 'onemrva-mat-side-menu.component.html',
+    styles: [],
+})
+export class OnemrvaMatSideMenuComponent implements OnInit, OnDestroy {
+    @Input() menuHeaderKey!: string;
+    @Input() menus!: OnemrvaMenu[];
+    @Input() currentMenu?: string; // string to be matched against menu.path or menu.key
+    @Output() onSelectOption: EventEmitter<OnemrvaMenu> = new EventEmitter();
+
+    isSmall = true;
+    breakpointObserverSubscription?: Subscription;
+
+    constructor(public breakpointObserver: BreakpointObserver) {}
+
+    ngOnInit(): void {
+        this.breakpointObserverSubscription = this.breakpointObserver
+            .observe([Breakpoints.XSmall, Breakpoints.Small])
+            .subscribe((state: BreakpointState) => {
+                if (state.matches) {
+                    this.isSmall = true;
+                } else {
+                    this.isSmall = false;
+                }
+            });
+    }
+
+    ngOnDestroy(): void {
+        this.breakpointObserverSubscription?.unsubscribe();
+    }
+
+    selectMenu(menu: OnemrvaMenu) {
+        this.onSelectOption.emit(menu);
+    }
+}

package/projects/onemrva/design-system/mat-side-menu/src/onemrva-mat-side-menu.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { LayoutModule } from '@angular/cdk/layout';
+
+import { OnemrvaMatSideMenuComponent } from './onemrva-mat-side-menu.component';
+import { MatChipsModule } from '@angular/material/chips';
+
+@NgModule({
+  declarations: [OnemrvaMatSideMenuComponent],
+  imports: [CommonModule, TranslateModule, MatChipsModule, LayoutModule],
+  exports: [OnemrvaMatSideMenuComponent],
+})
+export class OnemrvaMatSideMenuModule {}

package/projects/onemrva/design-system/mat-skeleton/index.ts

@@ -0,0 +1,3 @@
+export * from './src/onemrva-mat-skeleton.module';
+export * from './src/onemrva-mat-skeleton.component';
+export * from './src/onemrva-mat-skeleton-enums';

package/projects/onemrva/design-system/mat-skeleton/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-skeleton/src/onemrva-mat-skeleton-enums.ts

@@ -0,0 +1,32 @@
+import { mkenum } from '@onemrvapublic/design-system/utils';
+
+export type OnemrvaSkeletonLoaderConfigTheme = {
+  // This is required since ngStyle is using `any` as well
+  // More details in https://angular.io/api/common/NgStyle
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [k: string]: any;
+} | null;
+
+export const OnemrvaMatSkeletonAnimations = mkenum({
+  PULSE: 'pulse',
+  PROGRESS: 'progress',
+  NONE: 'none',
+});
+export type OnemrvaMatSkeletonAnimations =
+  (typeof OnemrvaMatSkeletonAnimations)[keyof typeof OnemrvaMatSkeletonAnimations];
+
+export const OnemrvaMatSkeletoTypes = mkenum({
+  H1: 'h1',
+  H2: 'h2',
+  H3: 'h3',
+  H4: 'h4',
+  H5: 'h5',
+  H6: 'h6',
+  BUTTON: 'button',
+  CIRCLE: 'circle',
+  SQUARE: 'square',
+  CUSTOM: 'custom',
+  LINE: '',
+});
+export type OnemrvaMatSkeletoTypes =
+  (typeof OnemrvaMatSkeletoTypes)[keyof typeof OnemrvaMatSkeletoTypes];

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

@@ -0,0 +1,17 @@
+<div
+  *ngFor="let item of items"
+  class="skeleton-loader"
+  aria-busy="true"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  role="progressbar"
+  [ngStyle]="theme"
+>
+  <ng-container *ngIf="type  === 'custom'">
+    <ng-content ></ng-content>
+  </ng-container>
+</div>
+
+
+
+

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

@@ -0,0 +1,216 @@
+onemrva-mat-skeleton {
+
+  &.circle, &.square {
+    --size: 56px;
+    --resize: 12px;
+
+    &.extrasmall {
+      --size: 32px;
+      --font-size: 12px;
+      --resize: 4px;
+    }
+
+    &.small {
+      --size: 40px;
+      --font-size: 16px;
+      --resize: 8px;
+    }
+
+    &.large {
+      --size: 72px;
+      --font-size: 32px;
+      --resize: 16px;
+    }
+
+    &.extralarge {
+      --resize: 22px;
+      --size: 124px;
+      --font-size: 60px;
+    }
+
+    .skeleton-loader {
+      width: var(--size);
+      height: var(--size);
+      margin-top: var(--resize);
+      margin-left: var(--resize);
+    }
+  }
+
+  &.circle {
+    .skeleton-loader {
+      border-radius: 50%;
+    }
+  }
+
+  &.h1 {
+    .skeleton-loader {
+      height: 51px;
+    }
+  }
+
+  &.h2 {
+    .skeleton-loader {
+      height: 46px;
+    }
+  }
+
+  &.h3 {
+    .skeleton-loader {
+      height: 40px;
+    }
+  }
+
+  &.h4 {
+    .skeleton-loader {
+      height: 35px;
+    }
+  }
+
+  &.button {
+    .skeleton-loader {
+      height: 36px;
+      width: 120px;
+      border-radius: 500px;
+    }
+  }
+
+  /**
+  * Added only when `animation` attribute is `progress`
+  * at component level. So that we can load the
+  * animations only if needed
+  */
+  &.progress {
+
+    .skeleton-loader {
+      &:after,
+      &:before {
+        box-sizing: border-box;
+      }
+
+      // position: relative;
+      // this adds GPU acceleration
+      transform: translate3d(0, 0, 0);
+
+      &:before {
+        animation: progress 2s ease-in-out infinite;
+        background-size: 200px 100%;
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        width: 200px;
+        height: 100%;
+        content: '';
+      }
+    }
+
+  }
+
+  &.progress {
+
+    .skeleton-loader {
+
+      &:before {
+        background-image: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0),
+            rgba(255, 255, 255, 0.6),
+            rgba(255, 255, 255, 0)
+        );
+      }
+    }
+  }
+
+  /**
+  * Added only when `animation` attribute is `pulse`
+  * at component level. So that we can load the
+  * animations only if needed
+  */
+  &.pulse {
+
+    .skeleton-loader {
+
+      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+      animation-delay: 0.5s;
+    }
+  }
+
+  //For custom mark height to 100% and remove the background
+  &.custom {
+
+    .skeleton-loader {
+
+      height: 100%;
+      background: none;
+    }
+  }
+
+  // Removing animation if user enabled the `Reduce Motion` option
+  // via operational system and/or browser
+  // More details about `prefers-reduced-motion` in https://web.dev/prefers-reduced-motion/
+  @media (prefers-reduced-motion: reduce) {
+    &.pulse,
+    &.progress-dark,
+    &.custom,
+    &.progress {
+      animation: none;
+    }
+
+    &.progress,
+    &.progress-dark,
+    &.custom {
+      background-image: none;
+    }
+  }
+
+  .skeleton-loader {
+    box-sizing: border-box;
+
+    /**
+    * `overflow` and `position` are required steps to make sure
+    * the component respects the specified dimensions
+    * given via `theme` object @Input attribute
+    */
+    overflow: hidden;
+    position: relative;
+
+    background: rgb(239, 241, 246) no-repeat;
+
+    border-radius: 4px;
+    width: 100%;
+    height: 20px;
+    display: inline-block;
+    margin-bottom: 10px;
+
+    // More details about CSS `will-change` property
+    // in https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
+    will-change: transform;
+
+    &:after,
+    &:before {
+      box-sizing: border-box;
+    }
+  }
+}
+
+// CSS Animation Keyframes
+@keyframes progress {
+  0% {
+    transform: translate3d(-200px, 0, 0);
+  }
+  100% {
+    transform: translate3d(calc(200px + 100vw), 0, 0);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/projects/onemrva/design-system/mat-skeleton/src/onemrva-mat-skeleton.component.ts

@@ -0,0 +1,173 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  HostBinding,
+  SimpleChanges,
+} from '@angular/core';
+import { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';
+import {
+  OnemrvaMatSkeletonAnimations,
+  OnemrvaMatSkeletoTypes,
+  OnemrvaSkeletonLoaderConfigTheme,
+} from './onemrva-mat-skeleton-enums';
+
+let NEXT_ID = 0;
+
+/**
+ * Skeleton provides a way to display loading element while page is loading.
+ *
+ * @MatModule OnemrvaMatSkeletonModule
+ *
+ * @MatKeywords skeleton, loading, progress
+ *
+ * @example
+ * ```html
+ * <onemrva-mat-skeleton type="avatar" size="large">
+ * </onemrva-mat-skeleton>
+ * ```
+ */
+@Component({
+  selector: 'onemrva-mat-skeleton',
+  templateUrl: 'onemrva-mat-skeleton.component.html',
+  styleUrls: ['onemrva-mat-skeleton.component.scss'],
+})
+export class OnemrvaMatSkeletonComponent implements OnInit {
+  @Input()
+  count: number = 1;
+
+  @Input()
+  animation: OnemrvaMatSkeletonAnimations =
+    OnemrvaMatSkeletonAnimations.PROGRESS;
+
+  @Input()
+  type: OnemrvaMatSkeletoTypes = OnemrvaMatSkeletoTypes.LINE;
+
+  @Input()
+  size: OnemrvaMatSize = OnemrvaMatSize.MEDIUM;
+
+  @Input()
+  theme: OnemrvaSkeletonLoaderConfigTheme = [];
+
+  @HostBinding('attr.aria-label')
+  @Input()
+  ariaLabel = 'loading';
+
+  @HostBinding('attr.role')
+  @Input()
+  public role = 'progressbar';
+
+  @HostBinding('attr.valuetext')
+  @Input()
+  public loadingText = 'Loading...';
+
+  @HostBinding('attr.id')
+  @Input()
+  public id = `onemrva-mat-skeleton-${NEXT_ID++}`;
+
+  /** @hidden @internal */
+  @HostBinding('class.progress')
+  public get _isProgress(): boolean {
+    return this.animation === OnemrvaMatSkeletonAnimations.PROGRESS;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.pulse')
+  public get _isPulse(): boolean {
+    return this.animation === OnemrvaMatSkeletonAnimations.PULSE;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.h1')
+  public get isH1(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.H1;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.h2')
+  public get isH2(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.H2;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.h3')
+  public get isH3(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.H3;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.h4')
+  public get isH4(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.H4;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.h5')
+  public get isH5(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.H5;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.h6')
+  public get isH6(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.H6;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.line')
+  public get _isLine(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.LINE;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.button')
+  public get _isButton(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.BUTTON;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.circle')
+  public get _isCircle(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.CIRCLE;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.square')
+  public get _isSquare(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.SQUARE;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.custom')
+  public get _isCustom(): boolean {
+    return this.type === OnemrvaMatSkeletoTypes.CUSTOM;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.extrasmall')
+  public get _isXSmallSize(): boolean {
+    return this.size === OnemrvaMatSize.XSMALL;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.small')
+  public get _isSmallSize(): boolean {
+    return this.size === OnemrvaMatSize.SMALL;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.medium')
+  public get _isMediumSize(): boolean {
+    return this.size === OnemrvaMatSize.MEDIUM;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.large')
+  public get _isLargeSize(): boolean {
+    return this.size === OnemrvaMatSize.LARGE;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.extralarge')
+  public get _isXLargeSize(): boolean {
+    return this.size === OnemrvaMatSize.XLARGE;
+  }
+
+  public items: Array<any> = [];
+
+  constructor() {}
+
+  ngOnInit() {
+    this.items.length = this.count;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.items.length = this.count;
+  }
+}

package/projects/onemrva/design-system/mat-skeleton/src/onemrva-mat-skeleton.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatSkeletonComponent } from "./onemrva-mat-skeleton.component";
+
+@NgModule({
+    declarations: [
+        OnemrvaMatSkeletonComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        OnemrvaMatSkeletonComponent
+    ],
+})
+export class OnemrvaMatSkeletonModule {}

package/projects/onemrva/design-system/mat-spinner/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of mat-side-menu
+ */
+
+export * from './src/onemrva-mat-spinner.component';
+export * from './src/onemrva-mat-spinner.module';

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

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