@sumaris-net/ngx-components 18.14.0 → 18.14.1

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

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

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

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

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