@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/shared/material/datetime/testing/mat-dateshort.test.ts

@@ -1,133 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { debounceTime } from 'rxjs/operators';
-import { SharedFormGroupValidators, SharedValidators } from '../../../validator/validators';
-import { AppFormUtils } from '../../../../core/form/form.utils';
-import { DateUtils, toDateISOString } from '../../../dates';
-import 'moment-timezone';
-import { isMobile } from '../../../platforms';
-import { Subscription, timer } from 'rxjs';
-
-@Component({
-  selector: 'app-data-short-test',
-  templateUrl: './mat-dateshort.test.html',
-})
-export class DateShortTestPage implements OnInit {
-  showLogPanel = true;
-  logContent = '';
-
-  memoryHide = false;
-  memoryMobile = true;
-  memoryTimer: Subscription;
-
-  form: UntypedFormGroup;
-  mode: 'mobile' | 'desktop' | 'memory' | 'temp' = 'mobile';
-
-  constructor(
-    protected formBuilder: UntypedFormBuilder,
-    protected cd: ChangeDetectorRef
-  ) {
-    this.form = formBuilder.group(
-      {
-        empty: [null, SharedValidators.validDateAllowNoTime],
-        emptyRequired: [null, Validators.compose([Validators.required, SharedValidators.validDateAllowNoTime])],
-        enable: [null, Validators.required],
-        disable: [null, Validators.required],
-        readonly: [null],
-        hint: [null],
-      },
-      {
-        validators: SharedFormGroupValidators.dateRange('empty', 'enable'),
-      }
-    );
-
-    const disableControl = this.form.get('disable');
-    disableControl.disable();
-
-    // Copy the 'enable' value, into the disable control
-    this.form.get('enable').valueChanges.subscribe((value) => disableControl.setValue(value));
-
-    this.showLogPanel = this.showLogPanel || isMobile(window);
-  }
-
-  ngOnInit() {
-    setTimeout(() => this.loadData(), 250);
-  }
-
-  toggleMode(value) {
-    if (this.mode !== value) {
-      this.mode = value;
-      this.stopMemoryTimer();
-    }
-  }
-
-  // Load the form with data
-  async loadData() {
-    const now = DateUtils.moment();
-
-    const data = {
-      empty: null, // toDateISOString(now.clone().add(2, 'hours')),
-      emptyRequired: null,
-      enable: toDateISOString(now),
-      disable: now.clone(),
-      readonly: now.clone(),
-      hint: null,
-    };
-
-    this.form.setValue(data);
-
-    this.log('[test-page] Data loaded: ' + JSON.stringify(data));
-
-    this.form
-      .get('empty')
-      .valueChanges.pipe(debounceTime(300))
-      .subscribe((value) => this.log('[test-page] Value n°1: ' + JSON.stringify(value)));
-
-    this.form
-      .get('enable')
-      .valueChanges.pipe(debounceTime(300))
-      .subscribe((value) => this.log('[test-page] Value n°2: ' + JSON.stringify(value)));
-  }
-
-  doSubmit(event) {
-    this.form.markAllAsTouched();
-    this.log('[test-page] Form content: ' + JSON.stringify(this.form.value));
-    this.log('[test-page] Form status: ' + this.form.status);
-    if (this.form.invalid) {
-      this.log('[test-page] Form errors: ' + JSON.stringify(this.form.errors));
-
-      // DEBUG
-      AppFormUtils.logFormErrors(this.form);
-    }
-  }
-
-  log(message: string) {
-    console.debug(message);
-
-    if (this.showLogPanel) {
-      this.logContent += message + '<br/>';
-      this.cd.markForCheck();
-    }
-  }
-
-  clearLogPanel() {
-    this.logContent = '';
-    this.cd.markForCheck();
-  }
-
-  startMemoryTimer() {
-    this.memoryTimer = timer(50, 50).subscribe(() => {
-      this.memoryHide = !this.memoryHide;
-    });
-  }
-
-  stopMemoryTimer() {
-    this.memoryTimer?.unsubscribe();
-    this.memoryTimer = null;
-    this.memoryHide = false;
-  }
-
-  stringify = JSON.stringify;
-
-  /* -- protected methods -- */
-}

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

@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatCommonModule, MatRippleModule } from '@angular/material/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { SharedPipesModule } from '../../pipes/pipes.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatDuration } from './material.duration';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MaskitoDirective } from '@maskito/angular';
-import { SharedDirectivesModule } from '../../directives/directives.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    ReactiveFormsModule,
-    SharedPipesModule,
-    MatCommonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatRippleModule,
-    MatMomentDateModule,
-    TranslateModule.forChild(),
-    MaskitoDirective,
-    SharedDirectivesModule,
-  ],
-  exports: [MatDuration],
-  declarations: [MatDuration],
-})
-export class SharedMatDurationModule {}

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

@@ -1,18 +0,0 @@
-export const DEFAULT_MAX_DECIMALS = 7;
-
-// 111:11  = 111.11 (with maxDecimals=2)
-export function parseDuration(input: string, maxDecimals?: number, placeholderChar?: string): number | null {
-  let duration = input || '';
-  // Make to remove placeholder chars
-  while (duration.indexOf(placeholderChar) !== -1) {
-    duration = duration.replace(placeholderChar, '');
-  }
-
-  const durationParts = duration.split(':');
-  const hour = parseInt(durationParts[0] || '0');
-  const minute = parseInt(durationParts[1] || '0');
-
-  const powDecimal = Math.pow(10, maxDecimals);
-  const value = hour + minute / 60;
-  return Math.trunc(value * powDecimal + 0.5) / powDecimal;
-}

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

@@ -1,116 +0,0 @@
-<!-- readonly -->
-@if (readonly) {
-  <mat-form-field
-    [floatLabel]="floatLabel | asFloatLabelType"
-    [appearance]="appearance"
-    class="mat-form-field-disabled"
-    >
-    @if (floatLabel !== 'never' && !!placeholder) {
-      <mat-label translate>COMMON.TIME</mat-label>
-    }
-    <input matInput hidden type="text" readonly="true" [formControl]="formControl" />
-    <ion-text>{{ formControl.value | duration }}</ion-text>
-  </mat-form-field>
-} @else {
-  <!-- writable -->
-  <mat-form-field
-    [floatLabel]="floatLabel | asFloatLabelType"
-    [appearance]="appearance"
-    [class.mat-form-field-disabled]="formControl.disabled"
-    [class.mat-form-field-invalid]="formControl.touched && formControl.invalid"
-    >
-    @if (floatLabel !== 'never' && !!placeholder) {
-      <mat-label translate>COMMON.TIME</mat-label>
-    }
-    <div matPrefix><ng-content select="[matPrefix]"></ng-content></div>
-    <input
-      matInput
-      #matInput
-      type="text"
-      autocomplete="off"
-      [maskito]="'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask"
-      [formControl]="textControl"
-      [placeholder]="'COMMON.DURATION_PLACEHOLDER' | translate"
-      [required]="required"
-      (keydown.tab)="moveCaretToSeparator($event, true)"
-      (keydown.shift.tab)="moveCaretToSeparator($event, false)"
-      (keyup.escape)="preventEvent($event)"
-      (blur)="checkIfTouched()"
-      [tabindex]="tabindex !== undefined ? tabindex + 1 : undefined"
-      />
-    <!-- errors -->
-    @if (!formControl.hasError('required') && textControl.hasError('pattern')) {
-      <mat-error translate>
-        ERROR.FIELD_NOT_VALID_PATTERN
-      </mat-error>
-    }
-    @if (formControl.hasError('required')) {
-      <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
-    }
-    @if (formControl.hasError('min')) {
-      <mat-error>
-        {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}
-      </mat-error>
-    }
-    @if (formControl.hasError('max')) {
-      <mat-error>
-        {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}
-      </mat-error>
-    }
-    <ng-content select="mat-error"></ng-content>
-  </mat-form-field>
-}
-
-<!-- writable -->
-<ng-template #writable>
-  <mat-form-field
-    [floatLabel]="floatLabel | asFloatLabelType"
-    [appearance]="appearance"
-    [class.mat-form-field-disabled]="formControl.disabled"
-    [class.mat-form-field-invalid]="formControl.touched && formControl.invalid"
-    >
-    @if (floatLabel !== 'never' && !!placeholder) {
-      <mat-label translate>COMMON.TIME</mat-label>
-    }
-
-    <div matPrefix><ng-content select="[matPrefix]"></ng-content></div>
-
-    <input
-      matInput
-      #matInput
-      type="text"
-      autocomplete="off"
-      [maskito]="'COMMON.DURATION_PLACEHOLDER' | translate | maskitoPlaceholder: durationMask"
-      [formControl]="textControl"
-      [placeholder]="'COMMON.DURATION_PLACEHOLDER' | translate"
-      [required]="required"
-      (keydown.tab)="moveCaretToSeparator($event, true)"
-      (keydown.shift.tab)="moveCaretToSeparator($event, false)"
-      (keyup.escape)="preventEvent($event)"
-      (blur)="checkIfTouched()"
-      [tabindex]="tabindex !== undefined ? tabindex + 1 : undefined"
-      />
-
-    <!-- errors -->
-    @if (!formControl.hasError('required') && textControl.hasError('pattern')) {
-      <mat-error translate>
-        ERROR.FIELD_NOT_VALID_PATTERN
-      </mat-error>
-    }
-    @if (formControl.hasError('required')) {
-      <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
-    }
-    @if (formControl.hasError('min')) {
-      <mat-error>
-        {{ (compact ? 'ERROR.FIELD_MIN_COMPACT' : 'ERROR.FIELD_MIN') | translate: formControl.errors.min }}
-      </mat-error>
-    }
-    @if (formControl.hasError('max')) {
-      <mat-error>
-        {{ (compact ? 'ERROR.FIELD_MAX_COMPACT' : 'ERROR.FIELD_MAX') | translate: formControl.errors.max }}
-      </mat-error>
-    }
-
-    <ng-content select="mat-error"></ng-content>
-  </mat-form-field>
-</ng-template>

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

@@ -1,28 +0,0 @@
-:host {
-  display: inline-block;
-  width: 100%;
-  min-width: 140px;
-  position: relative;
-  --ion-grid-column-padding: 0;
-}
-
-mat-form-field {
-  width: 100%;
-
-  .mat-form-field-subscript-wrapper {
-    overflow: visible;
-    top: 100%;
-    .mat-form-field-hint-wrapper {
-      display: flex;
-
-      .mat-form-field-hint-spacer {
-        flex: 1 0 1em;
-      }
-    }
-  }
-}
-
-mat-error {
-  text-align: right;
-  width: 100%;
-}

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

@@ -1,308 +0,0 @@
-import {
-  booleanAttribute,
-  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 {
-  ControlValueAccessor,
-  FormGroupDirective,
-  NG_VALUE_ACCESSOR,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  ValidationErrors,
-  Validators,
-} from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { Moment } from 'moment';
-import { DEFAULT_PLACEHOLDER_CHAR } from '../../constants';
-import { isBlankString, isNil, isNilOrBlank, isNotNilBoolean } from '../../functions';
-import { InputElement, moveInputCaretToSeparator, setTabIndex } from '../../inputs';
-import { isFocusableElement } from '../../focusable';
-import { DEFAULT_MAX_DECIMALS, parseDuration } from './duration.utils';
-import { BehaviorSubject, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { MatFormFieldAppearance } from '@angular/material/form-field';
-import { AppFloatLabelType } from '../../form/field.model';
-import { DateUtils } from '../../dates';
-
-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 DURATION_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;
-  maskitoPlaceholder: string;
-  readonly durationMask = DURATION_MASK;
-
-  @Input({ transform: booleanAttribute }) disabled = false;
-  @Input() formControl: UntypedFormControl;
-  @Input() formControlName: string;
-  @Input() placeholder: string;
-  @Input() floatLabel: AppFloatLabelType = 'auto';
-  @Input() appearance: MatFormFieldAppearance;
-  @Input({ transform: booleanAttribute }) readonly = false;
-  @Input({ transform: booleanAttribute }) required: boolean;
-  @Input({ transform: booleanAttribute }) 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;
-  }
-
-  protected dayUnit: string;
-
-  constructor(
-    platform: Platform,
-    private dateAdapter: DateAdapter<Moment>,
-    private translate: TranslateService,
-    private formBuilder: UntypedFormBuilder,
-    private cd: ChangeDetectorRef,
-    @Optional() private formGroupDir: FormGroupDirective
-  ) {
-    this.dayUnit = translate.instant('COMMON.DAY_UNIT');
-    this.maskitoPlaceholder = translate.instant('COMMON.DURATION_PLACEHOLDER');
-  }
-
-  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;
-
-    // DEBUG
-    //console.debug(`[mat-duration] Formatted hour: ${this._value} to ${formatDuration(this._value)}`);
-
-    // Set form value
-
-    this.textControl.patchValue(DateUtils.durationToString(this._value, this.dayUnit), { 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 || value === this.maskitoPlaceholder || isNilOrBlank(value)) return; // Skip
-    this.writing = true;
-
-    // DEBUG
-    //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);
-
-    // DEBUG
-    //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();
-  }
-}