@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/mat-timepicker/src/clock/clock.component.ts

@@ -1,274 +0,0 @@
-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,
-  ) {
-    // eslint-disable-next-line
-    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/mat-timepicker/src/interfaces-and-types.ts

@@ -1,18 +0,0 @@
-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 };
-}

package/mat-timepicker/src/onemrva-mat-timepicker.component.ts

@@ -1,300 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnDestroy,
-  Output,
-} from '@angular/core';
-import {
-  OnemrvaMatColor,
-  OnemrvaMatSize,
-} from '@onemrvapublic/design-system/utils';
-import { MatTimepickerComponentDialogComponent } from './timepicker-dialog/timepicker-dialog.component';
-import { Subject } from 'rxjs';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { MatTimepickerDirective } from './timepicker.directive';
-import { ThemePalette } from '@angular/material/core';
-import { first, takeUntil } from 'rxjs/operators';
-
-let NEXT_ID = 0;
-
-@Component({
-  selector: 'mat-timepicker',
-  templateUrl: 'onemrva-mat-timepicker.component.html',
-})
-export class OnemrvaMatTimepickerComponent implements OnDestroy {
-  public modalRef!: MatDialogRef<MatTimepickerComponentDialogComponent>;
-  private onChangeFn: any;
-  private _value!: Date;
-
-  get value(): Date {
-    return this._value;
-  }
-
-  set value(value: Date) {
-    this._value = value;
-  }
-
-  private isAlive: Subject<any> = new Subject<any>();
-
-  constructor(public dialog: MatDialog) {}
-
-  opened: boolean = false;
-
-  public setTimepickerInput(t: MatTimepickerDirective) {
-    this.timepickerInput = t;
-  }
-
-  timepickerInput: any;
-
-  /** Emits when the timepicker's state changes. */
-  readonly stateChanges = new Subject<void>();
-
-  // eslint-disable-next-line @angular-eslint/no-output-rename
-  @Output('opened') readonly openedStream = new EventEmitter<void>();
-
-  // eslint-disable-next-line @angular-eslint/no-output-rename
-  @Output('closed') readonly closedStream = new EventEmitter<void>();
-
-  /**
-   * Returns the `aria-label` attribute of the element.
-   *
-   * @example
-   * ```typescript
-   * let timepickerLabel = this.timepicker.ariaLabel;
-   * ```
-   *
-   */
-  @HostBinding('attr.aria-label')
-  public ariaLabel = '';
-
-  @Input()
-  public dialogLabel = 'Pick a Time';
-
-  /**
-   * Returns the `role` attribute of the element.
-   *
-   * @example
-   * ```typescript
-   * let timepickerRole = this.timepicker.role;
-   * ```
-   */
-  @HostBinding('attr.role')
-  public role = '';
-
-  /**
-   * Host `class.onemrva-mat-timepicker` binding.
-   *
-   * @hidden
-   * @internal
-   */
-  @HostBinding('class.onemrva-mat-timepicker')
-  public cssClass = 'onemrva-mat-timepicker';
-
-  /**
-   * Sets the `id` of the element. If not set, the first component instance will have `id` = `"onemrva-mat-timepicker-0"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
-   * ```
-   */
-  @HostBinding('attr.id')
-  @Input()
-  public id = `onemrva-mat-timepicker-${NEXT_ID++}`;
-
-  /**
-   * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-timepicker-0"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-timepicker id="my-first-timepicker"></onemrva-mat-timepicker>
-   * ```
-   */
-  @HostBinding('attr.data-cy')
-  @Input()
-  public dataCy = `onemrva-mat-timepicker-${NEXT_ID++}`;
-
-  /**
-   * @hidden
-   * @internal
-   */
-  private _color: ThemePalette = 'primary';
-
-  /**
-   * Returns the color of the element.
-   *
-   * @example
-   * ```typescript
-   * let color = this.timepicker.color;
-   * ```
-   */
-  @Input()
-  public get color(): ThemePalette {
-    return this._color;
-  }
-
-  /**
-   * Sets the size  of the element.
-   * By default, the color is `"primary"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
-   * ```
-   */
-  public set color(value: ThemePalette) {
-    switch (value) {
-      case OnemrvaMatColor.PRIMARY:
-      case OnemrvaMatColor.ACCENT:
-      case OnemrvaMatColor.WARN:
-        this._color = value;
-        break;
-      default:
-        this._color = OnemrvaMatColor.PRIMARY;
-    }
-  }
-
-  /** @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
-   */
-  private _size: string | OnemrvaMatSize = OnemrvaMatSize.SMALL;
-
-  /**
-   * Returns the size of the element.
-   *
-   * @example
-   * ```typescript
-   * let timepickerSize = this.timepicker.size;
-   * ```
-   */
-  @Input()
-  public get size(): string | OnemrvaMatSize {
-    return this._size;
-  }
-
-  /**
-   * Sets the size  of the element.
-   * By default, the size is `"medium"`.
-   *
-   * @example
-   * ```html
-   * <onemrva-mat-timepicker size="large"></onemrva-mat-timepicker>
-   * ```
-   */
-  public set size(value: string | OnemrvaMatSize) {
-    switch (value) {
-      case OnemrvaMatSize.XSMALL:
-      case OnemrvaMatSize.SMALL:
-      case OnemrvaMatSize.MEDIUM:
-      case OnemrvaMatSize.LARGE:
-      case OnemrvaMatSize.XLARGE:
-        this._size = value;
-        break;
-      default:
-        this._size = OnemrvaMatSize.MEDIUM;
-    }
-  }
-
-  open() {
-    if (this.timepickerInput.disabled) {
-      return;
-    }
-
-    this.value = this.timepickerInput.currentValue;
-    if (this.value === undefined || this.value === null) {
-      this.value = new Date();
-    }
-
-    this.modalRef = this.dialog.open(MatTimepickerComponentDialogComponent, {
-      ariaLabel: this.dialogLabel,
-      autoFocus: false,
-      data: {
-        value: this.timepickerInput.currentValue,
-        okLabel: this.timepickerInput.okLabel,
-        cancelLabel: this.timepickerInput.cancelLabel,
-        color: this.color,
-        minDate: this.timepickerInput.minDate,
-        maxDate: this.timepickerInput.maxDate,
-        allowed24HourMap: this.timepickerInput.allowed24HourMap,
-      },
-    });
-
-    const instance = this.modalRef.componentInstance;
-    instance.changeEvent
-      .pipe(takeUntil(this.isAlive))
-      .subscribe(this.handleChange);
-    instance.okClickEvent
-      .pipe(takeUntil(this.isAlive))
-      .subscribe(this.handleOk);
-    instance.cancelClickEvent
-      .pipe(takeUntil(this.isAlive))
-      .subscribe(this.handleCancel);
-    this.modalRef
-      .beforeClosed()
-      .pipe(first())
-      .subscribe(() => (instance.isClosing = true));
-    this.modalRef
-      .afterClosed()
-      .pipe(first())
-      .subscribe(() => {
-        if (this.timepickerInput.onTouchedFn) {
-          this.timepickerInput.onTouchedFn();
-        }
-        //this.modalRef = null;
-        this.timepickerInput.elRef.nativeElement.focus();
-      });
-    this.timepickerInput.currentValue = this.value as Date;
-  }
-
-  handleChange = (newValue: Date) => {
-    if (!(newValue instanceof Date)) {
-      return;
-    }
-    const v =
-      this.value instanceof Date ? new Date(this.value.getTime()) : new Date();
-    v.setHours(newValue.getHours());
-    v.setMinutes(newValue.getMinutes());
-    v.setSeconds(0);
-    v.setMilliseconds(0);
-    this.value = v;
-  };
-
-  handleOk = () => {
-    if (this.onChangeFn) {
-      this.onChangeFn(this.value);
-    }
-    this.timepickerInput.value = this.value;
-    this.modalRef.close();
-  };
-
-  handleCancel = () => {
-    this.modalRef.close();
-  };
-
-  ngOnDestroy() {
-    this.isAlive.next('0');
-    this.isAlive.complete();
-    this.stateChanges.complete();
-
-    // if (this._platform.isBrowser) {
-    //     this.fm.stopMonitoring(this.elRef.nativeElement);
-    // }
-    //
-    // this.listeners.forEach(l => l());
-  }
-}

package/mat-timepicker/src/onemrva-mat-timepicker.module.ts

@@ -1,40 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OnemrvaMatTimepickerComponent } from './onemrva-mat-timepicker.component';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import {
-  MatTimePickerToggle,
-  MatTimepickerToggleIconDirective,
-} from './timepicker-toggle/timepicker-toggle.component';
-import { MatTimepickerDirective } from './timepicker.directive';
-import { ClockComponent } from './clock/clock.component';
-import { MatTimepickerComponentDialogComponent } from './timepicker-dialog/timepicker-dialog.component';
-
-@NgModule({
-  declarations: [
-    ClockComponent,
-    MatTimepickerDirective,
-    MatTimepickerComponentDialogComponent,
-    MatTimepickerToggleIconDirective,
-    MatTimePickerToggle,
-    OnemrvaMatTimepickerComponent,
-  ],
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatInputModule,
-  ],
-  exports: [
-    MatTimepickerDirective,
-    MatTimePickerToggle,
-    OnemrvaMatTimepickerComponent,
-  ],
-})
-export class OnemrvaMatTimepickerModule {}

package/mat-timepicker/src/timepicker-dialog/timepicker-dialog.component.html

@@ -1,53 +0,0 @@
-<mat-dialog-content>
-  <div class="root">
-    <mat-toolbar [color]="color" class="header">
-      <div class="time-frame">
-        <span
-          class="time fixed-font-size"
-          [ngClass]="{ select: this.viewType === 'hours' && 'active' }"
-          (click)="editHours()"
-        >
-          {{ twoDigits(formattedHours) }}
-        </span>
-        <span class="fixed-font-size">:</span>
-        <span
-          class="time fixed-font-size"
-          [ngClass]="{ select: this.viewType === 'minutes' && 'active' }"
-          (click)="editMinutes()"
-        >
-          {{ twoDigits(minutes) }}
-        </span>
-      </div>
-    </mat-toolbar>
-    <div class="body">
-      <mat-clock
-        [allowed24HourMap]="allowed24HourMap"
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        [color]="color"
-        [viewType]="viewType"
-        [formattedHours]="formattedHours"
-        [minutes]="minutes"
-        (changeEvent)="handleClockChange($event)"
-        (unavailableSelection)="handleUnavailableSelection()"
-        [formattedValue]="viewType === 'minutes' ? minutes : formattedHours"
-        (mouseup)="handleClockChangeDone($event)"
-        (touchend)="handleClockChangeDone($event)"
-        (invalidSelection)="invalidSelectionHandler($event)"
-      ></mat-clock>
-    </div>
-  </div>
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button color="primary" (click)="cancelClickHandler()">
-    {{ cancelLabel }}
-  </button>
-  <button
-    mat-flat-button
-    [disabled]="invalidSelection"
-    [color]="color"
-    (click)="okClickHandler()"
-  >
-    {{ okLabel }}
-  </button>
-</mat-dialog-actions>