@sumaris-net/ngx-components 18.12.0 → 18.12.2

package/src/app/shared/material/text/testing/text-form.testing.html

@@ -1,213 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Text form examples</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <ion-grid>
-    <ion-row>
-      <ion-col>
-        <ion-text><h4>Standalone mode (no form)</h4></ion-text>
-      </ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              <ion-label color="primary">Default validator</ion-label>
-            </ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <app-text-form
-              #standaloneTextForm1
-              [standalone]="true"
-              [multiline]="false"
-              [maxLength]="10"
-            ></app-text-form>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-
-      <ion-col>
-        <ion-card>
-          <ion-card-header>
-            <ion-card-title>
-              <ion-label color="primary">Required</ion-label>
-            </ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            <app-text-form
-              #standaloneTextForm2
-              [standalone]="true"
-              [multiline]="false"
-              [maxLength]="10"
-              [validator]="Validators.required"
-            >
-              @if (standaloneTextForm2.textControl.hasError('required')) {
-                <mat-error matError>REQUIRED</mat-error>
-              }
-            </app-text-form>
-          </ion-card-content>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-
-  <form class="form-container" [formGroup]="form">
-    <ion-grid>
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>FormGroup mode, no placeholder</h4></ion-text>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Empty</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ form.controls.empty.value | json }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <app-text-form formControlName="empty" [multiline]="false" [maxLength]="10"></app-text-form>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Required</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ form.controls.required.value | json }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <app-text-form
-                formControlName="required"
-                [multiline]="false"
-                [maxLength]="10"
-                [validator]="Validators.required"
-              >
-                <mat-error matError *ngIf="form.controls.required.hasError('required')" translate>
-                  ERROR.FIELD_REQUIRED
-                </mat-error>
-              </app-text-form>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-
-      <ion-row>
-        <ion-col>
-          <ion-text><h4>FormGroup mode, with placeholder</h4></ion-text>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Empty</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ form.controls.empty.value | json }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <app-text-form
-                formControlName="empty"
-                [multiline]="false"
-                [maxLength]="10"
-                placeholder="Empty field"
-              ></app-text-form>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Required</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ form.controls.required.value | json }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <app-text-form
-                formControlName="required"
-                [multiline]="false"
-                [maxLength]="10"
-                [validator]="Validators.required"
-                placeholder="Required field"
-              >
-                <mat-error matError *ngIf="form.controls.required.hasError('required')" translate>
-                  ERROR.FIELD_REQUIRED
-                </mat-error>
-              </app-text-form>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-
-      <ion-row>
-        <ion-col>
-          <ion-card>
-            <ion-card-header>
-              <ion-card-title>
-                <ion-label color="primary">Outline</ion-label>
-              </ion-card-title>
-              <ion-card-subtitle>
-                <ion-text color="medium">
-                  <small>
-                    <pre>{{ form.controls.multiline.value | json }}</pre>
-                  </small>
-                </ion-text>
-              </ion-card-subtitle>
-            </ion-card-header>
-            <ion-card-content>
-              <app-text-form
-                formControlName="multiline"
-                [multiline]="true"
-                appearance="outline"
-                autoSize="true"
-                autoSizeMinRows="4"
-                [maxLength]="2000"
-                placeholder="Outline field"
-              ></app-text-form>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </form>
-</ion-content>

package/src/app/shared/material/text/testing/text-form.testing.ts

@@ -1,30 +0,0 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { TextForm } from '../text-form.component';
-
-@Component({
-  selector: 'text-form-testing',
-  templateUrl: 'text-form.testing.html',
-})
-export class TextFormTestingPage implements AfterViewInit {
-  @ViewChild('standaloneTextForm1') standaloneTextForm1: TextForm;
-  @ViewChild('standaloneTextForm2') standaloneTextForm2: TextForm;
-
-  form: UntypedFormGroup;
-
-  protected readonly Validators = Validators;
-  stringify = JSON.stringify;
-
-  constructor(protected formBuilder: UntypedFormBuilder) {
-    this.form = formBuilder.group({
-      empty: [null],
-      required: [null, Validators.required],
-      multiline: [null],
-    });
-  }
-
-  ngAfterViewInit(): void {
-    this.standaloneTextForm1.enable();
-    this.standaloneTextForm2.enable();
-  }
-}

package/src/app/shared/material/text/text-form.component.html

@@ -1,63 +0,0 @@
-<form class="form-container" [formGroup]="form" (ngSubmit)="onSubmit.emit($event)">
-  @if (multiline) {
-    <mat-form-field
-      [floatLabel]="floatLabel | asFloatLabelType"
-      [appearance]="appearance"
-      [subscriptSizing]="subscriptSizing"
-    >
-      @if (floatLabel !== 'never' && !!placeholder) {
-        <mat-label>{{ placeholder }}</mat-label>
-      }
-      <textarea
-        #textArea
-        matInput
-        [formControl]="textControl"
-        [readonly]="textControl.disabled"
-        [placeholder]="floatLabel === 'never' ? placeholder : null"
-        [class.fixed-height]="!autoSize"
-        [cdkTextareaAutosize]="autoSize"
-        [cdkAutosizeMinRows]="autoSizeMinRows"
-        [cdkAutosizeMaxRows]="autoSizeMaxRows"
-        (keydown.control.enter)="onSubmit.emit($event)"
-      ></textarea>
-      <mat-error *ngIf="textControl.hasError('maxlength')">
-        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}
-      </mat-error>
-      <mat-hint *ngIf="maxLength" align="end">
-        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textArea.value?.length || 0, max: maxLength } }}
-      </mat-hint>
-    </mat-form-field>
-  } @else {
-    <mat-form-field
-      [floatLabel]="floatLabel | asFloatLabelType"
-      [appearance]="appearance"
-      [subscriptSizing]="subscriptSizing"
-    >
-      @if (floatLabel !== 'never' && !!placeholder) {
-        <mat-label>{{ placeholder }}</mat-label>
-      }
-      <input
-        #textInput
-        matInput
-        [formControl]="textControl"
-        [readonly]="textControl.disabled"
-        [placeholder]="floatLabel === 'never' ? placeholder : null"
-        [appAutofocus]="autofocus"
-        (keydown.control.enter)="onSubmit.emit($event)"
-      />
-      <mat-error *ngIf="textControl.hasError('maxlength')">
-        {{ 'ERROR.FIELD_MAX_LENGTH' | translate: textControl.errors['maxlength'] }}
-      </mat-error>
-      <mat-error *ngIf="textControl.hasError('pattern')">
-        {{ 'ERROR.FIELD_INVALID' | translate }}
-      </mat-error>
-      <mat-error *ngIf="errorSpan.innerHTML.trim() as error" [innerHTML]="error"></mat-error>
-      <span #errorSpan class="cdk-visually-hidden">
-        <ng-content select="[matError]"></ng-content>
-      </span>
-      <mat-hint *ngIf="maxLength" align="end">
-        {{ 'INFO.TEXT_PROGRESS' | translate: { current: textInput.value?.length || 0, max: maxLength } }}
-      </mat-hint>
-    </mat-form-field>
-  }
-</form>

package/src/app/shared/material/text/text-form.component.scss

@@ -1,8 +0,0 @@
-textarea {
-  --textarea-height: 11.5em;
-  max-height: var(--textarea-height);
-
-  &.fixed-height {
-    height: var(--textarea-height);
-  }
-}

package/src/app/shared/material/text/text-form.component.ts

@@ -1,177 +0,0 @@
-import {
-  booleanAttribute,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  Injector,
-  Input,
-  numberAttribute,
-  OnInit,
-  Optional,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormGroupDirective,
-  NG_VALUE_ACCESSOR,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
-import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { AppForm } from '../../../core/form/form.class';
-import { isNotNil } from '../../functions';
-import { focusInput } from '../../inputs';
-import { AppFloatLabelType } from '../../form/field.model';
-import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
-
-const noop = () => {};
-
-@Component({
-  selector: 'app-text-form',
-  templateUrl: './text-form.component.html',
-  styleUrls: ['./text-form.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => TextForm),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TextForm extends AppForm<{ text: string }> implements OnInit, ControlValueAccessor {
-  @Input({ transform: booleanAttribute }) showError = true;
-  @Input() placeholder: string;
-  @Input({ transform: booleanAttribute }) multiline = true;
-
-  @Input({ transform: booleanAttribute }) autoSize = false;
-  @Input({ transform: numberAttribute }) autoSizeMinRows: number;
-  @Input({ transform: numberAttribute }) autoSizeMaxRows: number;
-  @Input({ transform: numberAttribute }) maxLength = 2000;
-  @Input({ transform: booleanAttribute }) autofocus = false;
-  @Input() validator: ValidatorFn = null;
-  @Input({ transform: booleanAttribute }) standalone = false;
-  @Input() formControl: UntypedFormControl;
-  @Input() formControlName: string;
-  @Input() floatLabel: AppFloatLabelType = 'auto';
-  @Input() appearance: MatFormFieldAppearance;
-  @Input() subscriptSizing: SubscriptSizing;
-
-  /**
-   * @deprecated Use autoSize instead
-   */
-  @Input({ transform: booleanAttribute }) set autoHeight(value: boolean) {
-    this.autoSize = value;
-  }
-  get autoHeight(): boolean {
-    return this.autoSize;
-  }
-
-  @Output() textAreaChanges = new EventEmitter<string>();
-
-  @ViewChild('textArea') textArea: ElementRef;
-  @ViewChild('textInput') textInput: ElementRef;
-  @ViewChild(CdkTextareaAutosize) autosizeDirective: CdkTextareaAutosize;
-
-  textControl: UntypedFormControl;
-
-  private _onChangeCallback: (_: any) => void = noop;
-  private _onTouchedCallback: () => void = noop;
-
-  constructor(
-    protected injector: Injector,
-    protected cd: ChangeDetectorRef,
-    protected formBuilder: UntypedFormBuilder,
-    @Optional() private formGroupDir: FormGroupDirective
-  ) {
-    super(injector);
-  }
-
-  ngOnInit() {
-    if (!this.standalone) {
-      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-date-field>.");
-    }
-
-    // Compute validators
-    const validators = isNotNil(this.maxLength) && this.maxLength > 0 ? [Validators.maxLength(this.maxLength)] : [];
-    if (this.validator) validators.push(this.validator);
-
-    // Create the form
-    const form = this.formBuilder.group({
-      text: [null, validators.length ? Validators.compose(validators) : null],
-    });
-    this.setForm(form);
-
-    this.textControl = form.get('text') as UntypedFormControl;
-    this.registerSubscription(
-      this.textControl.valueChanges.subscribe((value) => {
-        if (this.standalone) {
-          this.textAreaChanges.emit(value);
-        } else {
-          this.textFormValueChanged(value);
-        }
-      })
-    );
-
-    super.ngOnInit();
-  }
-
-  containerResize() {
-    this.autosizeDirective?.resizeToFitContent(true);
-  }
-
-  focusInput() {
-    if (this.textArea) focusInput(this.textArea);
-    if (this.textInput) focusInput(this.textInput);
-  }
-
-  registerOnChange(fn: any): void {
-    this._onChangeCallback = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this._onTouchedCallback = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (isDisabled) {
-      this.textControl.disable({ emitEvent: false });
-    } else {
-      this.textControl.enable({ emitEvent: false });
-    }
-    this.markForCheck();
-  }
-
-  writeValue(value: any): void {
-    this.textControl.patchValue(value);
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-
-  protected checkIfTouched(opts?: { emitEvent?: boolean }) {
-    if (this.textControl.touched) {
-      this._onTouchedCallback();
-
-      if (!opts || opts.emitEvent !== false) {
-        this.markForCheck();
-      }
-    }
-  }
-
-  private textFormValueChanged(value: string): void {
-    if (this.formControl.value !== value) {
-      this._onChangeCallback(value);
-      this.checkIfTouched();
-    }
-  }
-}

package/src/app/shared/material/text/text-form.module.ts

@@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { TextForm } from './text-form.component';
-import { MatInputModule } from '@angular/material/input';
-import { ReactiveFormsModule } from '@angular/forms';
-import { SharedDirectivesModule } from '../../directives/directives.module';
-import { CommonModule, NgIf } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { SharedPipesModule } from '../../pipes/pipes.module';
-import { MatCommonModule } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-
-@NgModule({
-  imports: [
-    TranslateModule.forChild(),
-    CommonModule,
-    IonicModule,
-    ReactiveFormsModule,
-    SharedPipesModule,
-    MatCommonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    SharedDirectivesModule,
-  ],
-
-  declarations: [
-    // Components
-    TextForm,
-  ],
-  exports: [
-    TranslateModule,
-    // Components
-    TextForm,
-  ],
-})
-export class SharedTextFormModule {}

package/src/app/shared/modules.ts

@@ -1,12 +0,0 @@
-export function isESModule<T>(value: any | T): value is { default: T } {
-  return value && value['__esModule'] === true && !!value['default'];
-}
-
-/**
- * Workaround need for CommonJS library (eg. moment), because of packagr's issue - see https://github.com/ng-packagr/ng-packagr/issues/2215
- *
- * @param commonJSModule
- */
-export function unwrapESModule<T = any>(commonJSModule: T | any): T {
-  return isESModule<T>(commonJSModule) ? commonJSModule.default : (commonJSModule as T);
-}

package/src/app/shared/named-filter/named-filter-selector.component.html

@@ -1,77 +0,0 @@
-<ion-grid class="ion-no-padding">
-  <ion-row class="ion-no-padding">
-    <ion-col class="ion-no-padding">
-      <form class="form-container" [formGroup]="form">
-        <mat-autocomplete-field
-          formControlName="namedFilter"
-          [config]="autocompleteFields.namedFilter"
-          [appearance]="appearance"
-          [subscriptSizing]="subscriptSizing"
-          [placeholder]="'COMMON.NAMED_FILTER.TITLE' | translate"
-          [clearable]="true"
-          [dropButtonTitle]="dropButtonTitle"
-          [clearButtonTitle]="clearButtonTitle"
-        >
-          @if (showButtons && buttonsPosition === 'matSuffix') {
-            <ng-container matSuffix>
-              <ng-container *ngTemplateOutlet="buttons"></ng-container>
-            </ng-container>
-          }
-        </mat-autocomplete-field>
-      </form>
-    </ion-col>
-    @if (showButtons && buttonsPosition === 'after') {
-      <ion-col size="auto" class="ion-no-padding">
-        <ng-container *ngTemplateOutlet="buttons"></ng-container>
-      </ion-col>
-    }
-  </ion-row>
-</ion-grid>
-
-<ng-template #buttons>
-  <!-- save -->
-  <button
-    mat-icon-button
-    [color]="'primary'"
-    [disabled]="saveDisabled"
-    [title]="'COMMON.NAMED_FILTER.SAVE' | translate"
-    (click)="save($event)"
-  >
-    <mat-icon>save</mat-icon>
-    <mat-icon *ngIf="isNew" class="icon-secondary" style="left: 12px; top: 0">add</mat-icon>
-  </button>
-
-  <!-- delete -->
-  <button
-    mat-icon-button
-    [disabled]="deleteDisabled"
-    [title]="'COMMON.NAMED_FILTER.DELETE' | translate"
-    (click)="delete($event)"
-  >
-    <mat-icon>delete</mat-icon>
-  </button>
-
-  <!-- more '...' -->
-  <button mat-icon-button [matMenuTriggerFor]="moreMenu" (click)="onMoreOptionsClick($event)">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-
-  <!-- more menu -->
-  <mat-menu #moreMenu="matMenu">
-    <ng-template matMenuContent>
-      <!-- import -->
-      <button mat-menu-item (click)="import($event)">
-        <mat-icon>file_upload</mat-icon>
-        <ion-label>{{ 'COMMON.NAMED_FILTER.IMPORT' | translate }}</ion-label>
-      </button>
-
-      <mat-divider></mat-divider>
-
-      <!-- export -->
-      <button mat-menu-item (click)="export($event)" [disabled]="isNew">
-        <mat-icon>file_download</mat-icon>
-        <ion-label>{{ 'COMMON.NAMED_FILTER.EXPORT' | translate }}</ion-label>
-      </button>
-    </ng-template>
-  </mat-menu>
-</ng-template>

package/src/app/shared/named-filter/named-filter-selector.component.scss

@@ -1,3 +0,0 @@
-:host{
-  max-width: 100%;
-}