@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,128 @@
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { OnemrvaMatTableOfContentService } from './onemrva-mat-table-of-content.service';
+import { Observable, map, tap } from 'rxjs';
+import {
+  OnemrvaMatTocAnchor,
+  OnemrvaMatTocAnchorLevel,
+  OnemrvaMatTocAnchorStatus,
+} from './onemrva-mat-toc-anchor.model';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'onemrva-mat-table-of-content',
+  templateUrl: 'onemrva-mat-table-of-content.component.html',
+  standalone: true,
+  imports: [MatListModule, TranslateModule, CommonModule, MatIconModule],
+})
+export class OnemrvaMatTableOfContentComponent implements OnInit, OnDestroy {
+  @Input()
+  titleKey!: string;
+
+  @Input()
+  tocName!: string;
+
+  @HostBinding('attr.data-cy')
+  @Input()
+  dataCy: string = 'onemrva-mat-toc';
+
+  // @HostBinding('attr.aria-label')
+  // @Input()
+  // get ariaLabel() {
+  //   if (!this.titleKey) return null;
+  //   return this.translate.instant(this.titleKey);
+  // }
+
+  @Input()
+  tableOfContentName!: string;
+
+  @Input()
+  scrollShift: number = 0;
+
+  toc$!: Observable<OnemrvaMatTocAnchor[]>;
+
+  activePath: string = '';
+  timerId: any;
+
+  @HostListener('window:scroll', ['$event']) onScrollEvent($event: any) {
+    this.throttledUpdateActivePath($event);
+  }
+
+  @HostListener('window:resize', ['$event']) onResizeEvent($event: any) {
+    this.throttledUpdateActivePath($event);
+  }
+
+  level = OnemrvaMatTocAnchorLevel;
+  status = OnemrvaMatTocAnchorStatus;
+
+  constructor(private tocService: OnemrvaMatTableOfContentService) {}
+
+  ngOnInit(): void {
+    this.toc$ = this.tocService.toc$.pipe(
+      map((tocMap) => tocMap[this.tocName].filter((entry) => !entry.hidden)),
+      tap((toc) => {
+        if (!toc) this.titleKey = 'tocName.notFound';
+        else this.activePath = toc[0].path;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.tocService.resetToc();
+  }
+
+  goTo(anchor: OnemrvaMatTocAnchor) {
+    let e = document.querySelector("[href='" + anchor.path + "']")!;
+    let y = e.getBoundingClientRect().y;
+
+    window.scroll({
+      top: window.scrollY + y - this.scrollShift,
+      behavior: 'smooth',
+    });
+
+    // this.activePath = anchor.path;
+  }
+
+  throttledUpdateActivePath($event: any) {
+    if (this.timerId) return;
+
+    this.timerId = setTimeout(() => {
+      this.updateActivePath($event);
+      this.timerId = undefined;
+    }, 200);
+  }
+
+  updateActivePath(e: any) {
+    const scrollPosition = window.scrollY;
+
+    let prevElement: { href: string; top: number } = { href: '', top: 0 };
+
+    const anchors = document.querySelectorAll('.onemrva-mat-toc-anchor');
+    for (let i = 0; i < anchors.length; i++) {
+      let anchor = anchors[i];
+      let top = anchor.getBoundingClientRect().top - this.scrollShift;
+      let href: string = anchor.getAttribute('href')!;
+
+      if (top >= 0) {
+        if (prevElement.top < 0) {
+          this.activePath =
+            (top + prevElement.top) / 2 > 0 ? prevElement.href : href;
+        } else {
+          this.activePath = anchor.getAttribute('href')!;
+        }
+        return;
+      } else {
+        prevElement = { top, href };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import {
+  OnInit,
+  Directive,
+  Input,
+  HostBinding,
+  AfterViewInit,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { OnemrvaMatTableOfContentService } from './onemrva-mat-table-of-content.service';
+import { OnemrvaMatTocAnchor } from './onemrva-mat-toc-anchor.model';
+import { TranslateService } from '@ngx-translate/core';
+
+/**
+ * For accessibility purpose, aria-label and will be displayed
+ */
+
+@Directive({
+  selector: '[onemrvaMatToc]',
+  standalone: true,
+})
+export class OnemrvaMatTableOfContentDirective
+  implements OnInit, AfterViewInit
+{
+  @Input()
+  onemrvaMatToc!: OnemrvaMatTocAnchor;
+
+  @HostBinding('attr.role')
+  role: string = 'link';
+
+  @HostBinding('attr.class')
+  clazz: string = 'onemrva-mat-toc-anchor';
+
+  @HostBinding('attr.aria-label')
+  get ariaLabel() {
+    return this.translateService.instant(this.onemrvaMatToc?.titleKey);
+  }
+
+  @Input()
+  hiddenInToc = false;
+
+  @HostBinding('attr.href')
+  get href() {
+    if (
+      this.onemrvaMatToc &&
+      this.onemrvaMatToc.path &&
+      this.onemrvaMatToc.path[0] !== '#'
+    )
+      return '#' + this.onemrvaMatToc?.path;
+    return this.onemrvaMatToc?.path;
+  }
+
+  constructor(
+    private tocService: OnemrvaMatTableOfContentService,
+    private cd: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.tocService.addAnchor({ ...this.onemrvaMatToc, directive: this });
+
+    // console.log('   HWK this.hidden', this.hidden);
+  }
+
+  ngAfterViewInit(): void {
+    this.cd.detectChanges();
+  }
+}

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

@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import {
+  OnemrvaMatTocAnchor,
+  OnemrvaMatToc,
+  OnemrvaMatTocAnchorLevel,
+} from './onemrva-mat-toc-anchor.model';
+
+@Injectable()
+export class OnemrvaMatTableOfContentService {
+  private _toc: OnemrvaMatToc = {};
+  private _toc$: BehaviorSubject<OnemrvaMatToc> = new BehaviorSubject({});
+  toc$: Observable<OnemrvaMatToc> = this._toc$.asObservable();
+
+  addAnchor(anchor: OnemrvaMatTocAnchor) {
+    if (!anchor.level) {
+      anchor.level = OnemrvaMatTocAnchorLevel.SECTION;
+    }
+
+    if (!this._toc[anchor.tocName])
+      this._toc = { ...this._toc, [anchor.tocName]: [anchor] };
+    else if (
+      this._toc[anchor.tocName].findIndex((a) => anchor.path === a.path) < 0
+    ) {
+      let idx = -1;
+      if (anchor.order) {
+        idx = this._toc[anchor.tocName].findIndex(
+          (a) => a.order && anchor.order! < a.order
+        );
+      }
+
+      const newToc = [...this._toc[anchor.tocName]];
+      if (idx >= 0) {
+        newToc.splice(idx, 0, anchor);
+      } else {
+        newToc.push(anchor);
+      }
+      this._toc = {
+        ...this._toc,
+        [anchor.tocName]: newToc,
+      };
+    }
+
+    this._toc$.next(this._toc);
+  }
+
+  resetToc() {
+    this._toc = {};
+    this._toc$.next(this._toc);
+  }
+}

package/projects/onemrva/design-system/mat-table-of-content/src/onemrva-mat-toc-anchor.model.ts

@@ -0,0 +1,24 @@
+export enum OnemrvaMatTocAnchorStatus {
+  CHECKMARK,
+  WARNING,
+}
+
+export enum OnemrvaMatTocAnchorLevel {
+  SECTION,
+  SUBSECTION,
+}
+
+export interface OnemrvaMatTocAnchor {
+  tocName: string;
+  titleKey: string;
+  path: string;
+  order?: number; // You can manually set the order of your links
+  status?: OnemrvaMatTocAnchorStatus; // checkmarck add a checkmark icon at the end of the line. Warning adds an exclamation mark
+  level?: OnemrvaMatTocAnchorLevel; // Section level by default
+  hidden?: boolean;
+  directive?: any;
+}
+
+export interface OnemrvaMatToc {
+  [tocName: string]: OnemrvaMatTocAnchor[];
+}

package/projects/onemrva/design-system/mat-task-list/index.ts

@@ -0,0 +1,5 @@
+export * from './src/onemrva-mat-task-list.module';
+export * from './src/onemrva-mat-task-list.component';
+export * from './src/onemrva-mat-task-title.component';
+export * from './src/onemrva-mat-task-content.component';
+export * from './src/onemrva-mat-task.component';

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

@@ -0,0 +1,12 @@
+import {Component, Input, TemplateRef, ViewChild} from "@angular/core";
+
+@Component({
+    selector: 'onemrva-mat-task-content',
+    templateUrl: './onemrva-mat-task-content.html',
+})
+export class OnemrvaMatTaskContentComponent {
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+}

package/projects/onemrva/design-system/mat-task-list/src/onemrva-mat-task-content.html

@@ -0,0 +1,5 @@
+<ng-template>
+    <div class="onemrva-mat-task-content" [ngClass]="customNgClass">
+        <ng-content ></ng-content>
+    </div>
+</ng-template>

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,150 @@
+@use '../../utils' as utils;
+
+@mixin taskList($theme) {
+
+  $panel-border-radius: 16px;
+  $panel-margin: 16px;
+  $panel-border-color: utils.palette($theme, 'primary', 50);
+  $panel-padding: 24px;
+
+  // Get the primary color palette from the color-config.
+  $primary: utils.palette($theme, 'primary');
+  onemrva-mat-task {
+    border-radius: $panel-border-radius;
+    border: 1px solid $panel-border-color;
+    padding: $panel-padding;
+    display: block;
+    position: relative;
+    margin-bottom: $panel-margin;
+
+    .onemrva-mat-task-content,
+    .onemrva-mat-task-title {
+      margin-left: 80px;
+    }
+
+    .onemrva-mat-task-content {
+      margin-top: 16px;
+
+      p:last-child {
+        margin: 0;
+      }
+    }
+
+    .onemrva-mat-task-title {
+      font-family: 'Poppins', sans-serif;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 35px;
+    }
+
+    .onemrva-mat-task-icon {
+      float: left;
+      position: absolute;
+      top: 50%;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      width: 50px;
+      text-align: center;
+
+      .mat-checkbox .mat-checkbox-ripple {
+        left: calc(50% - 10px);
+        top: calc(50% - 10px);
+        height: 20px;
+        width: 20px;
+      }
+
+      span.bubble {
+        display: block;
+        text-align: center;
+        color: utils.palette($theme, 'primary', '500-contrast');
+        font-size: 24px;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        border: 2px solid utils.palette($theme, 'primary', '500-contrast');
+        background: $primary;
+        border-radius: 50%;
+        outline: 1px solid $primary;
+
+        mat-icon {
+          font-size: 24px;
+          margin-top: 8px;
+        }
+      }
+    }
+
+    &.mat-primary {
+      @include taskStyle($theme, 'primary');
+    }
+
+    &.mat-accent {
+      @include taskStyle($theme, 'accent');
+    }
+
+    &.mat-warn {
+      @include taskStyle($theme, 'warn');
+    }
+
+    &.mat-grayscale {
+      @include taskStyle($theme, 'grayscale');
+    }
+
+    &.mat-info {
+      @include taskStyle($theme, 'info');
+    }
+
+    &.mat-success {
+      @include taskStyle($theme, 'success');
+    }
+
+    &.mat-error {
+      @include taskStyle($theme, 'error');
+    }
+
+
+    &.mat-disabled {
+      .onemrva-mat-task-icon {
+        mat-icon {
+          color: utils.palette($theme, 'grayscale', '400-contrast');
+        }
+
+        span {
+          mat-icon {
+            color: utils.palette($theme, 'grayscale', '500-contrast');
+          }
+
+          color: utils.palette($theme, 'grayscale', '500-contrast');
+          background: utils.palette($theme, 'grayscale', 400);
+          outline: 1px solid utils.palette($theme, 'grayscale', 400);
+        }
+      }
+      .onemrva-mat-task-title, .onemrva-mat-task-content {
+        color: utils.palette($theme, 'grayscale', 400);
+      }
+    }
+  }
+}
+
+@mixin taskStyle($theme, $color, $weight: 500) {
+  border: none;
+  background: utils.palette($theme, $color, 50);
+
+  .onemrva-mat-task-title {
+    color: utils.palette($theme, $color, $weight);
+  }
+  .onemrva-mat-task-icon {
+    mat-icon {
+      color: utils.palette($theme, $color, $weight);
+    }
+
+    span {
+      mat-icon {
+        color: utils.palette($theme, $color, '500-contrast');
+      }
+      color: utils.palette($theme, $color, '500-contrast');
+      background: utils.palette($theme, $color, $weight);
+      outline: 1px solid utils.palette($theme, $color, $weight);
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  HostBinding,
+  Input,
+  QueryList,
+} from '@angular/core';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { OnemrvaMatTaskComponent } from './onemrva-mat-task.component';
+
+let NEXT_ID = 0;
+
+@Component({
+  selector: 'onemrva-mat-task-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './onemrva-mat-task-list.component.html',
+})
+export class OnemrvaMatTaskListComponent
+  implements AfterViewInit, AfterContentInit
+{
+  @HostBinding('attr.id')
+  @Input()
+  public id = `onemrva-mat-task-list-${NEXT_ID++}`;
+
+  @HostBinding('attr.data-cy')
+  @Input()
+  data_cy: string = 'onemrva-mat-task-list';
+
+  @ContentChildren(OnemrvaMatTaskComponent, {
+    descendants: true,
+  })
+  _tasks?: QueryList<OnemrvaMatTaskComponent>;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+
+  ngAfterContentInit(): void {
+    // this.tasks?.forEach((task) => {
+    //  // task.
+    // });
+  }
+}

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

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { OnemrvaMatTaskListComponent } from './onemrva-mat-task-list.component';
+import { OnemrvaMatTaskTitleComponent } from './onemrva-mat-task-title.component';
+import { OnemrvaMatTaskContentComponent } from './onemrva-mat-task-content.component';
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatTaskComponent } from './onemrva-mat-task.component';
+import {MatIconModule} from "@angular/material/icon";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {ReactiveFormsModule} from "@angular/forms";
+
+@NgModule({
+    declarations: [
+        OnemrvaMatTaskListComponent,
+        OnemrvaMatTaskTitleComponent,
+        OnemrvaMatTaskContentComponent,
+        OnemrvaMatTaskComponent,
+    ],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatCheckboxModule,
+    ReactiveFormsModule
+  ],
+    exports: [
+        OnemrvaMatTaskListComponent,
+        OnemrvaMatTaskTitleComponent,
+        OnemrvaMatTaskContentComponent,
+        OnemrvaMatTaskComponent,
+    ],
+})
+export class OnemrvaMatTaskListModule {}

package/projects/onemrva/design-system/mat-task-list/src/onemrva-mat-task-title.component.ts

@@ -0,0 +1,18 @@
+import {AfterViewInit, ChangeDetectorRef, Component, ContentChild, Input, TemplateRef, ViewChild} from "@angular/core";
+
+
+@Component({
+    selector: 'onemrva-mat-task-title',
+    templateUrl: './onemrva-mat-task-title.html',
+})
+export class OnemrvaMatTaskTitleComponent implements AfterViewInit{
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+    constructor(private cd: ChangeDetectorRef) {}
+
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
+}

package/projects/onemrva/design-system/mat-task-list/src/onemrva-mat-task-title.html

@@ -0,0 +1,5 @@
+<ng-template>
+    <div class="onemrva-mat-task-title" [ngClass]="customNgClass">
+        <ng-content></ng-content>
+    </div>
+</ng-template>

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

@@ -0,0 +1,17 @@
+  <div class="onemrva-mat-task-icon">
+    <ng-container *ngIf="icon !== undefined">
+      <span class="bubble"><mat-icon >{{ icon }}</mat-icon></span>
+    </ng-container>
+    <ng-container *ngIf="form !== undefined">
+      <mat-checkbox [disabled]="true" [formControl]="form" [aria-label]="arialLabel"></mat-checkbox>
+    </ng-container>
+    <ng-container *ngIf="bubble !== undefined">
+      <span class="bubble">{{ bubble }}</span>
+    </ng-container>
+  </div>
+  <ng-container *ngIf="title?.template as tpl">
+    <ng-container *ngTemplateOutlet="tpl"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="content?.template as tpl">
+      <ng-container *ngTemplateOutlet="tpl"></ng-container>
+  </ng-container>