@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,117 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  forwardRef,
+  HostBinding,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { OnemrvaMatTaskTitleComponent } from './onemrva-mat-task-title.component';
+import { OnemrvaMatTaskContentComponent } from './onemrva-mat-task-content.component';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'onemrva-mat-task',
+  templateUrl: './onemrva-mat-task.component.html',
+  styleUrls: ['onemrva-mat-task.component.scss'],
+})
+export class OnemrvaMatTaskComponent implements AfterViewInit {
+  @Input() customNgClass: any;
+
+  @Input() icon: string | undefined;
+  @Input() form: FormControl | undefined;
+  @Input() bubble: string | undefined;
+  @Input() arialLabel: string = 'select';
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-disabled')
+  @Input()
+  disabled: boolean = false;
+
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
+
+  @ContentChild(OnemrvaMatTaskTitleComponent)
+  title?: OnemrvaMatTaskTitleComponent;
+  @ContentChild(OnemrvaMatTaskContentComponent)
+  content?: OnemrvaMatTaskContentComponent;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    if (this.disabled) {
+      this.form?.disable();
+    }
+    //this.customNgClass = this.customNgClass.merge(['onemrva-mat-task']);
+    this.cd.detectChanges();
+  }
+
+  /**
+   * @hidden
+   * @internal
+   */
+  private _color: OnemrvaMatColor = OnemrvaMatColor.NONE;
+
+  /**
+   *
+   * @param value
+   */
+  public set color(value: OnemrvaMatColor) {
+    this._color = value;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-accent')
+  public get _colorAccent(): boolean {
+    return this.color === OnemrvaMatColor.ACCENT;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-primary')
+  public get _isPrimary(): boolean {
+    return this.color === OnemrvaMatColor.PRIMARY;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-accent')
+  public get _isAccent(): boolean {
+    return this.color === OnemrvaMatColor.ACCENT;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-error')
+  public get _isError(): boolean {
+    return this.color === OnemrvaMatColor.ERROR;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-warn')
+  public get _isWarn(): boolean {
+    return this.color === OnemrvaMatColor.WARN;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-success')
+  public get _isSuccess(): boolean {
+    return this.color === OnemrvaMatColor.SUCCESS;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-info')
+  public get _isInfo(): boolean {
+    return this.color === OnemrvaMatColor.INFO;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-grayscale')
+  public get _isGrayscale(): boolean {
+    return this.color === OnemrvaMatColor.GRAYSCALE;
+  }
+
+  @Input()
+  public get color(): OnemrvaMatColor {
+    return this._color;
+  }
+
+  public matColor() {
+    if (this.color === OnemrvaMatColor.NONE) return '';
+    return `mat-${this.color}`;
+  }
+}

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

@@ -0,0 +1,6 @@
+export * from './src/onemrva-mat-timepicker.module';
+export * from './src/onemrva-mat-timepicker.component';
+export * from './src/timepicker-toggle/timepicker-toggle.component';
+export * from './src/timepicker-dialog/timepicker-dialog.component';
+export * from './src/clock/clock.component';
+export * from './src/timepicker.directive';

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

@@ -0,0 +1,42 @@
+<div class="root">
+  <div class="circle" (touchmove)="handleTouchMove($event)" (mousemove)="handleMouseMove($event)"
+    (touchstart)="disableAnimatedPointer()" (mousedown)="disableAnimatedPointer()" (touchend)="handleTouchEnd($event)"
+    (mouseup)="enableAnimatedPointer()" (click)="handleClick($event)">
+    <div class="pointer-container"
+      [ngClass]="{ 'small-pointer':  viewType === 'hours' && (formattedValue === 0 || formattedValue > 12), 'animated-pointer': !touching }"
+      [style.transform]="'rotate(' + angle + 'deg)'">
+      <button mat-mini-fab [color]="color" class="inner-dot"></button>
+      <mat-toolbar [color]="color" class="pointer">
+        <button mat-mini-fab [color]="color" class="outer-dot"
+          [ngClass]=" { 'outer-dot-odd': viewType === 'minutes' && formattedValue % 5 !== 0 }">
+          <ng-container *ngIf="viewType === 'minutes' && formattedValue % 5 !== 0">·</ng-container>
+        </button>
+      </mat-toolbar>
+    </div>
+    <ng-container *ngFor="let digit of minuteDots;">
+      <button mat-mini-fab class="number minute-dot"
+        [ngClass]="{ 'selected': formattedValue === digit.display || (digit.display === 0 && formattedValue === 0), 'disabled': !isAvailable(digit.display === 60 ? 0 : digit.display)}"
+        [style.transform]="'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'">
+        <ng-container *ngIf="digit.display % 5 !== 0">·</ng-container>
+      </button>
+    </ng-container>
+    <ng-container *ngFor="let digit of numbers;">
+      <button mat-mini-fab [color]="color" class="number"
+        [ngClass]="{ 'selected': formattedValue === digit.display || (digit.display === 60 && formattedValue === 0), 'disabled': !isAvailable(digit.display === 60 ? 0 : digit.display)}"
+        [style.transform]="'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'">
+        <ng-template #hoursTemplate>{{ digit.display }}</ng-template>
+        <ng-template #minutesTemplate>{{ digit.display === 60 ? '00' : digit.display }}</ng-template>
+        <ng-container *ngIf="viewType === 'minutes' then minutesTemplate else hoursTemplate;"></ng-container>
+      </button>
+
+    </ng-container>
+    <ng-container *ngFor="let digit of secondaryNumbers;">
+      <button mat-mini-fab [color]="color" class="number small-number"
+        [ngClass]="{ 'selected': formattedValue === digit.display || (digit.display === 24 && formattedValue === 0), 'disabled': !isAvailable(digit.display === 24 ? 0 : digit.display)}"
+        [style.transform]="'translate(' + digit.translateX + 'px, ' + digit.translateY + 'px)'">
+        {{ digit.display === 24 ? '00' : digit.display }}
+      </button>
+
+    </ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,129 @@
+.root {
+  width: 256px;
+  height: 256px;
+  cursor: default;
+}
+
+.circle {
+  width: 256px;
+  height: 256px;
+  border-radius: 50%;
+  position: relative;
+  background: #ededed;
+  cursor: pointer;
+}
+
+.mat-mdc-mini-fab {
+  &.number {
+    width: 32px;
+    height: 32px;
+    left: calc(50% - 16px);
+    top: calc(50% - 16px);
+    position: absolute;
+    text-align: center;
+    line-height: 32px;
+    cursor: pointer;
+    font-size: 14px;
+    pointer-events: none;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: transparent;
+    box-shadow: none;
+
+    &.disabled {
+      color: rgba(1, 1, 1, 0.1);
+    }
+
+    &:not(.selected):not(.disabled) {
+      color: rgba(0, 0, 0, 0.87);
+    }
+
+    &:not(.disabled).minute-dot {
+      color: rgba(1, 1, 1, 0.7);
+      &.selected {
+        color: transparent;
+      }
+    }
+  }
+}
+
+.small-number {
+  font-size: 12px;
+
+  &:not(.selected):not(.disabled) {
+    color: rgba(0, 0, 0, 0.67);
+  }
+}
+
+.pointer-container {
+  width: calc(50% - 20px);
+  height: 2;
+  position: absolute;
+  left: 50%;
+  top: calc(50% - 1px);
+  transform-origin: left center;
+  pointer-events: none;
+
+  &.disabled {
+    * {
+      background-color: transparent;
+    }
+  }
+}
+
+.pointer {
+  height: 1px;
+}
+
+.animated-pointer {
+  transition: all 200ms ease-out;
+}
+
+.pointer-container {
+  &.small-pointer {
+    width: calc(50% - 52px);
+    .mini-fab {
+    }
+    mat-toolbar {
+      padding: 0 16px;
+    }
+  }
+  mat-toolbar {
+    padding: 0 54px;
+    button {
+    }
+  }
+}
+
+.inner-dot {
+  position: absolute;
+  top: -3px;
+  left: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
+}
+
+.outer-dot {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  right: -16px;
+  box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+
+.outer-dot-odd {
+  box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}

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

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

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

@@ -0,0 +1,273 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import {
+  ClockViewType,
+  ClockNumber,
+  IAllowed24HourMap,
+} from '../interfaces-and-types';
+import { getIsAvailabeFn } from '../util';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+  selector: 'mat-clock',
+  templateUrl: './clock.component.html',
+  styleUrls: ['./clock.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockComponent implements OnChanges {
+  @Input() viewType: ClockViewType = 'hours';
+  @Input() color: ThemePalette = 'primary';
+  @Input() formattedValue: number = 0;
+  @Input() minDate!: Date;
+  @Input() maxDate!: Date;
+  @Input() formattedHours: number = 0;
+  @Input() minutes!: number;
+  @Output() changeEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Output() unavailableSelection: EventEmitter<any> = new EventEmitter<any>();
+  @Output() invalidSelection: EventEmitter<any> = new EventEmitter<any>();
+
+  @Input() allowed24HourMap!: IAllowed24HourMap;
+
+  isFormattedValueAllowed = true;
+
+  isAvailableFn?: ReturnType<typeof getIsAvailabeFn>;
+
+  touching = false;
+  angle?: number;
+  numbers: ClockNumber[] = [];
+  secondaryNumbers: ClockNumber[] = [];
+  minuteDots: ClockNumber[] = [];
+  invalidMeridiemEmitted = true;
+
+  initIsAllowedFn() {
+    if (!this.allowed24HourMap) {
+      return;
+    }
+    this.isAvailableFn = getIsAvailabeFn(this.allowed24HourMap);
+  }
+
+  isAvailable(value: number) {
+    return this.isAvailableFn
+      ? this.isAvailableFn(value, this.viewType, this.formattedHours)
+      : true;
+  }
+
+  ngOnChanges(simpleChanges: SimpleChanges) {
+    if (
+      simpleChanges['allowed24HourMap'] ||
+      (simpleChanges['mode'] && !simpleChanges['mode'].firstChange)
+    ) {
+      this.initIsAllowedFn();
+    }
+
+    this.calculateAngule();
+    this.setNumbers();
+
+    if (simpleChanges['formattedValue'] && this.allowed24HourMap) {
+      this.isFormattedValueAllowed = this.isAvailable(this.formattedValue);
+    }
+
+    const isSelectedTimeAvailable = this.isAvailableFn
+      ? this.isAvailableFn(this.formattedValue, 'minutes', this.formattedHours)
+      : true;
+
+    if (this.viewType === 'minutes' && this.isAvailableFn) {
+      const areMinitesAvailable = this.isAvailableFn(
+        this.minutes,
+        'minutes',
+        this.formattedHours
+      );
+      if (!areMinitesAvailable) {
+        if (this.minDate && this.minDate.getMinutes() > this.minutes) {
+          setTimeout(() => {
+            this.changeEvent.emit({
+              value: this.minDate.getMinutes(),
+              type: 'minutes',
+            });
+          });
+        } else {
+          setTimeout(() => {
+            this.changeEvent.emit({
+              value: this.maxDate.getMinutes(),
+              type: 'minutes',
+            });
+          });
+        }
+      }
+    }
+
+    if (isSelectedTimeAvailable && this.invalidMeridiemEmitted) {
+      this.invalidMeridiemEmitted = false;
+    }
+
+    this.invalidSelection.emit(!isSelectedTimeAvailable);
+  }
+
+  calculateAngule() {
+    this.angle = this.getPointerAngle(this.formattedValue, this.viewType);
+  }
+
+  setNumbers() {
+    if (this.viewType === 'hours') {
+      // if (this.mode === '12h') {
+      //   const meridiem : string = this.isPm ? 'pm' : 'am';
+      //   const isAllowedFn = this.allowed12HourMap ? (num : number) => this.allowed12HourMap[meridiem][num + 1][0] : undefined;
+      //   this.numbers = this.getNumbers(12, { size: 256 }, isAllowedFn);
+      //   this.secondaryNumbers = [];
+      //   this.minuteDots = [];
+      // } else if (this.mode === '24h') {
+      const isAllowedFn = this.allowed24HourMap
+        ? (num: number) => this.allowed24HourMap[num][0]
+        : undefined;
+      this.numbers = this.getNumbers(12, { size: 256 }, isAllowedFn);
+      this.secondaryNumbers = this.getNumbers(
+        12,
+        { size: 256 - 64, start: 13 },
+        isAllowedFn
+      );
+      this.minuteDots = [];
+      //}
+    } else {
+      //const meridiem : string = this.isPm ? 'pm' : 'am';
+      const isAllowedFn =
+        // !!this.allowed12HourMap ? (num : number) => this.allowed12HourMap[meridiem][this.formattedHours][num] :
+        !!this.allowed24HourMap
+          ? (num: number) => this.allowed24HourMap[this.formattedHours][num]
+          : undefined;
+
+      this.numbers = this.getNumbers(
+        12,
+        { size: 256, start: 5, step: 5 },
+        isAllowedFn
+      );
+      this.minuteDots = this.getNumbers(60, { size: 256, start: 13 }).map(
+        (digit) => {
+          if (digit.display <= 59) {
+            digit.allowed = isAllowedFn ? isAllowedFn(digit.display) : true;
+            return digit;
+          }
+          digit.display = digit.display - 60;
+          digit.allowed = isAllowedFn ? isAllowedFn(digit.display) : true;
+          return digit;
+        }
+      );
+      this.secondaryNumbers = [];
+    }
+  }
+
+  disableAnimatedPointer() {
+    this.touching = true;
+  }
+
+  enableAnimatedPointer() {
+    this.touching = false;
+  }
+
+  handleTouchMove = (e: any) => {
+    e.preventDefault(); // prevent scrolling behind the clock on iOS
+    const rect = e.target.getBoundingClientRect();
+    this.movePointer(
+      e.changedTouches[0].clientX - rect.left,
+      e.changedTouches[0].clientY - rect.top
+    );
+  };
+
+  handleTouchEnd(e: any) {
+    this.handleTouchMove(e);
+    this.enableAnimatedPointer();
+  }
+
+  handleMouseMove(e: any) {
+    // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari
+    if (e.buttons === 1 || e.which === 1) {
+      const rect = e.target.getBoundingClientRect();
+      this.movePointer(e.clientX - rect.left, e.clientY - rect.top);
+    }
+  }
+
+  handleClick(e: any) {
+    const rect = e.target.getBoundingClientRect();
+    this.movePointer(e.clientX - rect.left, e.clientY - rect.top);
+  }
+
+  movePointer(x: number, y: number) {
+    const value = this.getPointerValue(x, y, 256);
+    if (!this.isAvailable(value)) {
+      this.unavailableSelection.emit();
+      return;
+    }
+    if (value !== this.formattedValue) {
+      this.changeEvent.emit({
+        value,
+        type: this.viewType !== 'minutes' ? 'hours' : 'minutes',
+      });
+      if (this.viewType !== 'minutes') {
+        if (!this.isAvailable(value)) {
+          if (this.minDate && this.isAvailable(value)) {
+            this.changeEvent.emit({
+              value: this.minDate.getMinutes(),
+              type: 'minutes',
+            });
+          } else if (this.maxDate && this.isAvailable(value)) {
+            this.changeEvent.emit({
+              value: this.maxDate.getMinutes(),
+              type: 'minutes',
+            });
+          }
+        }
+      }
+    }
+  }
+
+  getNumbers(
+    count: number,
+    { size = 0, start = 1, step = 1 },
+    isAllowedFn?: (num: number) => boolean
+  ) {
+    return Array.apply(null, Array(count)).map((_, i) => ({
+      display: i * step + start,
+      translateX: (size / 2 - 20) * Math.cos((2 * Math.PI * (i - 2)) / count),
+      translateY: (size / 2 - 20) * Math.sin((2 * Math.PI * (i - 2)) / count),
+      allowed: isAllowedFn ? isAllowedFn(i) : true,
+    }));
+  }
+
+  getPointerAngle(value: number, mode: ClockViewType) {
+    if (this.viewType === 'hours') {
+      return (360 / 12) * ((value % 12) - 3);
+    }
+    return (360 / 60) * (value - 15);
+  }
+
+  getPointerValue(x: number, y: number, size: number) {
+    let value;
+    let angle = (Math.atan2(size / 2 - x, size / 2 - y) / Math.PI) * 180;
+    if (angle < 0) {
+      angle = 360 + angle;
+    }
+
+    if (this.viewType === 'hours') {
+      const radius = Math.sqrt(
+        Math.pow(size / 2 - x, 2) + Math.pow(size / 2 - y, 2)
+      );
+      value = 12 - Math.round((angle * 12) / 360);
+      if (value === 0) {
+        value = 12;
+      }
+      if (radius < size / 2 - 32) {
+        value = value === 12 ? 0 : value + 12;
+      }
+      return value;
+    }
+
+    value = Math.round(60 - (60 * angle) / 360);
+    return value === 60 ? 0 : value;
+  }
+}

package/projects/onemrva/design-system/mat-timepicker/src/interfaces-and-types.ts

@@ -0,0 +1,16 @@
+export type ClockViewType = 'hours' | 'minutes';
+
+export interface ClockNumber {
+  display: number;
+  translateX: number;
+  translateY: number;
+  allowed: boolean;
+}
+
+export interface ITimeData {
+  minutes: number;
+  hours: number;
+  meridiem: string;
+}
+
+export interface IAllowed24HourMap { [hour: number]: { [minute: number]: boolean; }; }