@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/shared/material/test/test-component.ts

@@ -1,295 +0,0 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AsyncPipe, JsonPipe } from '@angular/common';
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  forwardRef,
-  inject,
-  input,
-  model,
-  OnDestroy,
-  signal,
-  untracked,
-  viewChild,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import {
-  AbstractControl,
-  ControlValueAccessor,
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  FormsModule,
-  NgControl,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
-import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { Subject } from 'rxjs';
-import { IonicModule } from '@ionic/angular';
-
-/** @title Form field with custom telephone number input control. */
-@Component({
-  selector: 'form-field-custom-control-example',
-  template: `
-    <ion-header>
-      <ion-toolbar color="primary">
-        <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
-        </ion-buttons>
-
-        <ion-title>Custom field test page</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <div [formGroup]="form">
-        <mat-form-field>
-          <mat-label>Phone number</mat-label>
-          <example-tel-input formControlName="tel" required></example-tel-input>
-          <mat-icon matSuffix>phone</mat-icon>
-          <mat-hint>Include area code</mat-hint>
-        </mat-form-field>
-        <p>Entered value: {{ form.valueChanges | async | json }}</p>
-      </div>
-    </ion-content>
-  `,
-  standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, forwardRef(() => MyTelInput), MatIconModule, AsyncPipe, JsonPipe, IonicModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FormFieldCustomControlExample {
-  readonly form = new FormGroup({
-    tel: new FormControl(null),
-  });
-}
-
-/** Data structure for holding telephone number. */
-export class MyTel {
-  constructor(
-    public area: string,
-    public exchange: string,
-    public subscriber: string
-  ) {}
-}
-
-/** Custom `MatFormFieldControl` for telephone number input. */
-@Component({
-  selector: 'example-tel-input',
-  templateUrl: 'test-component.html',
-  styleUrl: 'test-component.css',
-  providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }],
-  host: {
-    '[class.example-floating]': 'shouldLabelFloat',
-    '[id]': 'id',
-  },
-  standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, IonicModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
-  static nextId = 0;
-  readonly areaInput = viewChild.required<HTMLInputElement>('area');
-  readonly exchangeInput = viewChild.required<HTMLInputElement>('exchange');
-  readonly subscriberInput = viewChild.required<HTMLInputElement>('subscriber');
-  ngControl = inject(NgControl, { optional: true, self: true });
-  readonly parts: FormGroup<{
-    area: FormControl<string | null>;
-    exchange: FormControl<string | null>;
-    subscriber: FormControl<string | null>;
-  }>;
-  readonly stateChanges = new Subject<void>();
-  readonly touched = signal(false);
-  readonly controlType = 'example-tel-input';
-  readonly id = `example-tel-input-${MyTelInput.nextId++}`;
-  readonly _userAriaDescribedBy = input<string>('', { alias: 'aria-describedby' });
-  readonly _placeholder = input<string>('', { alias: 'placeholder' });
-  readonly _required = input<boolean, unknown>(false, {
-    alias: 'required',
-    transform: booleanAttribute,
-  });
-  readonly _disabledByInput = input<boolean, unknown>(false, {
-    alias: 'disabled',
-    transform: booleanAttribute,
-  });
-  readonly _value = model<MyTel | null>(null, { alias: 'value' });
-  onChange = (_: any) => {};
-  onTouched = () => {};
-
-  protected readonly _formField = inject(MAT_FORM_FIELD, {
-    optional: true,
-  });
-
-  private readonly _focused = signal(false);
-  private readonly _disabledByCva = signal(false);
-  private readonly _disabled = computed(() => this._disabledByInput() || this._disabledByCva());
-  private readonly _focusMonitor = inject(FocusMonitor);
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  get focused(): boolean {
-    return this._focused();
-  }
-
-  get empty() {
-    const {
-      value: { area, exchange, subscriber },
-    } = this.parts;
-
-    return !area && !exchange && !subscriber;
-  }
-
-  get shouldLabelFloat() {
-    return this.focused || !this.empty;
-  }
-
-  get userAriaDescribedBy() {
-    return this._userAriaDescribedBy();
-  }
-
-  get placeholder(): string {
-    return this._placeholder();
-  }
-
-  get required(): boolean {
-    return this._required();
-  }
-
-  get disabled(): boolean {
-    return this._disabled();
-  }
-
-  get value(): MyTel | null {
-    return this._value();
-  }
-
-  get errorState(): boolean {
-    return this.parts.invalid && this.touched();
-  }
-
-  constructor() {
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-
-    this.parts = inject(FormBuilder).group({
-      area: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-      exchange: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-      subscriber: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
-    });
-
-    effect(() => {
-      // Read signals to trigger effect.
-      this._placeholder();
-      this._required();
-      this._disabled();
-      this._focused();
-      // Propagate state changes.
-      untracked(() => this.stateChanges.next());
-    });
-
-    effect(() => {
-      if (this._disabled()) {
-        untracked(() => this.parts.disable());
-      } else {
-        untracked(() => this.parts.enable());
-      }
-    });
-
-    effect(() => {
-      const value = this._value() || new MyTel('', '', '');
-      untracked(() => this.parts.setValue(value));
-    });
-
-    this.parts.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
-      this.stateChanges.next();
-    });
-
-    this.parts.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
-      const tel = this.parts.valid
-        ? new MyTel(this.parts.value.area || '', this.parts.value.exchange || '', this.parts.value.subscriber || '')
-        : null;
-      this._updateValue(tel);
-    });
-  }
-
-  ngOnDestroy() {
-    this.stateChanges.complete();
-    this._focusMonitor.stopMonitoring(this._elementRef);
-  }
-
-  onFocusIn() {
-    if (!this._focused()) {
-      this._focused.set(true);
-    }
-  }
-
-  onFocusOut(event: FocusEvent) {
-    if (!this._elementRef.nativeElement.contains(event.relatedTarget as Element)) {
-      this.touched.set(true);
-      this._focused.set(false);
-      this.onTouched();
-    }
-  }
-
-  autoFocusNext(control: AbstractControl, nextElement?: HTMLInputElement): void {
-    if (!control.errors && nextElement) {
-      this._focusMonitor.focusVia(nextElement, 'program');
-    }
-  }
-
-  autoFocusPrev(control: AbstractControl, prevElement: HTMLInputElement): void {
-    if (control.value.length < 1) {
-      this._focusMonitor.focusVia(prevElement, 'program');
-    }
-  }
-
-  setDescribedByIds(ids: string[]) {
-    const controlElement = this._elementRef.nativeElement.querySelector('.example-tel-input-container')!;
-    controlElement.setAttribute('aria-describedby', ids.join(' '));
-  }
-
-  onContainerClick() {
-    if (this.parts.controls.subscriber.valid) {
-      this._focusMonitor.focusVia(this.subscriberInput(), 'program');
-    } else if (this.parts.controls.exchange.valid) {
-      this._focusMonitor.focusVia(this.subscriberInput(), 'program');
-    } else if (this.parts.controls.area.valid) {
-      this._focusMonitor.focusVia(this.exchangeInput(), 'program');
-    } else {
-      this._focusMonitor.focusVia(this.areaInput(), 'program');
-    }
-  }
-
-  writeValue(tel: MyTel | null): void {
-    this._updateValue(tel);
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this._disabledByCva.set(isDisabled);
-  }
-
-  _handleInput(control: AbstractControl, nextElement?: HTMLInputElement): void {
-    this.autoFocusNext(control, nextElement);
-    this.onChange(this.value);
-  }
-
-  private _updateValue(tel: MyTel | null) {
-    const current = this._value();
-    if (tel === current || (tel?.area === current?.area && tel?.exchange === current?.exchange && tel?.subscriber === current?.subscriber)) {
-      return;
-    }
-    this._value.set(tel);
-  }
-}

package/src/app/shared/material/testing/common.test.html

@@ -1,227 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Common field test page</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <form class="form-container" [formGroup]="form" (ngSubmit)="doSubmit($event)">
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <!-- Empty value -->
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Empty value</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>
-                      {{ stringify(form.controls.empty.value) }}
-                    </pre>
-                    <br />
-                    <pre>
-                      formControl.valid? {{ form.controls.empty?.valid }}
-                    </pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-form-field>
-                <mat-label>Value</mat-label>
-                <input matInput formControlName="empty" />
-              </mat-form-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <!-- Empty value + required -->
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Empty value (required)</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-form-field>
-                <mat-label>Value</mat-label>
-                <input matInput formControlName="emptyRequired" [required]="true" />
-
-                <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>
-              </mat-form-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- Enable  -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">With value</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.enable.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-form-field>
-                <mat-label>Value</mat-label>
-                <input matInput formControlName="enable" [required]="true" />
-              </mat-form-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- Disable -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Disable</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.disable.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-form-field>
-                <mat-label>Value</mat-label>
-                <input matInput formControlName="disable" [required]="true" />
-              </mat-form-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- Readonly  -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Readonly toggle</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-checkbox
-                (change)="desktopReadonlyField.readOnly = $event.checked"
-                [checked]="desktopReadonlyField.readOnly"
-              >Readonly ?</mat-checkbox>
-              <mat-form-field>
-                <mat-label>Value</mat-label>
-                <input matInput #desktopReadonlyField formControlName="readonly" [readOnly]="true" />
-              </mat-form-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- Boolean -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Boolean</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.disable.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-boolean-field formControlName="boolean" placeholder="Boolean"></mat-boolean-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- MatSelect  -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Mat Select</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.readonly.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-form-field>
-                <mat-label>Select</mat-label>
-                <mat-select [formControl]="form.controls['select'] | formGetControl" placeholder="Select a value">
-                  <mat-select-trigger>
-                    {{ (form | formGetValue: 'select' | propertyGet: 'label' | translate) || '' }}
-                  </mat-select-trigger>
-                  @for (item of statusList; track item) {
-                    <mat-option [value]="item">{{ item.label | translate }}</mat-option>
-                  }
-                </mat-select>
-
-
-              </mat-form-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <!-- MatDateTime  -->
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Mat DateTime</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ stringify(form.controls.date.value) }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <mat-date-time-field
-                [formControl]="form.controls['date'] | formGetControl"
-                placeholder="Date/Time">
-              </mat-date-time-field>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-</ion-content>

package/src/app/shared/material/testing/common.test.ts

@@ -1,126 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { AppFormUtils } from '../../../core/form/form.utils';
-import { debounceTime } from 'rxjs/operators';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { SharedFormGroupValidators, SharedValidators } from '../../validator/validators';
-import { isMobile } from '../../platforms';
-import { DateUtils, toDateISOString } from '../../dates';
-import { StatusList } from '../../../core/services/model/referential.model';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'mat-common-test',
-  templateUrl: './common.test.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatCommonTestPage implements OnInit, OnDestroy {
-  showLogPanel = true;
-  logContent = '';
-
-  form: UntypedFormGroup;
-
-  statusList = StatusList;
-
-  private subscription = new Subscription();
-
-  constructor(
-    protected formBuilder: UntypedFormBuilder,
-    protected cd: ChangeDetectorRef
-  ) {
-    this.form = formBuilder.group(
-      {
-        empty: [null],
-        emptyRequired: [null, Validators.required],
-        enable: [null, Validators.required],
-        disable: [null, Validators.required],
-        readonly: [null],
-        select: [null, Validators.required],
-        boolean: [null],
-        date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
-      },
-      {
-        validators: SharedFormGroupValidators.dateRange('empty', 'enable'),
-      }
-    );
-
-    const disableControl = this.form.get('disable');
-    disableControl.disable();
-
-    // Copy the 'enable' value, into the disable control
-    this.subscription.add(this.form.get('enable').valueChanges.subscribe((value) => disableControl.setValue(value)));
-
-    this.showLogPanel = this.showLogPanel || isMobile(window);
-  }
-
-  ngOnInit() {
-    setTimeout(() => this.loadData(), 250);
-  }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
-
-  // 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(),
-      select: null,
-      boolean: null,
-      date: null,
-    };
-
-    this.form.setValue(data);
-
-    this.log('[test-page] Data loaded: ' + JSON.stringify(data));
-
-    this.subscription.add(
-      this.form
-        .get('empty')
-        .valueChanges.pipe(debounceTime(300))
-        .subscribe((value) => this.log('[test-page] Value n°1: ' + JSON.stringify(value)))
-    );
-
-    this.subscription.add(
-      this.form
-        .get('enable')
-        .valueChanges.pipe(debounceTime(300))
-        .subscribe((value) => this.log('[test-page] Value n°2: ' + JSON.stringify(value)))
-    );
-  }
-
-  doSubmit(_) {
-    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();
-  }
-
-  stringify = JSON.stringify;
-
-  /* -- protected methods -- */
-}