@sumaris-net/ngx-components 18.12.13 → 18.14.0

package/src/app/shared/material/latlong/material.latlong-input.html

@@ -0,0 +1,95 @@
+@if (readonly) {
+  <ion-text>
+    {{
+      ngControl.value
+        | latLongFormat: { pattern: pattern, maxDecimals: lastInputMaxDecimals, type: type, placeholderChar: '' }
+    }}
+  </ion-text>
+} @else {
+  <div
+    role="group"
+    class="mat-latlong-input-container"
+    [formGroup]="formGroup"
+    [attr.aria-labelledby]="_formField?.getLabelId()"
+    (focusin)="onFocusIn($event)"
+    (focusout)="onFocusOut($event)"
+  >
+    <input
+      #degrees
+      aria-label="Degrees"
+      [class.degrees-only]="pattern === 'DD'"
+      [class.degrees]="pattern !== 'DD'"
+      [class.latitude]="type === 'latitude'"
+      inputmode="decimal"
+      autocomplete="off"
+      [placeholder]="degreesPlaceholder | translate"
+      formControlName="degrees"
+      [maskito]="degreesMask"
+      (input)="handleInput('degrees', 'minutes')"
+    />
+    <span class="symbol-unit">
+      {{ degreesSymbolUnit }}
+    </span>
+
+    @if (showMinutes) {
+      <input
+        #minutes
+        aria-label="Minutes"
+        [class.minutes]="showSeconds"
+        [class.minutes-seconds]="!showSeconds"
+        inputmode="decimal"
+        autocomplete="off"
+        [placeholder]="minutesPlaceholder | translate"
+        formControlName="minutes"
+        [maskito]="minutesMask"
+        (input)="handleInput('minutes', 'seconds')"
+        (keyup.backspace)="autoFocusPrev('minutes', 'degrees')"
+      />
+      <span class="symbol-unit">
+        {{ minutesSymbolUnit }}
+      </span>
+    }
+
+    @if (showSeconds) {
+      <input
+        #seconds
+        aria-label="Seconds"
+        class="seconds"
+        inputmode="decimal"
+        autocomplete="off"
+        [placeholder]="secondsPlaceholder | translate"
+        formControlName="seconds"
+        [maskito]="secondsMask"
+        (input)="handleInput('seconds', 'sign')"
+        (keyup.backspace)="autoFocusPrev('seconds', 'minutes')"
+      />
+      <span class="symbol-unit">
+        {{ secondsSymbolUnit }}
+      </span>
+    }
+
+    <!-- sign -->
+    @if (showSign) {
+      <span class="sign-spacer"></span>
+      <mat-select
+        #sign
+        aria-label="Sign"
+        class="sign"
+        formControlName="sign"
+        [placeholder]="
+          (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_PLACEHOLDER' : 'COMMON.LAT_LONG.LONG_SIGN_PLACEHOLDER')
+            | translate
+        "
+        (focusin)="sign.open()"
+        (selectionChange)="handleInput('sign')"
+      >
+        <mat-option [value]="1" (click)="sign.close()">
+          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_N' : 'COMMON.LAT_LONG.LONG_SIGN_E') | translate }}
+        </mat-option>
+        <mat-option [value]="-1" (click)="sign.close()">
+          {{ (type === 'latitude' ? 'COMMON.LAT_LONG.LAT_SIGN_S' : 'COMMON.LAT_LONG.LONG_SIGN_W') | translate }}
+        </mat-option>
+      </mat-select>
+    }
+  </div>
+}

package/src/app/shared/material/latlong/material.latlong-input.scss

@@ -0,0 +1,66 @@
+.mat-latlong-input-container {
+  display: inline-flex;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 200ms;
+  pointer-events: none;
+
+  --mat-select-arrow-transform: translateY(0);
+}
+
+input {
+  border: none;
+  background: none;
+  padding: 0;
+  outline: none;
+  font: inherit;
+  text-align: right;
+  color: var(--mdc-filled-text-field-input-text-color, var(--ion-text-color));
+
+  &::placeholder {
+    letter-spacing: -0.05em;
+    color: var(--mdc-filled-text-field-input-text-placeholder-color, var(--app-form-field-label-color));
+  }
+
+  &.degrees-only {
+    width: calc(100% - 0.5em);
+  }
+
+  &.degrees {
+    width: 1.9em;
+
+    &.latitude {
+      width: 1.3em;
+    }
+  }
+  &.minutes {
+    width: 1.7em;
+  }
+  &.minutes-seconds {
+    width: 3.5em;
+  }
+  &.seconds {
+    width: 3em;
+  }
+}
+
+.symbol-unit {
+  font-weight: bold;
+}
+
+.sign-spacer {
+  width: 0.25em;
+}
+
+.sign {
+  max-width: 2.6em;
+  color: inherit;
+}
+
+:host.label-floating {
+  .mat-latlong-input-container {
+    opacity: 1;
+    pointer-events: revert;
+  }
+}
+

package/src/app/shared/material/latlong/material.latlong-input.ts

@@ -0,0 +1,445 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Self,
+  ViewChild,
+} from '@angular/core';
+import { ControlValueAccessor, FormBuilder, NgControl, Validators } from '@angular/forms';
+import { isNil, isNilOrBlank, isNotNil, isNotNilOrBlank } from '../../functions';
+import {
+  computeDecimalDegrees,
+  computeDecimalPart,
+  ILatLongData,
+  LAT_LONG_PATTERN_MAX_DECIMALS,
+  LatLongPattern,
+  LatLongSign,
+  LatLongSignValue,
+  LatLongType,
+  splitDegreesToDDArray,
+  splitDegreesToDDMMArray,
+  splitDegreesToDDMMSSArray,
+} from './latlong.utils';
+import { MaskitoOptions } from '@maskito/core';
+import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
+import { Subject, Subscription } from 'rxjs';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { maskitoNumberOptionsGenerator } from '@maskito/kit';
+
+@Component({
+  selector: 'mat-latlong-input',
+  templateUrl: './material.latlong-input.html',
+  styleUrl: './material.latlong-input.scss',
+  providers: [{ provide: MatFormFieldControl, useExisting: MatLatLongFieldInput }],
+  host: {
+    '[class.label-floating]': 'shouldLabelFloat',
+    '[id]': 'id',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatLatLongFieldInput implements MatFormFieldControl<number>, ControlValueAccessor, OnInit, OnDestroy {
+  static nextId = 0;
+  @ViewChild('degrees', { read: ElementRef }) degreesInput: ElementRef;
+  @ViewChild('minutes', { read: ElementRef }) minutesInput: ElementRef;
+  @ViewChild('seconds', { read: ElementRef }) secondsInput: ElementRef;
+  @ViewChild('sign', { read: ElementRef }) signInput: ElementRef;
+
+  protected formGroup = inject(FormBuilder).group({
+    degrees: [''],
+    minutes: [''],
+    seconds: [''],
+    sign: [<LatLongSignValue>null],
+  });
+  stateChanges = new Subject<void>();
+  focused = false;
+  touched = false;
+  controlType = 'mat-latlong-input';
+  id = `mat-latlong-input-${MatLatLongFieldInput.nextId++}`;
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  get empty() {
+    if (this.readonly) {
+      return isNil(this.ngControl.value);
+    } else {
+      const {
+        value: { degrees, minutes, seconds },
+      } = this.formGroup;
+      return !degrees && !minutes && !seconds;
+    }
+  }
+
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
+
+  @Input('aria-describedby') userAriaDescribedBy: string;
+  placeholder: string; // Not used
+
+  get required(): boolean {
+    return this._required;
+  }
+
+  @Input()
+  set required(value: BooleanInput) {
+    this._required = coerceBooleanProperty(value);
+    this.stateChanges.next();
+    this.updateValidators();
+  }
+
+  private _required = false;
+
+  get disabled(): boolean {
+    return this._disabled;
+  }
+
+  @Input()
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+    if (this._disabled) {
+      this.formGroup.disable();
+    } else {
+      this.formGroup.enable();
+    }
+    this.stateChanges.next();
+  }
+
+  private _disabled = false;
+
+  get value(): number | null {
+    if (this.formGroup.valid) {
+      const parts = this.formGroup.value;
+      const degrees = this.safeParseFloat(parts.degrees);
+      const minutes = this.safeParseFloat(parts.minutes);
+      const seconds = this.safeParseFloat(parts.seconds);
+      const sign = parts.sign;
+      return this.formGroup.valid
+        ? isNil(degrees) || this.pattern === 'DD'
+          ? degrees
+          : computeDecimalDegrees(degrees, minutes, seconds, sign, this.maxDecimals)
+        : null;
+    }
+    return null;
+  }
+
+  @Input()
+  set value(value: number | null) {
+    const result = this.computeLatLongFormGroupValue(value);
+    // DEBUG
+    //console.debug(`${this.logPrefix} Setting value`, value, result);
+
+    this.formGroup.setValue({
+      degrees: result.degrees?.toString() || null,
+      minutes: result.minutes?.toString() || null,
+      seconds: result.seconds?.toString() || null,
+      sign: result.sign,
+    });
+    this.stateChanges.next();
+  }
+
+  get errorState(): boolean {
+    return this.formGroup.invalid && this.touched;
+  }
+
+  @Input() type: LatLongType;
+  @Input('latLongPattern') pattern: LatLongPattern;
+  @Input() defaultSign: LatLongSign;
+  @Input() maxDecimals: number;
+  @Input() readonly = false;
+
+  protected degreesSymbolUnit = '°';
+  protected minutesSymbolUnit = "'";
+  protected secondsSymbolUnit = '"';
+  protected showMinutes = false;
+  protected showSeconds = false;
+  protected showSign = false;
+  protected degreesMask: MaskitoOptions;
+  protected minutesMask: MaskitoOptions;
+  protected secondsMask: MaskitoOptions;
+  protected degreesPlaceholder: string;
+  protected minutesPlaceholder: string;
+  protected secondsPlaceholder: string;
+  protected lastInputMaxDecimals = LAT_LONG_PATTERN_MAX_DECIMALS;
+
+  private logPrefix = '[mat-latlong-input]';
+  private _subscription = new Subscription();
+  private cd = inject(ChangeDetectorRef);
+
+  constructor(
+    private _elementRef: ElementRef<HTMLElement>,
+    @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
+    @Optional() @Self() public ngControl: NgControl
+  ) {
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
+  }
+
+  ngOnInit() {
+    this.type = this.type || 'latitude';
+    this.pattern = this.pattern || 'DDMM';
+    this.showSign = this.pattern !== 'DD';
+
+    switch (this.pattern) {
+      case 'DD':
+        this.lastInputMaxDecimals = 7;
+        this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.DD_DDDDDDD_PLACEHOLDER' : 'COMMON.LAT_LONG.DDD_DDDDDDD_PLACEHOLDER';
+        this.degreesMask = maskitoNumberOptionsGenerator({
+          precision: this.lastInputMaxDecimals,
+          min: this.type === 'latitude' ? -90 : -180,
+          max: this.type === 'latitude' ? 90 : 180,
+          minusSign: '-',
+        });
+        break;
+      case 'DDMM':
+        this.lastInputMaxDecimals = 3;
+        this.showMinutes = true;
+        this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.DD_PLACEHOLDER' : 'COMMON.LAT_LONG.DDD_PLACEHOLDER';
+        this.minutesPlaceholder = 'COMMON.LAT_LONG.MM_MMM_PLACEHOLDER';
+        this.degreesMask = maskitoNumberOptionsGenerator({
+          precision: 0,
+          min: 0,
+          max: this.type === 'latitude' ? 90 : 180,
+        });
+        this.minutesMask = maskitoNumberOptionsGenerator({
+          precision: this.lastInputMaxDecimals,
+          min: 0,
+          max: 60 - computeDecimalPart(1, this.lastInputMaxDecimals),
+        });
+        break;
+      default: // Default is DDMMSS
+        this.lastInputMaxDecimals = 2;
+        this.showMinutes = true;
+        this.showSeconds = true;
+        this.degreesPlaceholder = this.type === 'latitude' ? 'COMMON.LAT_LONG.DD_PLACEHOLDER' : 'COMMON.LAT_LONG.DDD_PLACEHOLDER';
+        this.minutesPlaceholder = 'COMMON.LAT_LONG.MM_PLACEHOLDER';
+        this.secondsPlaceholder = 'COMMON.LAT_LONG.SS_SS_PLACEHOLDER';
+        this.degreesMask = maskitoNumberOptionsGenerator({
+          precision: 0,
+          min: 0,
+          max: this.type === 'latitude' ? 90 : 180,
+        });
+        this.minutesMask = maskitoNumberOptionsGenerator({
+          precision: 0,
+          min: 0,
+          max: 59,
+        });
+        this.secondsMask = maskitoNumberOptionsGenerator({
+          precision: this.lastInputMaxDecimals,
+          min: 0,
+          max: 60 - computeDecimalPart(1, this.lastInputMaxDecimals),
+        });
+        break;
+    }
+
+    // Update validators (add required to controls)
+    this.updateValidators();
+
+    if (this.readonly) {
+      this._subscription.add(this.ngControl.valueChanges.subscribe(() => this.cd.markForCheck()));
+    }
+  }
+
+  ngOnDestroy() {
+    this.stateChanges.complete();
+    this._subscription.unsubscribe();
+  }
+
+  onFocusIn(event: FocusEvent) {
+    if (!this.focused) {
+      this.focused = true;
+      this.stateChanges.next();
+    }
+  }
+
+  onFocusOut(event: FocusEvent) {
+    if (!this._elementRef.nativeElement.contains(event.relatedTarget as Element)) {
+      this.touched = true;
+      this.focused = false;
+      this.onTouched();
+      this.stateChanges.next();
+    }
+  }
+
+  handleInput(controlName: string, nextControlName?: string): void {
+    // Can autofocus next control ?
+    let focusNext = false;
+    switch (controlName) {
+      case 'degrees': {
+        const degrees = this.safeParseFloat(this.formGroup.value.degrees);
+        if (this.type === 'latitude' && (degrees === 0 || degrees > 9)) {
+          focusNext = true;
+        } else if (this.type === 'longitude' && (degrees === 0 || degrees > 18)) {
+          focusNext = true;
+        }
+        break;
+      }
+      case 'minutes': {
+        const minutes = this.safeParseFloat(this.formGroup.value.minutes);
+        if (minutes === 0 || minutes > 6) {
+          focusNext = true;
+        }
+        break;
+      }
+      case 'seconds': {
+        // focusNext = true;
+        break;
+      }
+    }
+
+    if (focusNext) {
+      this.autoFocusNext(controlName, nextControlName);
+    }
+    this.onChange(this.value);
+  }
+
+  autoFocusNext(controlName: string, nextControlName?: string): void {
+    if (!this.formGroup.controls[controlName].errors && nextControlName) {
+      this.getElementByName(nextControlName)?.focus();
+    }
+  }
+
+  autoFocusPrev(controlName: string, prevControlName: string): void {
+    if (isNilOrBlank(this.formGroup.controls[controlName].value)) {
+      this.getElementByName(prevControlName)?.focus();
+    }
+  }
+
+  getElementByName(name: string): HTMLElement | undefined {
+    switch (name) {
+      case 'degrees':
+        return this.degreesInput?.nativeElement;
+      case 'minutes':
+        return this.minutesInput?.nativeElement;
+      case 'seconds':
+        return this.secondsInput?.nativeElement;
+      case 'sign':
+        return this.signInput?.nativeElement;
+      default:
+        throw new Error(`${this.logPrefix} No HTMLElement with name '${name}'`);
+    }
+  }
+
+  setDescribedByIds(ids: string[]) {
+    const controlElement = this._elementRef.nativeElement.querySelector('.mat-latlong-input-container')!;
+    controlElement?.setAttribute('aria-describedby', ids.join(' '));
+  }
+
+  onContainerClick() {
+    // console.debug(`${this.logPrefix} DEBUG onContainerClick`);
+    if (this.readonly) return;
+    if (this.empty) {
+      this.degreesInput.nativeElement.focus();
+    } else if (isNilOrBlank(this.formGroup.value.minutes)) {
+      this.minutesInput.nativeElement.focus();
+    } else if (isNilOrBlank(this.formGroup.value.seconds)) {
+      this.secondsInput.nativeElement.focus();
+    } else if (isNil(this.formGroup.value.sign)) {
+      this.signInput.nativeElement.focus();
+    }
+  }
+
+  writeValue(value: number | null): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  private computeLatLongFormGroupValue(rawValue: number | string): ILatLongData {
+    const isLongitude = this.type === 'longitude';
+    const value = typeof rawValue === 'string' ? this.safeParseFloat(rawValue.replace(/,/g, '.')) : rawValue;
+    const result: ILatLongData = {
+      degrees: null,
+      minutes: null,
+      seconds: null,
+      sign: isNotNil(value)
+        ? value < 0
+          ? -1
+          : 1
+        : // Use default sign, if any
+          this.defaultSign
+          ? this.defaultSign === '-'
+            ? -1
+            : 1
+          : null,
+    };
+
+    if (value === 0) {
+      result.degrees = 0;
+    } else if (isNotNil(value)) {
+      // Parse options
+      const parseOptions = {
+        longitude: isLongitude,
+        pattern: this.pattern,
+        maxDecimals: this.lastInputMaxDecimals,
+        fixLatLong: true,
+      };
+
+      if (this.pattern === 'DD') {
+        const splitValue = splitDegreesToDDArray(value, parseOptions).slice(1) as number[]; // remove sign;
+        result.seconds = 0;
+        result.minutes = 0;
+        result.degrees = (splitValue[0] + computeDecimalPart(splitValue[1] ?? 0, this.lastInputMaxDecimals)) * (result.sign || 1);
+      } else if (this.pattern === 'DDMM') {
+        const splitValue = splitDegreesToDDMMArray(value, parseOptions);
+        result.seconds = 0;
+        result.minutes = Math.abs((splitValue[1] ?? 0) + computeDecimalPart(splitValue[2] ?? 0, this.lastInputMaxDecimals));
+        result.degrees = Math.abs(!result.minutes && isNilOrBlank(splitValue[0]) ? 0 : (splitValue[0] ?? 0));
+      } else {
+        // Default // DDMMSS
+        const splitValue = splitDegreesToDDMMSSArray(value, parseOptions);
+        result.seconds = Math.abs((splitValue[2] ?? 0) + computeDecimalPart(splitValue[3] ?? 0, this.lastInputMaxDecimals));
+        result.minutes = !result.seconds && !splitValue[1] ? 0 : Math.abs(splitValue[1] ?? 0);
+        result.degrees = !result.seconds && !result.minutes && isNilOrBlank(splitValue[0]) ? 0 : Math.abs(splitValue[0] ?? 0);
+      }
+    }
+
+    return result;
+  }
+
+  private safeParseFloat(value: string): number {
+    return isNotNilOrBlank(value) ? parseFloat(value) : undefined;
+  }
+
+  private updateValidators() {
+    const { minutes, seconds, sign } = this.formGroup.controls;
+
+    // Update minutes
+    if (this.showMinutes && this._required) {
+      minutes.addValidators(Validators.required);
+    } else {
+      minutes.removeValidators(Validators.required);
+    }
+
+    // Update seconds
+    if (this.showSeconds && this._required) {
+      seconds.addValidators(Validators.required);
+    } else {
+      seconds.removeValidators(Validators.required);
+    }
+
+    // Update sign
+    if (this.showSign && this._required) {
+      sign.addValidators(Validators.required);
+    } else {
+      sign.removeValidators(Validators.required);
+    }
+  }
+}

package/src/app/shared/material/latlong/material.latlong.html

@@ -0,0 +1,90 @@
+<mat-form-field
+  #formField
+  [floatLabel]="floatLabel | asFloatLabelType"
+  [appearance]="appearance"
+  [subscriptSizing]="subscriptSizing"
+  [class.mdc-text-field--invalid]="formControl.touched && formControl.invalid"
+  class="mat-latlong-field mat-latlong-field-{{ type }} {{ classList }}"
+>
+  <div matPrefix>
+    <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+  </div>
+
+  @if (floatLabel !== 'never' && placeholder | isNotNilOrBlank) {
+    <mat-label>{{ placeholder }}</mat-label>
+  }
+
+  <mat-latlong-input
+    #input
+    [formControl]="formControl"
+    [required]="required"
+    [disabled]="disabled"
+    [type]="type"
+    [latLongPattern]="pattern"
+    [defaultSign]="defaultSign"
+    [maxDecimals]="maxDecimals"
+    [readonly]="readonly"
+  ></mat-latlong-input>
+
+  <div matSuffix>
+    <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+  </div>
+</mat-form-field>
+
+<!-- Do the same as MatFromField since angular 15 (see component source)-->
+<div
+  class="mat-mdc-form-field-subscript-wrapper"
+  [class.mat-mdc-form-field-bottom-align]="subscriptSizing === 'fixed'"
+  [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
+>
+  @if (formControl.touched && formControl.invalid) {
+    <!-- errors -->
+    <div class="mat-mdc-form-field-error-wrapper">
+      @if (formControl.errors | mapKeys | arrayFirst; as errorKey) {
+        <mat-error>
+          {{ i18nErrorKeys | mapGet: errorKey | translate: (formControl.errors | mapGet: errorKey) }}
+        </mat-error>
+      } @else {
+        <ng-container *ngTemplateOutlet="matErrorTemplate"></ng-container>
+      }
+    </div>
+  } @else {
+    <!-- hints -->
+    <mat-hint>
+      <ng-container *ngTemplateOutlet="matHintTemplate"></ng-container>
+    </mat-hint>
+  }
+</div>
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+
+<ng-template #matSuffixTemplate>
+  @if (clearable && !readonly) {
+    <button
+      matSuffix
+      mat-icon-button
+      tabindex="-1"
+      type="button"
+      (click)="clearValue($event)"
+      [hidden]="formControl.value | isNil"
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  }
+
+  <ng-content select="[matSuffix]"></ng-content>
+</ng-template>
+
+<ng-template #matErrorTemplate>
+  <ng-content select="mat-error,[matError]"></ng-content>
+</ng-template>
+
+<ng-template #matHintTemplate>
+  <div class="mat-mdc-form-field-hint-wrapper">
+    <ng-content select="mat-hint:not([align='end']),[matHint]"></ng-content>
+    <div class="mat-mdc-form-field-hint-spacer"></div>
+    <ng-content select="mat-hint[align='end']"></ng-content>
+  </div>
+</ng-template>