@sumaris-net/ngx-components 2.6.4-alpha4 → 2.6.4-alpha5

package/src/app/shared/material/duration/material.duration.ts

@@ -0,0 +1,294 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional, Provider,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+import {Platform} from '@ionic/angular';
+import {DateAdapter} from '@angular/material/core';
+import {FloatLabelType, MatFormFieldAppearance} from '@angular/material/form-field';
+import {
+  ControlValueAccessor,
+  UntypedFormBuilder,
+  UntypedFormControl,
+  FormGroupDirective,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
+import {TranslateService} from '@ngx-translate/core';
+import {Moment} from 'moment';
+import {DEFAULT_PLACEHOLDER_CHAR} from '../../constants';
+import {isBlankString, isNil, isNotNilBoolean, toBoolean} from '../../functions';
+import {InputElement, moveInputCaretToSeparator, setTabIndex} from '../../inputs';
+import {isFocusableElement} from '../../focusable';
+import {DEFAULT_MAX_DECIMALS, formatDuration, parseDuration} from './duration.utils';
+import {BehaviorSubject, Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
+const DEFAULT_VALUE_ACCESSOR: Provider = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => MatDuration),
+  multi: true
+};
+
+const HOUR_TIME_PATTERN = /[0-9]\d\d:[0-5]\d/;
+const HOUR_MASK = [/\d/, /\d/, /\d/, ':', /[0-5]/, /\d/];
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'mat-duration-field',
+  templateUrl: './material.duration.html',
+  styleUrls: ['./material.duration.scss'],
+  providers: [
+    DEFAULT_VALUE_ACCESSOR,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MatDuration implements OnInit, OnDestroy, ControlValueAccessor, InputElement {
+  private _subscription = new Subscription();
+  private _onChangeCallback: (_: any) => void = noop;
+  private _onTouchedCallback: () => void = noop;
+  private writing = true;
+  private disabling = false;
+  private _tabindex: number;
+  private _value: number;
+
+  textControl: UntypedFormControl;
+  hourMask = HOUR_MASK;
+
+  @Input() disabled = false;
+  @Input() formControl: UntypedFormControl;
+  @Input() formControlName: string;
+  @Input() placeholder: string;
+  @Input() floatLabel: FloatLabelType = 'auto';
+  @Input() appearance: MatFormFieldAppearance;
+  @Input() readonly = false;
+  @Input() required: boolean;
+  @Input() compact = false;
+  @Input() maxDecimals: number = DEFAULT_MAX_DECIMALS;
+  @Input() placeholderChar: string = DEFAULT_PLACEHOLDER_CHAR;
+
+  @Input() set tabindex(value: number) {
+    if (this._tabindex !== value) {
+      this._tabindex = value;
+      setTimeout(() => this.updateTabIndex());
+    }
+  }
+
+  get tabindex(): number {
+    return this._tabindex;
+  }
+
+  @Input() clearable = false;
+
+  @ViewChildren('matInput') matInputs: QueryList<ElementRef>;
+
+  get value(): any {
+    return this._value;
+  }
+
+  constructor(
+    platform: Platform,
+    private dateAdapter: DateAdapter<Moment>,
+    private translate: TranslateService,
+    private formBuilder: UntypedFormBuilder,
+    private cd: ChangeDetectorRef,
+    @Optional() private formGroupDir: FormGroupDirective,
+  ) {
+  }
+
+  ngOnInit() {
+
+    if (this.maxDecimals) {
+      if (this.maxDecimals < 0) {
+        console.error('Invalid attribute \'maxDecimals\'. Must a positive value.');
+        this.maxDecimals = DEFAULT_MAX_DECIMALS;
+      }
+      else if (this.maxDecimals < DEFAULT_MAX_DECIMALS) {
+        console.warn(`Invalid attribute 'maxDecimals' - Value should be more than ${DEFAULT_MAX_DECIMALS}, otherwise the round trip conversion will lose minutes.`);
+        this.maxDecimals = DEFAULT_MAX_DECIMALS;
+      }
+    }
+
+    this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
+    if (!this.formControl) throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-duration-field>.');
+
+    this.required = isNotNilBoolean(this.required) ? this.required : (this.formControl.validator === Validators.required || isBlankString(this.required));
+
+    // Redirect errors from main control, into day sub control
+    const $error = new BehaviorSubject<ValidationErrors>(null);
+    this.textControl = this.formBuilder.control(null, null);
+    this.textControl.setValidators(this.required ? [Validators.required, () => $error.getValue(), Validators.pattern(HOUR_TIME_PATTERN)] :
+      [() => $error.getValue(), Validators.pattern(HOUR_TIME_PATTERN)]);
+
+    this._subscription.add(
+      this.textControl.valueChanges
+        .subscribe((value) => this.onFormChange(value))
+    );
+
+    // Listen status changes outside the component (e.g. when setErrors() is calling on the formControl)
+    this._subscription.add(
+      this.formControl.statusChanges
+        .pipe(filter(() => !this.readonly && !this.writing && !this.disabling)) // Skip
+        .subscribe((status) => {
+          if (status === 'INVALID') {
+            $error.next(this.formControl.errors);
+          }
+          else if (status === 'VALID') {
+            $error.next(null);
+          }
+          this.textControl.updateValueAndValidity({onlySelf: true, emitEvent: false});
+          this.markForCheck();
+        }));
+
+    this.updateTabIndex();
+
+    this.writing = false;
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  writeValue(obj: any): void {
+    if (this.writing) return;
+
+    // console.debug('[mat-duration] writeValue:', obj);
+
+    if (isNil(obj)) {
+      this.writing = true;
+      this.textControl.patchValue(null, {emitEvent: false});
+      this._value = undefined;
+      if (this.formControl.value) {
+        this.formControl.patchValue(null, {emitEvent: false});
+        this._onChangeCallback(null);
+      }
+      this.writing = false;
+      this.markForCheck();
+      return;
+    }
+
+    this._value = obj;
+    if (isNaN(this._value)) { // invalid value
+      return;
+    }
+
+    this.writing = true;
+
+    console.debug(`[mat-duration] Formatted hour: ${this._value} to ${formatDuration(this._value)}`);
+
+    // Set form value
+    this.textControl.patchValue(formatDuration(this._value), {emitEvent: false});
+    this.writing = false;
+    this.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouchedCallback = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    if (this.disabling) return;
+
+    this.disabling = true;
+    this.disabled = isDisabled;
+    if (isDisabled) {
+      this.textControl.disable({onlySelf: true, emitEvent: false});
+    } else {
+      this.textControl.enable({onlySelf: true, emitEvent: false});
+    }
+    this.disabling = false;
+
+    this.markForCheck();
+  }
+
+  private onFormChange(value): void {
+    if (this.writing) return; // Skip if call by self
+    this.writing = true;
+
+    console.debug('[mat-duration] onFormChange:', value);
+
+    if (this.textControl.hasError('pattern') || this.textControl.hasError('required')) {
+      this.formControl.markAsPending();
+      this.formControl.setErrors({
+        pattern: this.textControl.errors.pattern,
+        required: this.textControl.errors.required
+      });
+      this.writing = false;
+      return;
+    }
+
+    this._value = parseDuration(value || '', this.maxDecimals, this.placeholderChar);
+
+    console.debug('[mat-duration] Setting duration: ', this._value);
+    this.formControl.patchValue(this._value, {emitEvent: false});
+    //this.formControl.updateValueAndValidity();
+    this.writing = false;
+    this.markForCheck();
+
+    this._onChangeCallback(this._value);
+  }
+
+  checkIfTouched() {
+    if (this.textControl.touched) {
+      this.markForCheck();
+      this._onTouchedCallback();
+    }
+  }
+
+  preventEvent(event: Event) {
+    if (!event) return;
+    event.preventDefault();
+    if (event.stopPropagation) event.stopPropagation();
+    event.returnValue = false;
+  }
+
+  focus() {
+    if (!this.matInputs.length) return;
+
+    setTimeout(() => {
+      const elementRef = this.matInputs[0]; // get the first element
+      if (isFocusableElement(elementRef)) {
+        elementRef.focus();
+      }
+    });
+  }
+
+  moveCaretToSeparator(event: any, forward: boolean): boolean {
+    // Move to the next separator
+    return moveInputCaretToSeparator(event, ':', forward);
+  }
+
+  /* -- protected method -- */
+
+  protected updateTabIndex() {
+    if (isNil(this._tabindex) || this._tabindex === -1) return; // skip
+
+    // Focus to first input
+    setTimeout(() => {
+      this.matInputs.forEach((elementRef, index) => {
+        setTabIndex(elementRef, this._tabindex + index);
+      });
+      this.markForCheck();
+    });
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}
+

package/src/app/shared/material/latlong/latlong.utils.ts

@@ -0,0 +1,300 @@
+import {DEFAULT_PLACEHOLDER_CHAR, EMPTY_PLACEHOLDER_CHAR} from '../../constants';
+
+export declare type LatLongPattern = 'DDMMSS' | 'DDMM' | 'DD';
+export const LAT_LONG_PATTERNS: LatLongPattern[] = ['DDMMSS', 'DDMM', 'DD'];
+
+export declare class LatLongFormatOptions {
+  pattern: LatLongPattern;
+  maxDecimals?: number;
+  placeholderChar?: string;
+  hideSign?: boolean;
+}
+export declare type LatLongFormatFn = (value: number | null, opts?: LatLongFormatOptions) => string;
+export const LAT_LONG_DEFAULT_MAX_DECIMALS = 3;
+
+
+const DEFAULT_OPTIONS = <LatLongFormatOptions>{
+  pattern: 'DDMM',
+  maxDecimals: LAT_LONG_DEFAULT_MAX_DECIMALS,
+  placeholderChar: DEFAULT_PLACEHOLDER_CHAR
+};
+const DEFAULT_LATITUDE_OPTIONS: LatLongFormatOptions & { longitude: boolean } = {
+  ...DEFAULT_OPTIONS,
+  longitude: false
+};
+const DEFAULT_LONGITUDE_OPTIONS: LatLongFormatOptions & { longitude: boolean } =  {
+  ...DEFAULT_OPTIONS,
+  longitude: true
+};
+export  function formatLatitude(value: number | null, opts?: Partial<LatLongFormatOptions>): string {
+  if (value === undefined || value === null) return null;
+
+  switch(opts.pattern) {
+    case 'DDMMSS':
+      return formatToDDMMSS(value, { ...DEFAULT_LATITUDE_OPTIONS, ...opts });
+    case 'DDMM':
+      return formatToDDMM(value, { ...DEFAULT_LATITUDE_OPTIONS, ...opts });
+    case 'DD':
+    default:
+      return formatToDD(value, { ...DEFAULT_LATITUDE_OPTIONS, ...opts });
+  }
+}
+
+export function formatLongitude(value: number | null, opts?: Partial<LatLongFormatOptions>): string {
+  if (value === undefined || value === null) return null;
+
+  switch(opts.pattern) {
+    case 'DDMMSS':
+      return formatToDDMMSS(value, { ...DEFAULT_LONGITUDE_OPTIONS, ...opts });
+    case 'DDMM':
+      return formatToDDMM(value, { ...DEFAULT_LONGITUDE_OPTIONS, ...opts });
+    case 'DD':
+    default:
+      return formatToDD(value, { ...DEFAULT_LONGITUDE_OPTIONS, ...opts });
+  }
+}
+
+function formatToDD(value: number, opts: LatLongFormatOptions & {longitude: boolean}): string {
+  // opts.pattern === DD
+  let negative = value < 0;
+  if (negative) value *= -1;
+
+  // Fix longitude when outside [-180, 180]
+  if (opts.longitude) {
+    while (value > 180) {
+      value = (value - 180);
+      negative = value < 0;
+      if (negative) value *= -1;
+    }
+  }
+  // Fix latitude when outside [-90, 90]
+  else {
+    while (value > 90) {
+      value = (value - 90);
+      negative = value < 0;
+      if (negative) value *= -1;
+    }
+  }
+
+  let degrees = roundFloat(value, opts.maxDecimals).toString();
+
+  // Add sign
+  let sign = negative ? '-' : '+';
+
+  if (opts.placeholderChar) {
+    if (opts.longitude) {
+      if (value < 100) {
+        degrees = opts.placeholderChar + degrees;
+      }
+    }
+    else {
+      sign += ' '; // Add space after the sign
+    }
+    if (value < 10) {
+      degrees = opts.placeholderChar + degrees;
+    }
+    // Add decimal separator
+    const integerLength = (opts.longitude && 3 || 2);
+    if (degrees.length === integerLength) {
+      degrees += '.';
+    }
+    // Add trailing placeholder chars
+    while ((degrees.length < opts.maxDecimals + integerLength)) {
+      degrees += opts.placeholderChar;
+    }
+  }
+  return (opts.hideSign ? '' : sign) + degrees + '°';
+}
+
+function formatToDDMMSS(value: number, opts: LatLongFormatOptions & {longitude: boolean}): string {
+  let negative = value < 0;
+  if (negative) value *= -1;
+
+  // Fix longitude when outside [-180, 180]
+  if (opts.longitude) {
+    while (value > 180) {
+      value = (value - 180);
+      negative = value < 0;
+      if (negative) value *= -1;
+    }
+  }
+  // Fix latitude when outside [-90, 90]
+  else {
+    while (value > 90) {
+      value = (value - 90);
+      negative = value < 0;
+      if (negative) value *= -1;
+    }
+  }
+
+  let degrees: number = Math.trunc(value);
+  let minutes: number | string = Math.trunc((value - degrees) * 60);
+  let seconds: number | string = roundFloat(((value - degrees) * 60 - minutes) * 60, opts.maxDecimals);
+
+  while (seconds >= 60) {
+    seconds -= 60;
+    minutes += 1;
+  }
+  while (minutes >= 60) {
+    minutes -= 60;
+    degrees += 1;
+  }
+  const sign = opts.longitude ? (negative ? 'W' : 'E') : (negative ? 'S' : 'N');
+
+  // Force spacer
+  let prefix = '';
+  if (opts.placeholderChar) {
+    if (opts.longitude && degrees < 100) {
+      prefix += opts.placeholderChar;
+    }
+    if (degrees < 10) {
+      prefix += opts.placeholderChar;
+    }
+
+    if (minutes < 10) {
+      minutes = opts.placeholderChar + minutes;
+    }
+
+    if (seconds < 10) {
+      seconds = opts.placeholderChar + seconds;
+    }
+    else {
+      seconds = seconds.toString(); // convert to string - required for the next while
+    }
+    if (opts.maxDecimals > 0) {
+      // Add decimal separator
+      if (seconds.length === 2) {
+        seconds += '.';
+      }
+      // Add trailing placeholder chars
+      while ((seconds.length < opts.maxDecimals + 3)) {
+        seconds += opts.placeholderChar;
+      }
+    }
+  }
+
+  const output = prefix + degrees + '° ' + minutes + '\' ' + seconds + '"'
+    + (opts.hideSign ? '' : ' ' + sign);
+
+  // DEBUG
+  //console.debug("formatToDDMMSS: " + value + " -> " + output);
+
+
+  return output;
+}
+
+function formatToDDMM(value: number, opts: LatLongFormatOptions & {longitude: boolean}): string {
+  let negative = value < 0;
+  if (negative) value *= -1;
+
+  // Fix longitude when outside [-180, 180]
+  if (opts.longitude) {
+    while (value > 180) {
+      value = (value - 180);
+      negative = value < 0;
+      if (negative) value *= -1;
+    }
+  }
+  // Fix latitude when outside [-90, 90]
+  else {
+    while (value > 90) {
+      value = (value - 90);
+      negative = value < 0;
+      if (negative) value *= -1;
+    }
+  }
+
+  let degrees: number | string = Math.trunc(value);
+  let minutes: number | string = roundFloat((value - degrees) * 60, opts.maxDecimals);
+  while (minutes >= 60) {
+    minutes -= 60;
+    degrees += 1;
+  }
+  const sign = opts.longitude ? (negative ? 'W' : 'E') : (negative ? 'S' : 'N');
+
+  // Add placeholderChar
+  let prefix = '';
+  if (opts.placeholderChar) {
+    if (opts.longitude && degrees < 100) {
+      prefix += opts.placeholderChar;
+    }
+    if (degrees < 10) {
+      prefix += opts.placeholderChar;
+    }
+
+    if (minutes < 10) {
+      minutes = opts.placeholderChar + minutes;
+    }
+    else {
+      minutes = minutes.toString(); // convert to string - required for the next while
+    }
+    if (opts.maxDecimals > 0) {
+      // Add decimal separator
+      if (minutes.length === 2) {
+        minutes += '.';
+      }
+      // Add trailing placeholder chars
+      while ((minutes.length < opts.maxDecimals + 3)) {
+        minutes += opts.placeholderChar;
+      }
+    }
+  }
+  const output = prefix + degrees + '° ' + minutes + '\''
+    + (opts.hideSign ? '' : ' ' + sign);
+
+  // DEBUG
+  //console.debug('formatToDDMM output:', output);
+
+  return output;
+}
+
+// 36°57'9" N  = 36.9525000
+// 10°4'21" W = -10.0725000
+export function parseLatitudeOrLongitude(input: string, pattern: string, maxDecimals?: number,
+                                         placeholderChar?: string): number | null {
+  placeholderChar = placeholderChar || DEFAULT_PLACEHOLDER_CHAR;
+  let inputFix = input.trim();
+  if (placeholderChar === EMPTY_PLACEHOLDER_CHAR) {
+    inputFix = inputFix
+      // Replace empty char placeholder
+      .replace(new RegExp(`[${EMPTY_PLACEHOLDER_CHAR}]`, 'g'), '')
+      // Remove space and '+' (= trim on each parts)
+      .replace(new RegExp(`[ +]+`, 'g'), '');
+  }
+  // Remove all placeholder (= trim on each parts)
+  else {
+    inputFix = inputFix.replace(new RegExp(`[ +${placeholderChar}]+`, 'g'), '');
+  }
+
+  //DEBUG console.debug("Parsing lat= " + inputFix);
+  const parts = inputFix.split(/[^-\d\w.,]+/);
+  let degrees = parseFloat(parts[0].replace(/,/g, '.'));
+  if (isNaN(degrees)) {
+    console.debug('parseLatitudeOrLongitude ' + input + ' -> Invalid degrees (NaN). Parts found:', parts);
+    return NaN;
+  }
+
+  if (pattern === 'DD') return roundFloat(degrees, maxDecimals);
+
+  const minutes = (pattern === 'DDMMSS' || pattern === 'DDMM') && parts[1] && parseFloat(parts[1].replace(/,/g, '.')) || 0;
+  const seconds = (pattern === 'DDMMSS') && parts[2] && parseFloat(parts[2].replace(/,/g, '.')) || 0;
+  const direction = ((pattern === 'DDMMSS') && parts[3]) || ((pattern === 'DDMM') && parts[2]) || undefined;
+  const sign = (direction && (direction === 's' || direction === 'S' || direction === 'w' || direction === 'W')) ? -1 : 1;
+
+  degrees = sign * (degrees + minutes / 60 + seconds / (60 * 60));
+
+  return roundFloat(degrees, maxDecimals);
+}
+
+function roundFloat(input: number, maxDecimals?: number): number {
+  if (maxDecimals > 0) {
+
+    const powDecimal = Math.pow(10, maxDecimals);
+    return Math.trunc(input * powDecimal + 0.5) / powDecimal;
+  }
+  // no decimals: round to integer
+  else if (maxDecimals === 0) {
+    return Math.trunc(input + 0.5);
+  }
+  return input;
+}