@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,594 @@
+import {
+  ControlValueAccessor,
+  NgForm,
+  NgControl,
+  FormGroupDirective,
+  FormControl,
+} from '@angular/forms';
+import {
+  Directive,
+  OnInit,
+  EventEmitter,
+  Input,
+  ElementRef,
+  OnChanges,
+  Renderer2,
+  AfterViewInit,
+  Optional,
+  SimpleChanges,
+  NgZone,
+  HostBinding,
+  Self,
+  Output,
+  HostListener,
+} from '@angular/core';
+import {
+  MatFormFieldControl,
+  MatFormField,
+} from '@angular/material/form-field';
+import { IAllowed24HourMap } from './interfaces-and-types';
+import {
+  twoDigits,
+  convertHoursForMode,
+  isAllowed,
+  isDateInRange,
+  isTimeInRange,
+} from './util';
+import { Subject, Subscription } from 'rxjs';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { Platform } from '@angular/cdk/platform';
+import { OnemrvaMatTimepickerComponent } from './onemrva-mat-timepicker.component';
+
+@Directive({
+  selector: 'input[matTimepicker]',
+  providers: [
+    { provide: MatFormFieldControl, useExisting: MatTimepickerDirective },
+  ],
+  // tslint:disable-next-line:no-host-metadata-property
+  host: {
+    // tslint:disable-next-line:object-literal-key-quotes
+    class: 'mat-input-element mat-form-field-autofill-control',
+    '[class.mat-input-server]': '_isServer',
+    // Native input properties that are overwritten by Angular inputs need to be synced with
+    // the native input element. Otherwise property bindings for those don't work.
+    '[attr.id]': 'id',
+    '[attr.placeholder]': 'placeholder',
+    '[disabled]': 'disabled',
+    '[required]': 'required',
+    '[attr.readonly]': 'readonly || null',
+    '[attr.aria-invalid]': 'errorState',
+    '[attr.aria-required]': 'required.toString()',
+  },
+  exportAs: 'matTimepicker',
+})
+export class MatTimepickerDirective
+  implements
+    OnInit,
+    OnChanges,
+    AfterViewInit,
+    ControlValueAccessor,
+    MatFormFieldControl<any>
+{
+  static nextId = 0;
+
+  /** Whether the component is being rendered on the server. */
+  // tslint:disable-next-line:variable-name
+  readonly _isServer: boolean;
+  private _closedSubscription = Subscription.EMPTY;
+
+  /** The datepicker that this input is associated with. */
+  @Input()
+  set matTimepicker(timepicker: OnemrvaMatTimepickerComponent) {
+    if (timepicker) {
+      this._timepicker = timepicker;
+      this._timepicker.setTimepickerInput(this);
+      this._closedSubscription = timepicker.closedStream.subscribe(() =>
+        this._onTouched()
+      );
+      //this._registerModel(datepicker.registerInput(this));
+    }
+  }
+  _timepicker!: OnemrvaMatTimepickerComponent;
+
+  // tslint:disable-next-line:variable-name
+  _errorState = false;
+  get errorState() {
+    const oldState = this._errorState;
+    const parent = this._parentFormGroup || this._parentForm;
+    const control = this.ngControl
+      ? (this.ngControl.control as FormControl)
+      : null;
+    const newState = this.errorStateMatcher
+      ? this.errorStateMatcher.isErrorState(control, parent)
+      : oldState;
+
+    if (newState !== oldState) {
+      this._errorState = newState;
+      this.stateChanges.next();
+    }
+
+    return newState;
+  }
+  _onTouched = () => {};
+
+  @Input()
+  get disabled(): boolean {
+    if (this.ngControl && this.ngControl.disabled !== null) {
+      return this.ngControl.disabled;
+    }
+    return this._disabled;
+  }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+
+    // Browsers may not fire the blur event if the input is disabled too quickly.
+    // Reset from here to ensure that the element doesn't become stuck.
+    if (this.focused) {
+      this.focused = false;
+      this.stateChanges.next();
+    }
+  }
+  // tslint:disable-next-line:variable-name
+  protected _disabled = false;
+
+  @Input() get id(): string {
+    return this._id;
+  }
+  set id(value: string) {
+    this._id = value || this._uid;
+  }
+  // tslint:disable-next-line:variable-name
+  protected _id: string = '0';
+
+  @Input() get readonly(): boolean {
+    return this._readonly;
+  }
+  set readonly(value: boolean) {
+    this._readonly = coerceBooleanProperty(value);
+  }
+  // tslint:disable-next-line:variable-name
+  private _readonly = false;
+
+  private isAlive: Subject<any> = new Subject<any>();
+  stateChanges = new Subject<void>();
+
+  // tslint:disable-next-line:variable-name
+  protected _uid = `mat-input-${MatTimepickerDirective.nextId++}`;
+  @HostBinding('class.floating') get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+  @HostBinding('attr.aria-describedby') describedBy = '';
+
+  @Input() errorStateMatcher: ErrorStateMatcher;
+
+  @Input() get required() {
+    return this._required;
+  }
+
+  set required(req) {
+    this._required = coerceBooleanProperty(req);
+    this.stateChanges.next();
+  }
+  // tslint:disable-next-line:variable-name
+  private _required = false;
+
+  @Input() get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(plh) {
+    this._placeholder = plh;
+    this.stateChanges.next();
+  }
+  // tslint:disable-next-line:variable-name
+  private _placeholder: string = '';
+
+  focused = false;
+  private pattern: RegExp = new RegExp('[0-2]?[0-9]:[0-6]?[0-9]');
+
+  private allowed24HourMap: IAllowed24HourMap = this.generateAllowedMap();
+
+  private isInputFocused = false;
+
+  /** Override the label of the ok button. */
+  @Input() okLabel = 'Ok';
+  /** Override the label of the cancel button. */
+  @Input() cancelLabel = 'Cancel';
+
+  /** Sets the clock mode, 12-hour or 24-hour clocks are supported. */
+  @Input() color = 'primary';
+  @Input() disableDialogOpenOnClick = false;
+  @Input() strict = true;
+
+  controlType = 'angular-material-timepicker';
+
+  private listeners: (() => void)[] = [];
+
+  @Input() minDate!: Date;
+  @Input() maxDate!: Date;
+
+  // tslint:disable-next-line:variable-name
+  private _isPm: boolean = false;
+  // tslint:disable-next-line:variable-name
+  private _value!: Date;
+  // tslint:disable-next-line:variable-name
+  private _formattedValueString: string = '';
+
+  // tslint:disable-next-line:variable-name
+  private _skipValueChangeEmission = true;
+
+  @Input() set value(value: Date) {
+    if (value === this._value) {
+      return;
+    }
+    this._value = value;
+    if (!value) {
+      this._formattedValueString = '';
+      this.setInputElementValue(value);
+      this.currentValue = value;
+      return;
+    }
+
+    const { hour, isPm } = convertHoursForMode(value.getHours());
+    this._formattedValueString = `${twoDigits(value.getHours())}:${twoDigits(
+      value.getMinutes()
+    )}`;
+
+    if (!this.isInputFocused) {
+      this.setInputElementValue(this.formattedValueString);
+    }
+    this.currentValue = value;
+    this.stateChanges.next();
+
+    if (this._skipValueChangeEmission) {
+      return;
+    }
+    this.timeChange.emit(this.currentValue);
+
+    if (this.onChangeFn) this.onChangeFn(this.value);
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  get empty() {
+    return !(this.currentValue instanceof Date);
+  }
+
+  private get formattedValueString() {
+    return this._formattedValueString;
+  }
+
+  private currentValue!: Date;
+
+  private onChangeFn: any;
+  private onTouchedFn: any;
+  private combination: string[] = [];
+
+  @Output() timeChange: EventEmitter<any> = new EventEmitter<any>();
+  @Output() invalidInput: EventEmitter<any> = new EventEmitter<any>();
+
+  @HostListener('input') inputHandler() {
+    let value = (this.elRef.nativeElement as any).value as string;
+    const length = value.length;
+
+    if (length === 0) {
+      //this.writeValue(null, true);
+      this._skipValueChangeEmission = true;
+      Promise.resolve().then(() => (this._skipValueChangeEmission = false));
+
+      if (this.onChangeFn) {
+        this.onChangeFn(null);
+      }
+
+      return;
+    }
+
+    const valueHasColumn = value.includes(':');
+    let [hours, minutes]: any =
+      length === 1
+        ? [value, 0]
+        : length === 2 && !valueHasColumn
+        ? [value, 0]
+        : valueHasColumn
+        ? value.split(':')
+        : value.split(/(\d\d)/).filter((v) => v);
+
+    hours = +hours;
+
+    if (/\s/.test(minutes)) {
+      let other;
+      [minutes, other] = minutes.split(/\s/);
+      if (other === 'pm' && !isNaN(hours) && hours < 12) {
+        hours += 12;
+      }
+    }
+
+    minutes = +minutes;
+
+    if (isNaN(hours) || isNaN(minutes)) {
+      //this.writeValue(null, true);
+      this._skipValueChangeEmission = true;
+      Promise.resolve().then(() => (this._skipValueChangeEmission = false));
+      return;
+    }
+
+    if (+hours > 24) {
+      hours = '24';
+    } else if (+hours < 0) {
+      hours = '0';
+    }
+
+    if (+minutes > 59) {
+      minutes = '59';
+    } else if (+minutes < 0) {
+      minutes = '0';
+    }
+
+    const d = this.value ? new Date(this.value.getTime()) : new Date();
+    d.setHours(+hours);
+    d.setMinutes(+minutes);
+    d.setSeconds(0);
+    d.setMilliseconds(0);
+
+    const isValueInRange = isDateInRange(this.minDate, this.maxDate, d);
+    if (!isValueInRange) {
+      this.invalidInput.emit();
+    }
+
+    this.writeValue(d, true);
+    if (this.onChangeFn) {
+      this.onChangeFn(d);
+    }
+  }
+
+  @HostListener('keydown', ['$event']) keydownHandler(event: any) {
+    let e = <KeyboardEvent>event;
+
+    const allowedKey = [
+      '0',
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      ':',
+      'Backspace',
+      'Delete',
+      'Tab',
+      'Enter',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'ArrowDown',
+      'Home',
+      'End',
+    ];
+    if (allowedKey.indexOf(e.key) >= 0) return;
+
+    const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
+    if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0) return;
+
+    if (event.metaKey || event.ctrlKey || event.altKey) {
+      this.combination = this.combination.concat(event.code);
+      return;
+    }
+    const target = event.target;
+    const tValue = target.value;
+    const value = `${tValue.slice(0, target.selectionStart)}${
+      event.key
+    }${tValue.slice(target.selectionEnd)}`;
+    if (value.match(this.pattern) || this.combination.length > 0) {
+      return true;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    return;
+  }
+
+  @HostListener('keyup', ['$event']) keyupHandler(event: any) {
+    this.combination = this.combination.filter((v) => v !== event.code);
+  }
+
+  @HostListener('focus') focusHandler() {
+    this.isInputFocused = true;
+  }
+
+  @HostListener('focusout') focusoutHandler() {
+    this.isInputFocused = false;
+    this.setInputElementValue(this.formattedValueString);
+    if (this.onTouchedFn && !this._timepicker.modalRef) {
+      this.onTouchedFn();
+    }
+  }
+
+  constructor(
+    @Optional() @Self() public ngControl: NgControl,
+    private renderer: Renderer2,
+    private zone: NgZone,
+    private fm: FocusMonitor,
+    private elRef: ElementRef<HTMLElement>,
+    private ngZone: NgZone,
+    // tslint:disable-next-line:variable-name
+    protected _platform: Platform,
+    // tslint:disable-next-line:variable-name
+    @Optional() private _parentForm: NgForm,
+    // tslint:disable-next-line:variable-name
+    @Optional() private _matFormFiled: MatFormField,
+    // tslint:disable-next-line:variable-name
+    @Optional() private _parentFormGroup: FormGroupDirective,
+    // tslint:disable-next-line:variable-name
+    _defaultErrorStateMatcher: ErrorStateMatcher
+  ) {
+    this.id = this.id;
+
+    this.errorStateMatcher = _defaultErrorStateMatcher;
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+
+    if (_platform.IOS) {
+      ngZone.runOutsideAngular(() => {
+        elRef.nativeElement.addEventListener('keyup', (event: Event) => {
+          const el = event.target as HTMLInputElement;
+          if (!el.value && !el.selectionStart && !el.selectionEnd) {
+            // Note: Just setting `0, 0` doesn't fix the issue. Setting
+            // `1, 1` fixes it for the first time that you type text and
+            // then hold delete. Toggling to `1, 1` and then back to
+            // `0, 0` seems to completely fix it.
+            el.setSelectionRange(1, 1);
+            el.setSelectionRange(0, 0);
+          }
+        });
+      });
+    }
+
+    this._isServer = !this._platform.isBrowser;
+  }
+
+  setDescribedByIds(ids: string[]) {
+    this.describedBy = ids.join(' ');
+  }
+
+  onContainerClick(event: MouseEvent) {
+    if ((event.target as Element).tagName.toLowerCase() !== 'input') {
+      this.elRef.nativeElement.focus();
+    }
+  }
+
+  setInputElementValue(value: any) {
+    Promise.resolve().then(() => {
+      this.zone.runOutsideAngular(() => {
+        this.renderer.setProperty(this.elRef.nativeElement, 'value', value);
+      });
+    });
+  }
+
+  validate() {
+    const isValueInRange = this.strict
+      ? isDateInRange(this.minDate, this.maxDate, this.currentValue)
+      : isTimeInRange(this.minDate, this.maxDate, this.currentValue);
+
+    return isValueInRange ? null : { dateRange: true };
+  }
+
+  ngAfterViewInit() {}
+
+  ngOnInit() {
+    if (this._platform.isBrowser) {
+      this.fm.monitor(this.elRef.nativeElement, true).subscribe((origin) => {
+        this.focused = !!origin;
+        this.stateChanges.next();
+      });
+    }
+    if (!this.value) {
+      const hasMaxDate = !!this.maxDate;
+      const hasMinDate = !!this.minDate;
+
+      //if (hasMinDate || hasMaxDate) {
+      if (hasMinDate) {
+        this.minDate.setSeconds(0);
+        this.minDate.setMilliseconds(0);
+      }
+      if (hasMaxDate) {
+        this.maxDate.setSeconds(0);
+        this.maxDate.setMilliseconds(0);
+      }
+
+      if (
+        !(this.ngControl as any)._rawValidators.find((v: any) => v === this)
+      ) {
+        (this.ngControl as any)._rawValidators.push(this);
+      }
+      //}
+    }
+    this._skipValueChangeEmission = false;
+  }
+
+  generateAllowedMap(): IAllowed24HourMap {
+    const isStrictMode = this.strict && this.value instanceof Date;
+    const a24hm: IAllowed24HourMap = {};
+    for (let h = 0; h < 24; h++) {
+      for (let m = 0; m < 60; m++) {
+        const hourMap = a24hm[h] || {};
+        if (isStrictMode) {
+          const currentDate = new Date(this.value.getTime());
+          currentDate.setHours(h);
+          currentDate.setMinutes(m);
+          currentDate.setSeconds(0);
+          currentDate.setMilliseconds(0);
+          hourMap[m] = isDateInRange(this.minDate, this.maxDate, currentDate);
+        } else {
+          hourMap[m] = isAllowed(h, m, this.minDate, this.maxDate);
+        }
+        a24hm[h] = hourMap;
+      }
+    }
+
+    return a24hm;
+  }
+
+  ngOnChanges(simpleChanges: SimpleChanges) {
+    this.pattern = /^[0-9]{1,2}:?([0-9]{1,2})?$/;
+
+    if (
+      !this._timepicker.modalRef ||
+      !this._timepicker.modalRef.componentInstance
+    ) {
+      return;
+    }
+
+    this._timepicker.modalRef.componentInstance.data = {
+      value: this.currentValue,
+      okLabel: this.okLabel,
+      cancelLabel: this.cancelLabel,
+      color: this.color,
+      minDate: this.minDate,
+      maxDate: this.maxDate,
+      allowed24HourMap: this.allowed24HourMap,
+    };
+  }
+
+  checkValidity(value: Date) {
+    if (!value) {
+      return false;
+    }
+    const hour = value.getHours();
+    const minutes = value.getMinutes();
+    return isAllowed(hour, minutes, this.minDate, this.maxDate);
+  }
+
+  writeValue(value: Date, isInnerCall = false): void {
+    if (!isInnerCall) {
+      this._skipValueChangeEmission = true;
+      Promise.resolve().then(() => (this._skipValueChangeEmission = false));
+    }
+
+    if (value) {
+      value.setSeconds(0);
+      value.setMilliseconds(0);
+    }
+
+    if (+this.value !== +value) {
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChangeFn = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouchedFn = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

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

@@ -0,0 +1,97 @@
+import { ITimeData, ClockViewType } from './interfaces-and-types';
+
+export function twoDigits(n: number) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+
+export function addDays(date: Date, days: number) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+}
+
+export function convertHoursForMode(hour: number) {
+  const isPm = hour >= 12;
+  return { hour, isPm };
+}
+
+function mod(a: number, b: number) {
+  return a - Math.floor(a / b) * b;
+}
+
+export function getShortestAngle(from: number, to: number) {
+  const difference = to - from;
+  return from + mod(difference + 180, 360) - 180;
+}
+
+export function isDateInRange(minDate: Date, maxDate: Date, current: Date) {
+  const unixCurrentDate = +current;
+  return (!minDate || +minDate <= unixCurrentDate) && (!maxDate || unixCurrentDate <= +maxDate);
+}
+
+export function isTimeInRange(minDate: Date, maxDate: Date, current: Date) {
+  if (minDate instanceof Date) {
+    const newMinDate = new Date();
+    newMinDate.setHours(minDate.getHours());
+    newMinDate.setMinutes(minDate.getMinutes());
+    newMinDate.setSeconds(0);
+    newMinDate.setMilliseconds(0);
+    minDate = newMinDate;
+  }
+  if (maxDate instanceof Date) {
+    const newMaxDate = new Date();
+    newMaxDate.setHours(maxDate.getHours());
+    newMaxDate.setMinutes(maxDate.getMinutes());
+    newMaxDate.setSeconds(0);
+    newMaxDate.setMilliseconds(0);
+    maxDate = newMaxDate;
+  }
+  if (current instanceof Date) {
+    const newCurrent = new Date();
+    newCurrent.setHours(current.getHours());
+    newCurrent.setMinutes(current.getMinutes());
+    newCurrent.setSeconds(0);
+    newCurrent.setMilliseconds(0);
+    current = newCurrent;
+  }
+  const unixCurrentDate = +current;
+  return (!minDate || +minDate <= unixCurrentDate) && (!maxDate || unixCurrentDate <= +maxDate);
+}
+
+// used when generating the allowed maps
+
+export function isAllowed(
+  hour: number,
+  minutes: number,
+  minDate: Date,
+  maxDate: Date
+) {
+  if (hour > 24 || hour < 0 || minutes > 60 || minutes < 0) { return false; }
+
+  if (!minDate && !maxDate) { return true; }
+
+  const checkDate = new Date();
+
+  checkDate.setHours(hour);
+  checkDate.setMinutes(minutes);
+  checkDate.setSeconds(0);
+  checkDate.setMilliseconds(0);
+
+  return isDateInRange(minDate, maxDate, checkDate);
+}
+
+// used by the clock component to visually disable the not allowed values
+
+export function getIsAvailabeFn( allowed24HourMap : any) {
+  return (value: number, viewType: ClockViewType, h: number) => {
+    const isHourCheck = viewType === 'hours';
+    const [hour, minutes] = isHourCheck ? [value, 0] : [h, value];
+
+    if (!allowed24HourMap) { return true; }
+
+    if (isHourCheck) {
+      return !!Object.values(allowed24HourMap[hour]).find(v => v === true);
+    }
+    return allowed24HourMap[hour][minutes];
+  };
+}

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

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

package/projects/onemrva/design-system/mat-toast/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}