@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,291 @@
+/**
+ * @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 {AriaDescriber} from '@angular/cdk/a11y';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {
+  Directive,
+  ElementRef, HostBinding,
+  Inject,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Renderer2,
+} from '@angular/core';
+import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+
+let nextId = 0;
+
+// Boilerplate for applying mixins to MatBadge.
+/** @docs-private */
+const _MatBadgeBase = mixinDisabled(class {});
+
+/** Possible color palette values. */
+export declare type ThemePalette = 'primary' | 'accent' | 'warn' | 'success' | 'error' | 'info' | 'grayscale' | undefined;
+
+/** Allowed position options for matBadgePosition */
+export type MatBadgePosition =
+    | 'above after'
+    | 'above before'
+    | 'below before'
+    | 'below after'
+    | 'before'
+    | 'after'
+    | 'above'
+    | 'below';
+
+/** Allowed size options for matBadgeSize */
+export type MatBadgeSize = 'small' | 'medium' | 'large';
+
+const BADGE_CONTENT_CLASS = 'mat-badge-content';
+
+/** Directive to display a text badge. */
+@Directive({
+  selector: '[matBadge]',
+  inputs: ['disabled: matBadgeDisabled'],
+  host: {
+    'class': 'mat-badge',
+    '[class.mat-badge-overlap]': 'overlap',
+    '[class.mat-badge-above]': 'isAbove()',
+    '[class.mat-badge-below]': '!isAbove()',
+    '[class.mat-badge-before]': '!isAfter()',
+    '[class.mat-badge-after]': 'isAfter()',
+    '[class.mat-badge-small]': 'size === "small"',
+    '[class.mat-badge-medium]': 'size === "medium"',
+    '[class.mat-badge-large]': 'size === "large"',
+    '[class.mat-badge-hidden]': 'hidden || !content',
+    '[class.mat-badge-disabled]': 'disabled',
+  },
+})
+export class OnemrvaMatBadgeComponent extends _MatBadgeBase implements OnInit, OnDestroy, CanDisable {
+  /** The color of the badge. Can be `primary`, `accent`, or `warn`. */
+  @Input('matBadgeColor')
+  get color(): ThemePalette {
+    return this._color;
+  }
+  set color(value: ThemePalette) {
+    this._setColor(value);
+    this._color = value;
+  }
+  private _color: ThemePalette = 'primary';
+
+  /** Whether the badge should overlap its contents or not */
+  @Input('matBadgeOverlap')
+  get overlap(): boolean {
+    return this._overlap;
+  }
+  set overlap(val: BooleanInput) {
+    this._overlap = coerceBooleanProperty(val);
+  }
+  private _overlap: boolean = true;
+
+  /**
+   * Position the badge should reside.
+   * Accepts any combination of 'above'|'below' and 'before'|'after'
+   */
+  @Input('matBadgePosition') position: MatBadgePosition = 'above after';
+
+  /** The content for the badge */
+  @Input('matBadge')
+  get content(): string | number | undefined | null {
+    return this._content;
+  }
+  set content(newContent: string | number | undefined | null) {
+    this._updateRenderedContent(newContent);
+  }
+  private _content: string | number | undefined | null;
+
+  /** Message used to describe the decorated element via aria-describedby */
+  @Input('matBadgeDescription')
+  get description(): string {
+    return this._description;
+  }
+  set description(newDescription: string) {
+    this._updateHostAriaDescription(newDescription);
+  }
+  private _description: string = "";
+
+  /** Size of the badge. Can be 'small', 'medium', or 'large'. */
+  @Input('matBadgeSize') size: MatBadgeSize = 'medium';
+
+  /** Whether the badge is hidden. */
+  @Input('matBadgeHidden')
+  get hidden(): boolean {
+    return this._hidden;
+  }
+  set hidden(val: BooleanInput) {
+    this._hidden = coerceBooleanProperty(val);
+  }
+  private _hidden: boolean = false;
+
+  @HostBinding('class.mat-badge-icon')
+  isIcon:boolean = false;
+
+  /** Unique id for the badge */
+  _id: number = nextId++;
+
+  /** Visible badge element. */
+  private _badgeElement: HTMLElement | undefined;
+
+  /** Whether the OnInit lifecycle hook has run yet */
+  private _isInitialized = false;
+
+  constructor(
+      private _ngZone: NgZone,
+      private _elementRef: ElementRef<HTMLElement>,
+      private _ariaDescriber: AriaDescriber,
+      private _renderer: Renderer2,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
+  ) {
+    super();
+
+    // if (typeof ngDevMode === 'undefined' || ngDevMode) {
+    //   const nativeElement = _elementRef.nativeElement;
+    //   if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
+    //     throw Error('matBadge must be attached to an element node.');
+    //   }
+    // }
+  }
+
+  /** Whether the badge is above the host or not */
+  isAbove(): boolean {
+    return this.position.indexOf('below') === -1;
+  }
+
+  /** Whether the badge is after the host or not */
+  isAfter(): boolean {
+    return this.position.indexOf('before') === -1;
+  }
+
+  /**
+   * Gets the element into which the badge's content is being rendered. Undefined if the element
+   * hasn't been created (e.g. if the badge doesn't have content).
+   */
+  getBadgeElement(): HTMLElement | undefined {
+    return this._badgeElement;
+  }
+
+  ngOnInit() {
+    // We may have server-side rendered badge that we need to clear.
+    // We need to do this in ngOnInit because the full content of the component
+    // on which the badge is attached won't necessarily be in the DOM until this point.
+    this._clearExistingBadges();
+
+    if (this.content && !this._badgeElement) {
+      this._badgeElement = this._createBadgeElement();
+      this._updateRenderedContent(this.content);
+    }
+
+    this._isInitialized = true;
+  }
+
+  ngOnDestroy() {
+    // ViewEngine only: when creating a badge through the Renderer, Angular remembers its index.
+    // We have to destroy it ourselves, otherwise it'll be retained in memory.
+    if (this._renderer.destroyNode) {
+      this._renderer.destroyNode(this._badgeElement);
+    }
+
+    this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.description);
+  }
+
+  /** Creates the badge element */
+  private _createBadgeElement(): HTMLElement {
+    const badgeElement = this._renderer.createElement('span');
+    const activeClass = 'mat-badge-active';
+
+    badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
+
+    // The badge is aria-hidden because we don't want it to appear in the page's navigation
+    // flow. Instead, we use the badge to describe the decorated element with aria-describedby.
+    badgeElement.setAttribute('aria-hidden', 'true');
+    badgeElement.classList.add(BADGE_CONTENT_CLASS);
+
+    if (this._animationMode === 'NoopAnimations') {
+      badgeElement.classList.add('_mat-animation-noopable');
+    }
+
+    this._elementRef.nativeElement.appendChild(badgeElement);
+
+    // animate in after insertion
+    if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
+      this._ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => {
+          badgeElement.classList.add(activeClass);
+        });
+      });
+    } else {
+      badgeElement.classList.add(activeClass);
+    }
+
+    return badgeElement;
+  }
+
+  /** Update the text content of the badge element in the DOM, creating the element if necessary. */
+  private _updateRenderedContent(newContent: string | number | undefined | null): void {
+    let newContentNormalized: string = `${newContent ?? ''}`.trim();
+    //const newContentNormalized: string = '\uf063';
+    if (typeof newContent === 'string' && newContent.substring(0,2) == "\\u"){
+      this.isIcon = true;
+      newContentNormalized = String.fromCodePoint( parseInt(newContent.substring(2, newContent.length), 16)  );
+    } else if (typeof newContent === 'number' || !isNaN(Number(newContent))) {
+      if (typeof newContent === 'string') newContent = parseInt(newContent);
+      else if (newContent === null ||newContent === undefined) newContent = 0;
+      if (newContent >= 100) {
+        newContentNormalized = '99+';
+      }
+    }
+    // Don't create the badge element if the directive isn't initialized because we want to
+    // append the badge element to the *end* of the host element's content for backwards
+    // compatibility.
+    if (this._isInitialized && newContentNormalized && !this._badgeElement) {
+      this._badgeElement = this._createBadgeElement();
+    }
+
+    if (this._badgeElement) {
+      this._badgeElement.textContent = newContentNormalized;
+    }
+
+    this._content = newContentNormalized;
+  }
+
+  /** Updates the host element's aria description via AriaDescriber. */
+  private _updateHostAriaDescription(newDescription: string): void {
+    this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.description);
+    if (newDescription) {
+      this._ariaDescriber.describe(this._elementRef.nativeElement, newDescription);
+    }
+    this._description = newDescription;
+  }
+
+  /** Adds css theme class given the color to the component host */
+  private _setColor(colorPalette: ThemePalette) {
+    const classList = this._elementRef.nativeElement.classList;
+    classList.remove(`mat-badge-${this._color}`);
+    if (colorPalette) {
+      classList.add(`mat-badge-${colorPalette}`);
+    }
+  }
+
+  /** Clears any existing badges that might be left over from server-side rendering. */
+  private _clearExistingBadges() {
+    // Only check direct children of this host element in order to avoid deleting
+    // any badges that might exist in descendant elements.
+    const badges = this._elementRef.nativeElement.querySelectorAll(
+        `:scope > .${BADGE_CONTENT_CLASS}`,
+    );
+    for (const badgeElement of Array.from(badges)) {
+      if (badgeElement !== this._badgeElement) {
+        badgeElement.remove();
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of mat-breadcrumb
+ */
+
+export * from './src/onemrva-mat-breadcrumb.component';
+export * from './src/onemrva-mat-breadcrumb.module';
+export * from './src/onemrva-mat-breadcrumb.service';

package/projects/onemrva/design-system/mat-breadcrumb/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-breadcrumb/src/onemrva-mat-breadcrumb.component.html

@@ -0,0 +1,37 @@
+<ng-container *ngIf="breadcrumbs$ | async as bc">
+  <ul class="onemrva-mat-breadcrumb" *ngIf="bc.length > 0">
+    <li
+      *ngFor="let breadcrumb of bc; let i = index"
+      class="onemrva-mat-breadcrumb-link-container"
+      [ngStyle]="{ display: bc.length <= 6 || i <= 2 ? 'list-item' : 'none' }"
+    >
+      <div [routerLink]="breadcrumb.url" class="onemrva-mat-breadcrumb-link">
+        {{ breadcrumb.label }}
+      </div>
+
+      <mat-icon
+        *ngIf="i < bc.length - 1"
+        class="chevron-right"
+        style="width: 10px"
+        >chevron_right</mat-icon
+      >
+    </li>
+    <li
+      *ngIf="bc.length > 6"
+      class="onemrva-mat-breadcrumb-link-container onemrva-mat-breadcrumb-link-container-hidden"
+    >
+      ...
+      <mat-icon class="chevron-right" style="width: 10px"
+        >chevron_right</mat-icon
+      >
+    </li>
+    <li *ngIf="bc.length > 6" class="onemrva-mat-breadcrumb-link-container">
+      <div
+        [routerLink]="bc[bc.length - 1].url"
+        class="onemrva-mat-breadcrumb-link"
+      >
+        {{ bc[bc.length - 1].label }}
+      </div>
+    </li>
+  </ul>
+</ng-container>

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

@@ -0,0 +1,70 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@use "../../utils";
+
+@mixin breadcrumb($theme) {
+  $font-family: map.get(
+    map.get(map.get($theme, "typography"), "label-button"),
+    "font-family"
+  );
+
+  .onemrva-mat-breadcrumb {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    align-items: baseline;
+
+    .onemrva-mat-breadcrumb-link-container {
+      margin-right: 8px;
+
+      .chevron-right {
+        margin: 0 8px;
+        font-family: "Material Icons";
+        content: "\e5e1";
+
+        font-size: 16px;
+        vertical-align: middle;
+        height: 16px;
+        color: #c5c4cc; // HWKTMP
+        width: 5px;
+      }
+
+      &:not(:last-child) {
+        .onemrva-mat-breadcrumb-link {
+          text-decoration: none;
+          color: #acaab2; // HWKTMP
+          font-weight: 500;
+          display: inline-block;
+          font-family: $font-family;
+        }
+
+        &:hover {
+          .onemrva-mat-breadcrumb-link {
+            text-decoration: underline;
+            color: utils.palette($theme, "primary");
+            cursor: pointer;
+          }
+        }
+      }
+
+      &:last-child {
+        .onemrva-mat-breadcrumb-link {
+          display: inline-block;
+          color: #312f3b;
+          text-decoration: none;
+          font-weight: 500;
+          font-family: $font-family;
+
+          &:hover {
+            cursor: default;
+          }
+        }
+
+        &:hover {
+          cursor: default;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { OnemrvaBreadcrumb } from './onemrva-mat-breadcrumb.model';
+import { OnemrvaMatBreadcrumbService } from './onemrva-mat-breadcrumb.service';
+
+@Component({
+  selector: 'onemrva-mat-breadcrumb',
+  templateUrl: 'onemrva-mat-breadcrumb.component.html',
+})
+export class OnemrvaMatBreadcrumbComponent {
+  breadcrumbs$!: Observable<OnemrvaBreadcrumb[]>;
+
+  constructor(private readonly breadcrumbService: OnemrvaMatBreadcrumbService) {
+    this.breadcrumbs$ = breadcrumbService.breadcrumbs$;
+  }
+}

package/projects/onemrva/design-system/mat-breadcrumb/src/onemrva-mat-breadcrumb.model.ts

@@ -0,0 +1,4 @@
+export interface OnemrvaBreadcrumb {
+    label: string;
+    url: string;
+}

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

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { OnemrvaMatBreadcrumbComponent } from './onemrva-mat-breadcrumb.component';
+
+@NgModule({
+    declarations: [OnemrvaMatBreadcrumbComponent],
+    imports: [CommonModule, MatIconModule, RouterModule],
+    exports: [OnemrvaMatBreadcrumbComponent],
+})
+export class OnemrvaMatBreadcrumbModule {}

package/projects/onemrva/design-system/mat-breadcrumb/src/onemrva-mat-breadcrumb.service.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { OnemrvaBreadcrumb } from './onemrva-mat-breadcrumb.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OnemrvaMatBreadcrumbService {
+  // Subject emitting the breadcrumb hierarchy
+  private readonly _breadcrumbs$ = new BehaviorSubject<OnemrvaBreadcrumb[]>([]);
+
+  // Observable exposing the breadcrumb hierarchy
+  readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+  constructor(private router: Router) {
+    this.router.events
+      .pipe(
+        // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
+        filter((event) => event instanceof NavigationEnd)
+      )
+      .subscribe((event) => {
+        // Construct the breadcrumb hierarchy
+        const root = this.router.routerState.snapshot.root;
+        const breadcrumbs: OnemrvaBreadcrumb[] = [];
+        this.addBreadcrumb(root, [], breadcrumbs);
+
+        // Emit the new hierarchy
+        this._breadcrumbs$.next(breadcrumbs);
+      });
+  }
+
+  private addBreadcrumb(
+    route: ActivatedRouteSnapshot | null,
+    parentUrl: string[],
+    breadcrumbs: OnemrvaBreadcrumb[]
+  ) {
+    if (route) {
+      // Construct the route URL
+      const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+
+      // Add an element for the current route part
+      if (route.data['navigationTitle']) {
+        const url = '/' + routeUrl.join('/');
+        const breadcrumb = {
+          label: route.data['navigationTitle'],
+          url,
+        };
+
+        if (
+          breadcrumbs.length > 0 &&
+          url === breadcrumbs[breadcrumbs.length - 1].url
+        ) {
+          breadcrumbs[breadcrumbs.length - 1] = breadcrumb;
+        } else {
+          breadcrumbs.push(breadcrumb);
+        }
+      }
+
+      // Add another element for the next route part
+      this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'onemrva-mat-clipboard',
+  template: `
+    <span><ng-content></ng-content><mat-icon *ngIf="!checked">content_copy</mat-icon><mat-icon color="success" *ngIf="checked">check</mat-icon></span>
+  `,
+})
+export class OnemrvaMatClipboardComponent {
+  checked: boolean = false;
+
+  constructor(
+    private clipboardService : Clipboard) {
+
+  }
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { OnemrvaMatClipboardComponent } from './onemrva-mat-clipboard.component';
+import {MatIconModule} from "@angular/material/icon";
+import {MatTooltipModule} from "@angular/material/tooltip";
+
+@NgModule({
+  declarations: [OnemrvaMatClipboardComponent],
+  exports: [OnemrvaMatClipboardComponent],
+  imports: [
+    MatIconModule,
+    MatTooltipModule
+  ]
+})
+export class OnemrvaMatClipboardModule {}

package/projects/onemrva/design-system/mat-datepicker-header/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of mat-file upload
+ */
+
+export * from './src/onemrva-mat-datepicker-header.component';

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

@@ -0,0 +1,11 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@mixin datepickerHeader($theme) {
+  $grey900: mat.get-color-from-palette(map-get($theme, "grayscale"), 900);
+
+  a.onemrva-calendar-header-today {
+    color: $grey900;
+    text-decoration: none;
+  }
+}