@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,289 @@
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  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 {
+  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>();
+
+  /** Emits when the timepicker has been opened. */
+  @Output('opened') readonly openedStream = new EventEmitter<void>();
+
+  /** Emits when the timepicker has been closed. */
+  @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 = '';
+
+  /**
+   * 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, {
+      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/projects/onemrva/design-system/mat-timepicker/src/onemrva-mat-timepicker.module.ts

@@ -0,0 +1,40 @@
+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,
+  MatTimepickerToggleIcon,
+} 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,
+    MatTimepickerToggleIcon,
+    MatTimePickerToggle,
+    OnemrvaMatTimepickerComponent,
+  ],
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatInputModule,
+  ],
+  exports: [
+    MatTimepickerDirective,
+    MatTimePickerToggle,
+    OnemrvaMatTimepickerComponent,
+  ],
+})
+export class OnemrvaMatTimepickerModule {}

package/projects/onemrva/design-system/mat-timepicker/src/timepicker-dialog/timepicker-dialog.component.html

@@ -0,0 +1,53 @@
+<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>

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

@@ -0,0 +1,69 @@
+.mdc-dialog__content {
+  min-height: 395px;
+  padding: 0px !important;
+  //  margin-top: -24px;
+  overflow: hidden;
+}
+
+mat-dialog-actions {
+  justify-content: flex-end;
+  margin: 0;
+}
+
+.root {
+  min-width: 282px;
+}
+
+.header {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  padding: 20px 0;
+  line-height: 58px;
+  font-size: 58px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  height: 98px;
+
+  .fixed-font-size {
+    font-size: 58px;
+  }
+
+  .time-frame {
+    height: 60px;
+  }
+}
+
+.time {
+  transition: all 200ms ease-out;
+  cursor: pointer;
+  &:not(.select) {
+    opacity: 0.6;
+  }
+}
+
+.placeholder {
+  flex: 1;
+}
+
+.ampm {
+  display: flex;
+  flex-direction: column-reverse;
+  flex: 1;
+  font-size: 14px;
+  line-height: 20px;
+  margin-left: 16px;
+  font-weight: 700;
+}
+
+.select {
+  color: white;
+}
+
+.body {
+  padding: 24px 16px;
+  padding-bottom: 20px;
+  display: flex;
+  justify-content: center;
+}

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

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

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

@@ -0,0 +1,169 @@
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { Component, EventEmitter, Output, Inject } from '@angular/core';
+import { ClockViewType, IAllowed24HourMap } from '../interfaces-and-types';
+import { twoDigits, convertHoursForMode } from '../util';
+import { Subject } from 'rxjs';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+  selector: 'mat-timepicker-dialog',
+  templateUrl: './timepicker-dialog.component.html',
+  styleUrls: ['./timepicker-dialog.component.scss'],
+})
+export class MatTimepickerComponentDialogComponent {
+  twoDigits = twoDigits;
+
+  @Output() changeEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Output() okClickEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Output() cancelClickEvent: EventEmitter<any> = new EventEmitter<any>();
+
+  allowed24HourMap!: IAllowed24HourMap;
+
+  invalidSelection = false;
+
+  okLabel: string = '';
+  cancelLabel: string = '';
+
+  set value(value: any) {
+    value = value || this.minDate || this.maxDate || new Date();
+    this.hours = value.getHours();
+    this.minutes = value.getMinutes();
+    this._value = value;
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  viewType: ClockViewType = 'hours';
+
+  minutes: any;
+  color: ThemePalette = 'primary';
+  isPm = false;
+  skipMinuteAutoSwitch = false;
+  autoSwitchID: any;
+  editHoursClicked = false;
+  isClosing = false;
+
+  minDate!: Date;
+  maxDate!: Date;
+
+  // tslint:disable-next-line:variable-name
+  _formattedHour: any;
+  // tslint:disable-next-line:variable-name
+  _hours: any;
+  // tslint:disable-next-line:variable-name
+  _value?: Date;
+
+  set hours(value: any) {
+    this._hours = value;
+    this._formattedHour = convertHoursForMode(this.hours).hour;
+  }
+  get hours() {
+    return this._hours;
+  }
+
+  get formattedHours() {
+    return this._formattedHour;
+  }
+
+  bindData(data: any) {
+    this.okLabel = data.okLabel;
+    this.cancelLabel = data.cancelLabel;
+    this.color = data.color;
+    this.minDate = data.minDate;
+    this.maxDate = data.maxDate;
+    this.allowed24HourMap = data.allowed24HourMap;
+  }
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialog: MatDialog
+  ) {
+    this.isPm = data.isPm;
+    this.bindData(data);
+    // keep this always at the bottom
+    this.value = data.value;
+  }
+
+  timepickerInput!: any;
+
+  ngDoCheck() {
+    this.bindData(this.data);
+  }
+
+  handleClockChange({
+    value,
+    type,
+  }: {
+    value: number;
+    type: 'minutes' | 'hours';
+  }) {
+    if ((type && type === 'hours') || (!type && this.viewType === 'hours')) {
+      this.hours = value;
+    } else if (
+      (type && type === 'minutes') ||
+      (!type && this.viewType === 'minutes')
+    ) {
+      this.minutes = value;
+    }
+
+    const newValue = new Date();
+    const hours = this.hours;
+    // newValue.setFullYear(0);
+    // newValue.setMonth(0);
+    // newValue.setDate(0);
+    newValue.setHours(hours);
+    newValue.setMinutes(this.minutes);
+    newValue.setSeconds(0);
+    newValue.setMilliseconds(0);
+    this.value = newValue;
+    this.changeEvent.emit(newValue);
+  }
+
+  handleUnavailableSelection() {
+    clearTimeout(this.autoSwitchID);
+  }
+
+  handleClockChangeDone(e: Event) {
+    e.preventDefault(); // prevent mouseUp after touchEnd
+
+    if (this.viewType === 'hours' && !this.skipMinuteAutoSwitch) {
+      this.autoSwitchID = setTimeout(() => {
+        this.editMinutes();
+        this.autoSwitchID = null;
+      }, 300);
+    }
+  }
+
+  editHours() {
+    this.viewType = 'hours';
+    this.editHoursClicked = true;
+    setTimeout(() => {
+      this.editHoursClicked = false;
+    }, 0);
+  }
+
+  editMinutes() {
+    this.viewType = 'minutes';
+  }
+
+  invalidSelectionHandler(value: boolean) {
+    this.invalidSelection = value;
+  }
+
+  okClickHandler() {
+    this.okClickEvent.emit();
+  }
+
+  cancelClickHandler() {
+    this.cancelClickEvent.emit();
+  }
+
+  closedStream!: EventEmitter<void>;
+  disabled!: boolean;
+  id!: string;
+  opened!: boolean;
+  openedStream!: EventEmitter<void>;
+  stateChanges!: Subject<void>;
+}

package/projects/onemrva/design-system/mat-timepicker/src/timepicker-toggle/timepicker-toggle.component.html

@@ -0,0 +1,15 @@
+<button
+  #button
+  mat-icon-button
+  type="button"
+  [title]="ariaLabel"
+  [attr.aria-haspopup]="timepicker ? 'dialog' : null"
+  [attr.aria-label]="ariaLabel"
+  [attr.tabindex]="disabled ? -1 : tabIndex"
+  [disabled]="disabled"
+  [disableRipple]="disableRipple">
+
+  <mat-icon>schedule</mat-icon>
+
+  <ng-content select="[mattimepickerToggleIcon]"></ng-content>
+</button>

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

@@ -0,0 +1,32 @@
+//@use '../../../../../node_modules/@angular/cdk/index';
+
+.mat-form-field-appearance-legacy {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mat-datepicker-toggle-default-icon {
+      width: 1em;
+    }
+  }
+}
+
+.mat-form-field:not(.mat-form-field-appearance-legacy) {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mat-datepicker-toggle-default-icon {
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+    }
+
+    .mat-icon-button .mat-datepicker-toggle-default-icon {
+      margin: auto;
+    }
+  }
+}
+//@include cdk.high-contrast(active, off) {
+//  .mat-datepicker-toggle-default-icon {
+//    // On Chromium-based browsers the icon doesn't appear to inherit the text color in high
+//    // contrast mode so we have to set it explicitly. This is a no-op on IE and Firefox.
+//    color: CanvasText;
+//  }
+//}