@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,62 @@
+@use "../../utils" as utils;
+
+// source: https://medium.com/nerd-for-tech/beautiful-spinner-in-css-bce7a348f50f
+
+@mixin spinner($theme) {
+  $primary: utils.palette($theme, "primary");
+
+  .onemrva-spinner-container {
+    position: relative;
+    height: 52px;
+    right: 52px;
+  }
+
+  .onemrva-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 52px;
+    width: 52px;
+    box-sizing: border-box;
+    background: conic-gradient(
+      from 90deg at 50% 50%,
+      rgba(39, 174, 96, 0) 0deg,
+      rgba(31, 144, 255, 0) 0.04deg,
+      $primary 360deg
+    );
+    border-radius: 56px;
+    /* previous code */
+    animation: 1s rotate infinite linear;
+  }
+  .onemrva-spinner::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    height: 43px;
+    width: 43px;
+    background: #fff;
+    border-radius: 48px;
+  }
+  .onemrva-spinner::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 4px;
+    width: 4px;
+    background: $primary;
+    border-radius: 8px;
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'onemrva-mat-spinner',
+  template: `
+    <div class="onemrva-spinner-container">
+      <div class="onemrva-spinner"></div>
+    </div>
+  `,
+})
+export class OnemrvaMatSpinnerComponent {}

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

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { OnemrvaMatSpinnerComponent } from './onemrva-mat-spinner.component';
+
+@NgModule({
+  declarations: [OnemrvaMatSpinnerComponent],
+  exports: [OnemrvaMatSpinnerComponent],
+})
+export class OnemrvaMatSpinnerModule {}

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

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

package/projects/onemrva/design-system/mat-stepper/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-stepper/src/_stepper-variables.scss

@@ -0,0 +1,29 @@
+$header-height: 72px !default;
+// Minimum height for highest density summary-stepper's is determined based on how much
+// summary-stepper headers can shrink until the step icon or step label exceed. We can't use
+// a value below `42px` because the optional label for steps would otherwise exceed.
+$header-minimum-height: 42px !default;
+$header-maximum-height: $header-height !default;
+
+$density-config: (
+  height: (
+    default: $header-height,
+    maximum: $header-maximum-height,
+    minimum: $header-minimum-height,
+  )
+) !default;
+
+// Note: These variables are not denoted with `!default` because they are used in the non-theme
+// component styles. Modifying these variables does not have the desired effect for consumers.
+$label-header-height: 24px;
+$label-position-bottom-top-gap: 16px;
+$label-min-width: 50px;
+
+$vertical-stepper-content-margin: 36px;
+
+$side-gap: 24px;
+$line-width: 1px;
+$line-gap: 8px;
+
+$step-sub-label-font-size: 12px;
+$step-header-icon-size: 16px;

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

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

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

@@ -0,0 +1,60 @@
+import {Directionality} from '@angular/cdk/bidi';
+import {
+  CdkStepper, StepperOrientation,
+} from '@angular/cdk/stepper';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  Optional,
+  ViewEncapsulation,
+} from '@angular/core';
+
+import {
+  onemrvaMatStepperAnimations,
+} from './onemrva-stepper-animations';
+import {
+  MatStepper
+} from "@angular/material/stepper";
+
+@Component({
+  selector: 'onemrva-mat-stepper, onemrva-mat-vertical-stepper, [onemrvaMatStepper]',
+  exportAs: 'matStepper, matVerticalStepper, matHorizontalStepper',
+  templateUrl: 'onemrva-mat-stepper.html',
+  styleUrls: ['onemrva-mat-stepper.scss'],
+  inputs: ['selectedIndex'],
+  host: {
+    '[class.mat-stepper-vertical]': 'true',
+    '[attr.aria-orientation]': '"vertical"',
+    'role': 'tablist',
+  },
+  animations: [
+      onemrvaMatStepperAnimations.verticalStepTransition,
+  ],
+  providers: [{provide: MatStepper, useExisting: OnemrvaMatStepper}, {provide: CdkStepper, useExisting: MatStepper}],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OnemrvaMatStepper extends MatStepper implements AfterContentInit {
+
+  /** Orientation of the summary-stepper. */
+  @Input()
+  override get orientation(): StepperOrientation {
+    return 'vertical';
+  }
+
+  override set orientation(value: StepperOrientation) {
+
+  }
+
+  constructor(
+      @Optional() dir: Directionality,
+      changeDetectorRef: ChangeDetectorRef,
+      elementRef: ElementRef<HTMLElement>,
+  ) {
+    super(dir, changeDetectorRef, elementRef);
+  }
+}

package/projects/onemrva/design-system/mat-stepper/src/onemrva-mat-stepper.html

@@ -0,0 +1,53 @@
+
+<!-- Vertical summary-stepper -->
+<ng-container>
+  <div class="mat-step" *ngFor="let step of steps; let i = index; let isLast = last">
+    <ng-container
+            [ngTemplateOutlet]="stepTemplate"
+            [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
+    <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
+      <div class="mat-vertical-stepper-content" role="tabpanel"
+           [@verticalStepTransition]="{
+              'value': _getAnimationDirection(i),
+              'params': {'animationDuration': _getAnimationDuration()}
+            }"
+           (@verticalStepTransition.done)="_animationDone.next($event)"
+           [id]="_getStepContentId(i)"
+           [attr.aria-labelledby]="_getStepLabelId(i)"
+           [attr.aria-expanded]="selectedIndex === i">
+        <div class="mat-vertical-content">
+          <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>
+
+
+<!-- Common step templating -->
+<ng-template let-step="step" let-i="i" #stepTemplate>
+  <mat-step-header
+          [class.mat-horizontal-stepper-header]="orientation === 'horizontal'"
+          [class.mat-vertical-stepper-header]="orientation === 'vertical'"
+          (click)="step.select()"
+          (keydown)="_onKeydown($event)"
+          [tabIndex]="_getFocusIndex() === i ? 0 : -1"
+          [id]="_getStepLabelId(i)"
+          [attr.aria-posinset]="i + 1"
+          [attr.aria-setsize]="steps.length"
+          [attr.aria-controls]="_getStepContentId(i)"
+          [attr.aria-selected]="selectedIndex == i"
+          [attr.aria-label]="step.ariaLabel || null"
+          [attr.aria-labelledby]="(!step.ariaLabel && step.ariaLabelledby) ? step.ariaLabelledby : null"
+          [attr.aria-disabled]="_stepIsNavigable(i, step) ? null : true"
+          [index]="i"
+          [state]="_getIndicatorType(i, step.state)"
+          [label]="step.stepLabel || step.label"
+          [selected]="selectedIndex === i"
+          [active]="_stepIsNavigable(i, step)"
+          [optional]="step.optional"
+          [errorMessage]="step.errorMessage"
+          [iconOverrides]="_iconOverrides"
+          [disableRipple]="disableRipple || !_stepIsNavigable(i, step)"
+          ></mat-step-header>
+</ng-template>

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import {OnemrvaMatStepper} from './onemrva-mat-stepper.component';
+import {CommonModule} from "@angular/common";
+import {ErrorStateMatcher, MatCommonModule, MatRippleModule} from "@angular/material/core";
+import {PortalModule} from "@angular/cdk/portal";
+import {CdkStepperModule} from "@angular/cdk/stepper";
+import {MatIconModule} from "@angular/material/icon";
+import {MAT_STEPPER_INTL_PROVIDER, MatStepperModule} from "@angular/material/stepper";
+
+@NgModule({
+  imports: [
+    MatCommonModule,
+    CommonModule,
+    PortalModule,
+    CdkStepperModule,
+    MatIconModule,
+    MatRippleModule,
+    MatStepperModule
+  ],
+  exports: [
+    MatCommonModule,
+    MatStepperModule,
+    OnemrvaMatStepper,
+  ],
+  declarations: [
+    OnemrvaMatStepper
+  ],
+  providers: [],
+})
+export class OnemrvaMatStepperModule { }

package/projects/onemrva/design-system/mat-stepper/src/onemrva-mat-stepper.scss

@@ -0,0 +1,106 @@
+//@use '../../../../node_modules/@angular/cdk/index';
+@use 'sass:math';
+
+@use 'stepper-variables';
+
+.mat-stepper-vertical {
+    display: block;
+}
+
+.mat-vertical-stepper-header {
+    display: flex;
+    align-items: center;
+
+    // We can't use `max-height` here, because it breaks the flexbox centering in IE.
+    height: stepper-variables.$label-header-height;
+
+    .mat-step-icon {
+        margin-right: stepper-variables.$vertical-stepper-content-margin - stepper-variables.$side-gap;
+
+        [dir='rtl'] & {
+            margin-right: 0;
+            margin-left: stepper-variables.$vertical-stepper-content-margin - stepper-variables.$side-gap;
+        }
+    }
+}
+
+.mat-vertical-content-container {
+    //@include cdk.high-contrast(active, off) {
+    //  outline: solid 1px;
+    //}
+
+    margin-left: stepper-variables.$vertical-stepper-content-margin;
+    border: 0;
+    position: relative;
+
+    [dir='rtl'] & {
+        margin-left: 0;
+        margin-right: stepper-variables.$vertical-stepper-content-margin;
+    }
+}
+
+.mat-stepper-vertical-line::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    border-left-width: stepper-variables.$line-width;
+    border-left-style: solid;
+
+    [dir='rtl'] & {
+        left: auto;
+        right: 0;
+    }
+}
+
+.mat-vertical-stepper-content {
+    overflow: hidden;
+    outline: 0;
+}
+
+.mat-vertical-content {
+    padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
+}
+
+.mat-step:last-child {
+    .mat-vertical-content-container {
+        border: none;
+    }
+}
+
+onemrva-mat-vertical-stepper {
+    .mat-vertical-stepper-content {
+        .mat-step-summary {
+            height: auto;
+            opacity: 1;
+            overflow: inherit;
+            transition: height 0s 1s, opacity 1s linear;
+        }
+        .mat-step-form {
+            height: 0;
+            opacity: 0;
+            overflow: hidden;
+            transition: none;
+
+            mat-form-field {
+                opacity: 0;
+            }
+        }
+        &[aria-expanded='true'] {
+            .mat-step-summary {
+                height: 0;
+                opacity: 0;
+                overflow: hidden;
+                transition: none;
+            }
+            .mat-step-form {
+                height: auto;
+                opacity: 1;
+                transition: height 0s 1s, opacity 1s linear;
+              overflow: inherit;
+                mat-form-field {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}

package/projects/onemrva/design-system/mat-stepper/src/onemrva-stepper-animations.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+    AnimationTriggerMetadata, query, stagger, animateChild,
+} from '@angular/animations';
+
+export const DEFAULT_VERTICAL_ANIMATION_DURATION = '225ms';
+
+/**
+ * Animations used by the Material steppers.
+ * @docs-private
+ */
+export const onemrvaMatStepperAnimations: {
+    readonly verticalStepTransition: AnimationTriggerMetadata;
+} = {
+
+    /** Animation that transitions the step along the Y axis in a vertical summary-stepper. */
+    verticalStepTransition: trigger('verticalStepTransition', [
+        state('previous', style({height: '*', visibility: 'inherit'})),
+        state('next', style({height: '0px', visibility: 'hidden'})),
+        // Transition to `inherit`, rather than `visible`,
+        // because visibility on a child element the one from the parent,
+        // making this element focusable inside of a `hidden` element.
+        state('current', style({height: '*', visibility: 'inherit'})),
+        transition('* <=> current', animate('{{animationDuration}} cubic-bezier(0.4, 0.0, 0.2, 1)'), {
+            params: {'animationDuration': DEFAULT_VERTICAL_ANIMATION_DURATION},
+        }),
+
+    ]),
+};

package/projects/onemrva/design-system/mat-table-of-content/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of mat-summary-stepper
+ */
+
+export * from './src/onemrva-mat-table-of-content.component';
+export * from './src/onemrva-mat-table-of-content.directive';
+export * from './src/onemrva-mat-table-of-content.service';
+export * from './src/onemrva-mat-toc-anchor.model';

package/projects/onemrva/design-system/mat-table-of-content/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-table-of-content/src/_onemrva-mat-table-of-content.component.scss

@@ -0,0 +1,79 @@
+@use "../../utils" as utils;
+
+@mixin toc($theme) {
+  $bckgr-color: utils.palette($theme, "grayscale", 50);
+  $left-border-color: utils.palette($theme, "grayscale", 300);
+  $title-color: utils.palette($theme, "accent");
+  $anchor-color: utils.palette($theme, "grayscale", 700);
+  $highlighted-anchor-color: utils.palette($theme, "grayscale", 900);
+  $color-checkmark: utils.palette($theme, "success", 600);
+
+  .onemrva-mat-toc {
+    position: fixed;
+    width: 240px;
+    top: 92px;
+    left: 0;
+    bottom: 0;
+    overflow: auto;
+    background-color: $bckgr-color;
+    padding: 56px 8px 8px 32px;
+    box-sizing: border-box;
+
+    .onemrva-mat-toc-title {
+      color: $title-color;
+      line-height: 26px;
+      margin-bottom: 16px;
+    }
+
+    mat-list {
+      padding: 0;
+
+      mat-list-item {
+        padding: 4px 0 4px 8px;
+        height: 32px !important;
+        border-left: 1px solid $left-border-color;
+
+        &.onemrva-mat-hidden-toc-anchor {
+          display: none;
+        }
+
+        .mdc-list-item__primary-text {
+          font-weight: 600;
+          color: $anchor-color;
+        }
+
+        &.active-anchor {
+          border-left: 3px solid $title-color;
+          padding-left: 6px;
+
+          .mdc-list-item__primary-text {
+            color: $highlighted-anchor-color;
+          }
+        }
+
+        &.onemrva-anchor-for-subsection {
+          .mdc-list-item__primary-text {
+            font-weight: 400;
+            padding-left: 16px;
+          }
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        mat-icon {
+          vertical-align: bottom !important;
+
+          &.anchor-check {
+            color: $color-checkmark;
+          }
+
+          &.anchor-warning {
+            color: $title-color;
+          }
+        }
+      }
+    }
+  }
+}

package/projects/onemrva/design-system/mat-table-of-content/src/onemrva-mat-table-of-content.component.html

@@ -0,0 +1,23 @@
+<nav class="onemrva-mat-toc">
+  <h3 class="onemrva-mat-toc-title">{{ titleKey | translate }}</h3>
+
+  <mat-list>
+    <mat-list-item
+      *ngFor="let anchor of toc$ | async"
+      (click)="goTo(anchor)"
+      [ngClass]="{
+        'active-anchor': anchor.path === activePath,
+        'onemrva-anchor-for-subsection': anchor.level === level.SUBSECTION,
+        'onemrva-mat-hidden-toc-anchor': anchor.directive.hiddenInToc
+      }"
+    >
+      {{ anchor.titleKey | translate }}
+      <mat-icon *ngIf="anchor.status === status.CHECKMARK" class="anchor-check"
+        >check</mat-icon
+      >
+      <mat-icon *ngIf="anchor.status === status.WARNING" class="anchor-warning"
+        >priority_high</mat-icon
+      >
+    </mat-list-item>
+  </mat-list>
+</nav>