@sumaris-net/ngx-components 18.14.0 → 18.14.2

package/src/app/core/form/text-popover/testing/text-popover.testing.ts

@@ -1,76 +0,0 @@
-import { Component } from '@angular/core';
-import { PopoverController, ToastController } from '@ionic/angular';
-import { TextPopover, TextPopoverOptions } from '../text-popover.component';
-import { TranslateService } from '@ngx-translate/core';
-import { PlatformService } from '../../../services/platform.service';
-
-@Component({
-  selector: 'text-popover-testing',
-  templateUrl: 'text-popover.testing.html',
-})
-export class TextPopoverTestingPage {
-  constructor(
-    private popoverController: PopoverController,
-    private toastController: ToastController,
-    private translate: TranslateService,
-    private platform: PlatformService
-  ) {}
-
-  async showPopover(event: Event, opts?: Partial<TextPopoverOptions>) {
-    const modal = await this.popoverController.create({
-      component: TextPopover,
-      componentProps: <TextPopoverOptions>{
-        title: 'modalTitle',
-        headerColor: 'primary',
-        placeholder: 'your text',
-        ...opts,
-      },
-      backdropDismiss: false,
-      keyboardClose: false,
-      event,
-      translucent: true,
-      cssClass: 'popover-large',
-    });
-
-    await modal.present();
-    const { data } = await modal.onDidDismiss();
-
-    if (data) {
-      console.info('Popover result: ', data);
-    }
-  }
-
-  protected async showSharePopoverWithButtons(event: UIEvent, opts?: Partial<TextPopoverOptions>) {
-    opts = {
-      ...opts,
-      text:
-        opts?.multiline !== false
-          ? 'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit'
-          : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      editing: false,
-      headerButtons: [
-        {
-          icon: 'copy',
-          text: 'Copy',
-          fill: 'outline',
-          side: 'end',
-          handler: async (value: string) => {
-            await this.platform.copyToClipboard(
-              {
-                label: opts?.title,
-                string: value,
-              },
-              {
-                message: 'INFO.COPY_SUCCEED',
-              }
-            );
-
-            return false; // Avoid dismiss
-          },
-        },
-      ],
-    };
-
-    return this.showPopover(event, opts);
-  }
-}

package/src/app/core/form/text-popover/text-popover.component.html

@@ -1,89 +0,0 @@
-<ion-header *ngIf="showHeader">
-  <ion-toolbar [color]="headerColor">
-    <ion-buttons slot="start">
-      <ion-button *ngIf="mobile && editing" (click)="cancel()" [title]="'COMMON.BTN_CANCEL' | translate">
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-      <ion-button
-        *ngFor="let button of headerButtons | arrayFilter: isStartSide"
-        [fill]="button.fill"
-        [color]="button.color"
-        (click)="clickButton(button)"
-      >
-        <ion-icon *ngIf="button.icon" [slot]="button.text ? 'start' : 'icon-only'" [name]="button.icon"></ion-icon>
-        <ion-text *ngIf="button.text">{{ button.text | translate }}</ion-text>
-      </ion-button>
-    </ion-buttons>
-
-    <ion-title *ngIf="title">{{ title | translate }}</ion-title>
-
-    <ion-buttons slot="end">
-      <ion-button
-        *ngFor="let button of headerButtons | arrayFilter: isEndSide"
-        [fill]="button.fill"
-        [color]="button.color"
-        (click)="clickButton(button)"
-      >
-        <ion-icon *ngIf="button.icon" [slot]="button.text ? 'start' : 'icon-only'" [name]="button.icon"></ion-icon>
-        <ion-text *ngIf="button.text">{{ button.text | translate }}</ion-text>
-      </ion-button>
-
-      <ng-container *ngIf="mobile">
-        <ion-button
-          *ngIf="editing"
-          (click)="onValidate($event)"
-          [disabled]="disabled"
-          [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate"
-        >
-          <ion-icon slot="icon-only" name="checkmark"></ion-icon>
-        </ion-button>
-        <ion-button *ngIf="!editing" (click)="cancel()" [title]="'COMMON.BTN_CLOSE' | translate">
-          <ion-icon slot="icon-only" name="close"></ion-icon>
-        </ion-button>
-      </ng-container>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding" [class.has-header]="showHeader" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
-  <ion-item *ngIf="form.error" visible-xs visible-sm visible-mobile lines="none">
-    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-    <ion-label color="danger" class="error" [innerHTML]="form.error | translate"></ion-label>
-  </ion-item>
-
-  <app-text-form
-    #form
-    [standalone]="true"
-    [placeholder]="placeholder"
-    [multiline]="multiline"
-    [maxLength]="maxLength"
-    [autoHeight]="autoHeight"
-    [autofocus]="editing && autofocus"
-    [validator]="validator"
-    (onSubmit)="onValidate($event)"
-  ></app-text-form>
-</ion-content>
-
-<ion-footer *ngIf="showFooter">
-  <ion-toolbar>
-    <ion-row class="ion-no-padding" nowrap>
-      <ion-col></ion-col>
-
-      <ion-col size="auto">
-        <ion-button fill="clear" color="dark" (click)="cancel()">
-          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-        </ion-button>
-        <ion-button
-          [fill]="disabled ? 'clear' : 'solid'"
-          (click)="onValidate($event)"
-          (keyup.enter)="onValidate($event)"
-          color="tertiary"
-          [disabled]="disabled"
-          [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate"
-        >
-          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-toolbar>
-</ion-footer>

package/src/app/core/form/text-popover/text-popover.component.scss

@@ -1,7 +0,0 @@
-ion-content {
-  --textarea-height: 11.5em; // ~ 10 lines
-
-  &.has-header {
-    --textarea-height: calc(11.5em - var(--ion-toolbar-height, 0em));
-  }
-}

package/src/app/core/form/text-popover/text-popover.component.ts

@@ -1,176 +0,0 @@
-import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { PopoverController, PopoverOptions } from '@ionic/angular';
-import { Subscription } from 'rxjs';
-import { TranslateService } from '@ngx-translate/core';
-import { TextForm } from '../../../shared/material/text/text-form.component';
-import { logFormErrors, waitWhilePending } from '../../../shared/forms';
-import { ValidatorFn } from '@angular/forms';
-import { Color, OverlayEventDetail } from '@ionic/core';
-import { isNotEmptyArray, isNotNilOrBlank, toBoolean } from '../../../shared/functions';
-
-export interface TextPopoverOptions {
-  title?: string;
-  text?: string;
-  placeholder?: string;
-  editing?: boolean;
-  multiline?: boolean;
-  autoHeight?: boolean;
-  maxLength?: number;
-  autofocus?: boolean;
-  validator?: ValidatorFn;
-  // Header stuff
-  showHeader?: boolean;
-  headerColor?: Color;
-  headerButtons?: TextPopoverButton[];
-  // Footer stuff
-  showFooter?: boolean;
-}
-
-export interface TextPopoverButton {
-  text?: string;
-  icon?: string;
-  color?: Color;
-  fill?: 'outline' | 'clear' | 'solid';
-  side?: 'start' | 'end';
-  role?: 'cancel' | string;
-  cssClass?: string | string[];
-  handler?: (value: string) => boolean | void | Promise<boolean | void>;
-}
-
-@Component({
-  selector: 'app-text-popover',
-  templateUrl: './text-popover.component.html',
-  styleUrls: ['./text-popover.component.scss'],
-})
-export class TextPopover implements OnInit, AfterViewInit, OnDestroy, TextPopoverOptions {
-  /**
-   * Displays a popover using the provided controller, event, and options.
-   *
-   * @param {PopoverController} ctrl - The popover controller used to create and manage the popover.
-   * @param {Event} event - The event that triggers the display of the popover.
-   * @param {TextPopoverOptions} opts - The options specific to the text popover component.
-   * @param {Partial<PopoverOptions>} [popoverOpts] - Optional additional options for the popover.
-   * @return {Promise<OverlayEventDetail>} A promise that resolves with the details of the overlay event once the popover is dismissed.
-   */
-  static async show(
-    ctrl: PopoverController,
-    event: Event,
-    opts: TextPopoverOptions,
-    popoverOpts?: Partial<PopoverOptions>
-  ): Promise<OverlayEventDetail> {
-    const modal = await ctrl.create({
-      event,
-      component: TextPopover,
-      componentProps: opts,
-      ...popoverOpts,
-    });
-
-    await modal.present();
-    return await modal.onDidDismiss();
-  }
-
-  @ViewChild('form', { static: true }) form: TextForm;
-
-  @Input() showHeader: boolean;
-  @Input() headerColor: Color = null;
-  @Input() showFooter: boolean;
-  @Input() title: string = null;
-  @Input() text: string;
-  @Input() placeholder = '';
-  @Input() editing = true;
-  @Input() multiline = true;
-  @Input() autoHeight = false;
-  @Input() maxLength = 2000;
-  @Input() autofocus = false;
-  @Input() validator: ValidatorFn = null;
-  @Input() headerButtons: TextPopoverButton[] = null;
-  @Input() mobile = false;
-
-  subscription = new Subscription();
-
-  get disabled() {
-    return this.form.disabled;
-  }
-
-  get enabled() {
-    return this.form.enabled;
-  }
-
-  get valid() {
-    return this.form?.valid || false;
-  }
-
-  get value() {
-    return this.form?.value.text;
-  }
-
-  constructor(
-    protected popoverController: PopoverController,
-    protected translate: TranslateService
-  ) {}
-
-  ngOnInit(): void {
-    this.showHeader = toBoolean(this.showHeader, isNotNilOrBlank(this.title) || isNotEmptyArray(this.headerButtons));
-    this.showFooter = toBoolean(this.showFooter, !this.mobile);
-    this.enable();
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => this.form.setValue({ text: this.text }), 0);
-  }
-
-  async onValidate(event: any): Promise<any> {
-    await waitWhilePending(this.form);
-
-    if (!this.valid) {
-      logFormErrors(this.form.textControl);
-      return;
-    }
-
-    try {
-      const value = this.value;
-      this.disable();
-      this.form.error = null;
-      await this.popoverController.dismiss(value);
-    } catch (err) {
-      this.form.error = (err && err.message) || err;
-      this.enable();
-    }
-  }
-
-  disable() {
-    this.form.disable();
-  }
-
-  enable() {
-    if (this.editing) this.form.enable();
-  }
-
-  cancel() {
-    this.popoverController.dismiss();
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  protected async clickButton(button: TextPopoverButton) {
-    if (typeof button.handler === 'function') {
-      const result = await button.handler(this.value);
-      // TODO comment interpreter le true ?? => fermer ou annuler l'action ?
-      if (result === true) {
-        return this.popoverController.dismiss(this.value, button.role);
-      }
-    } else {
-      return this.popoverController.dismiss(this.value, button.role);
-    }
-  }
-
-  protected isStartSide(button: TextPopoverButton) {
-    return button?.side === 'start';
-  }
-
-  protected isEndSide(button: TextPopoverButton) {
-    return button?.side !== 'start';
-  }
-}

package/src/app/core/form/text-popover/text-popover.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../shared/shared.module';
-import { TextPopover } from './text-popover.component';
-import { TranslateModule } from '@ngx-translate/core';
-
-@NgModule({
-  imports: [SharedModule, TranslateModule.forChild()],
-
-  declarations: [
-    // Components
-    TextPopover,
-  ],
-  exports: [
-    TranslateModule,
-    // Components
-    TextPopover,
-  ],
-})
-export class AppTextPopoverModule {}

package/src/app/core/form/username/username.form.html

@@ -1,27 +0,0 @@
-<form *ngIf="form.controls; let controls" [formGroup]="form" class="form-container">
-  <!-- Username -->
-  @let formControl = form | formGetControl: 'username';
-  <mat-form-field>
-    <mat-label>{{ usernamePlaceHolder | translate }}</mat-label>
-    <input
-      matInput
-      [appAutofocus]="!mobile"
-      [autofocusDelay]="500"
-      formControlName="username"
-      autocomplete="off"
-      required
-    />
-
-    <!-- error -->
-    <mat-error *ngIf="formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey">
-      @switch (errorKey) {
-        @case ('required') {
-          <span translate>ERROR.FIELD_REQUIRED</span>
-        }
-        @case ('email') {
-          <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>
-        }
-      }
-    </mat-error>
-  </mat-form-field>
-</form>

package/src/app/core/form/username/username.form.ts

@@ -1,44 +0,0 @@
-import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
-import { AppForm } from '../form.class';
-import { isMobile } from '../../../shared/platforms';
-
-@Component({
-  selector: 'app-username-form',
-  templateUrl: 'username.form.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AppUsernameForm extends AppForm<{ username: string }> {
-  @Input({ transform: booleanAttribute }) mobile: boolean;
-  @Input() usernamePlaceHolder: string = 'USER.EMAIL';
-  @Input({ transform: booleanAttribute }) emailValidator = true;
-
-  constructor(
-    injector: Injector,
-    formBuilder: UntypedFormBuilder,
-    protected cd: ChangeDetectorRef
-  ) {
-    super(
-      injector,
-      formBuilder.group({
-        username: new UntypedFormControl(null, Validators.required),
-      })
-    );
-  }
-
-  ngOnInit() {
-    super.ngOnInit();
-    this.mobile = this.mobile ?? isMobile(window);
-
-    const userNameControl = this.form.get('username');
-    if (!this.emailValidator && userNameControl.hasValidator(Validators.email)) {
-      userNameControl.removeValidators(Validators.email);
-    } else if (this.emailValidator && !userNameControl.hasValidator(Validators.email)) {
-      userNameControl.addValidators(Validators.email);
-    }
-  }
-
-  markForCheck() {
-    this.cd.markForCheck();
-  }
-}

package/src/app/core/form/username/username.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../shared/shared.module';
-import { TranslateModule } from '@ngx-translate/core';
-import { AppUsernameForm } from './username.form';
-
-@NgModule({
-  imports: [SharedModule, TranslateModule.forChild()],
-
-  declarations: [AppUsernameForm],
-  exports: [TranslateModule, AppUsernameForm],
-})
-export class AppUsernameFormModule {}

package/src/app/core/graphql/graphql.module.ts

@@ -1,7 +0,0 @@
-import { NgModule } from '@angular/core';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-
-@NgModule({ imports: [], providers: [provideHttpClient(withInterceptorsFromDi())] })
-export class AppGraphQLModule {
-  constructor() {}
-}