@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/shared/form/field.component.ts

@@ -1,344 +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, UntypedFormControl, Validators } from '@angular/forms';
-import { isBlankString, isNilOrBlank, isNotNil, isNotNilBoolean, isNotNilOrBlank, joinPropertiesPath, toBoolean } from '../functions';
-import { AppFloatLabelType, DisplayFn, FormFieldDefinition, FormFieldDefinitionUtils, FormFieldType } from './field.model';
-import { TranslateService } from '@ngx-translate/core';
-import { getColorContrast } from '../graph/colors.utils';
-import { asInputElement, filterNumberInput, selectInputContentFromEvent } from '../inputs';
-import { toDateISOString } from '../dates';
-import { Property } from '../types';
-import { ThemePalette } from '@angular/material/core';
-import { PredefinedColors } from '@ionic/core';
-import { MatAutocompleteField } from '../material/autocomplete/material.autocomplete';
-import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
-
-const noop = () => {};
-
-@Component({
-  selector: 'app-form-field',
-  styleUrls: ['./field.component.scss'],
-  templateUrl: './field.component.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => AppFormField),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AppFormField implements OnInit, ControlValueAccessor {
-  private _onChangeCallback: (_: any) => void = noop;
-  private _onTouchedCallback: () => void = noop;
-  private _definition: FormFieldDefinition;
-
-  protected _values: Property[];
-
-  protected type: FormFieldType;
-  protected numberInputStep: string;
-
-  @Input()
-  set definition(value: FormFieldDefinition) {
-    if (!value || this._definition === value) return; // Skip is same or nil
-    this._definition = value;
-    this._onDefinitionChanged(value);
-  }
-
-  get definition(): FormFieldDefinition {
-    return this._definition;
-  }
-
-  @Input({ transform: booleanAttribute }) readonly = false;
-  @Input({ transform: booleanAttribute }) disabled: boolean;
-  @Input() formControl: UntypedFormControl;
-  @Input() formControlName: string;
-  @Input() placeholder: string;
-  @Input({ transform: booleanAttribute }) compact = false;
-  @Input({ transform: booleanAttribute }) required: boolean;
-  @Input({ transform: booleanAttribute }) hideRequiredMarker = false;
-  @Input() floatLabel: AppFloatLabelType = 'auto';
-  @Input() label: string = null;
-  @Input() appearance: MatFormFieldAppearance;
-  @Input() subscriptSizing: SubscriptSizing;
-  @Input({ transform: numberAttribute }) tabindex: number;
-  @Input({ transform: booleanAttribute }) autofocus: boolean;
-
-  @Input({ transform: booleanAttribute }) clearable: boolean;
-  @Input() chipColor: ThemePalette | PredefinedColors = null;
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('class') classList: string;
-  @Input({ transform: booleanAttribute }) debug = false;
-  @Input() panelClass: string;
-  @Input() panelWidth: string;
-
-  @Output('keyup.enter') onKeyupEnter = new EventEmitter<any>();
-
-  get value(): any {
-    return this.formControl.value;
-  }
-
-  @ViewChild('matInput') matInput: ElementRef;
-  @ViewChild('autocompleteField') autocompleteField: MatAutocompleteField;
-
-  constructor(
-    protected translate: TranslateService,
-    protected cd: ChangeDetectorRef,
-    protected injector: Injector,
-    @Optional() private formGroupDir: FormGroupDirective
-  ) {}
-
-  ngOnInit() {
-    this.checkAndResolveFormControl();
-
-    if (!this._definition) throw new Error("Missing mandatory attribute 'definition' in <app-form-field>.");
-    if (typeof this._definition !== 'object') throw new Error("Invalid attribute 'definition' in <app-form-field>. Should be an object.");
-    this._onDefinitionChanged(this._definition, { emitEvent: false });
-  }
-
-  writeValue(obj: any): void {
-    if ((this.type === 'integer' || this.type === 'double') && Number.isNaN(obj)) {
-      // DEBUG
-      //if (this.debug) console.debug("WARN: trying to set NaN value, in an <app-form-field>! Reset to null");
-
-      obj = null;
-    } else if (this.type === 'boolean' && typeof obj === 'string') {
-      obj = obj !== 'false';
-    } else if (this.type === 'date') {
-      obj = toDateISOString(obj);
-    } else if (this.type === 'enums' && isNotNil(obj)) {
-      let changes = false;
-      if (!Array.isArray(obj)) {
-        // Convert string to array
-        if (typeof obj === 'string') {
-          obj = obj.trim().split(/[|,]+/);
-          changes = true;
-        }
-        // Convert object to array
-        else if (typeof obj === 'object') {
-          obj = [obj];
-          changes = true;
-        }
-      }
-      const updatedArray = (obj || [])
-        .map((item) => {
-          if (typeof item === 'string') {
-            changes = true;
-            return this._values.find((v) => v.key === item.trim());
-          }
-          return item;
-        })
-        .filter(isNotNil);
-      if (changes) {
-        obj = updatedArray;
-      }
-    } else if (this.type === 'entity' && isNilOrBlank(obj)) {
-      obj = null;
-    } else if (this.type === 'entities' && isNotNil(obj)) {
-      let changes = false;
-
-      if (!Array.isArray(obj)) {
-        // Convert string to array
-        if (typeof obj === 'string') {
-          obj = obj.trim();
-          if (obj.startsWith('[') && obj.endsWith(']')) {
-            obj = JSON.parse(obj);
-          } else {
-            obj = obj.split(/[|,]+/);
-          }
-          changes = true;
-        }
-        // Convert object to array
-        else if (typeof obj === 'object') {
-          obj = [obj];
-          changes = true;
-        }
-      }
-      const updatedArray = (obj || [])
-        .map((item) => {
-          if (typeof item === 'string' && item.startsWith('{') && item.endsWith('}')) {
-            item = JSON.parse(item);
-            changes = true;
-            return item;
-          }
-          return item;
-        })
-        .filter(isNotNilOrBlank);
-      if (changes) {
-        obj = updatedArray;
-      }
-    }
-    if (obj !== this.formControl.value) {
-      // DEBUG
-      //if (this.debug) console.debug("Set <app-form-field> value: ", obj);
-
-      this.formControl.patchValue(obj, { emitEvent: false });
-      this._onChangeCallback(obj);
-    }
-
-    this.cd.markForCheck();
-  }
-
-  registerOnChange(fn: any): void {
-    this._onChangeCallback = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this._onTouchedCallback = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    if (this.disabled === isDisabled) return;
-    this.disabled = isDisabled;
-    this.cd.markForCheck();
-  }
-
-  markAsTouched() {
-    if (this.formControl.touched) {
-      this.cd.markForCheck();
-      this._onTouchedCallback();
-    }
-  }
-
-  filterAlphanumericalInput(event: KeyboardEvent) {
-    if (event.code === 'Enter' && this.onKeyupEnter.observed) {
-      this.onKeyupEnter.emit(event);
-      return;
-    }
-    // Add features (e.g. check against a pattern)
-  }
-
-  focus() {
-    if (this.matInput) this.matInput.nativeElement.focus();
-    else if (this.autocompleteField) this.autocompleteField.focus();
-  }
-
-  filterNumberInput = filterNumberInput;
-  selectInputContentFromEvent = selectInputContentFromEvent;
-
-  getDisplayValueFn(definition: FormFieldDefinition): DisplayFn {
-    if (definition.autocomplete && definition.autocomplete.displayWith) {
-      return (obj: any) => definition.autocomplete.displayWith(obj);
-    }
-    const attributes = (definition.autocomplete && definition.autocomplete.attributes) || ['label', 'name'];
-    return (obj: any) => obj && joinPropertiesPath(obj, attributes);
-  }
-
-  getColorContrast(color: string): string | undefined {
-    return isNotNilOrBlank(color) ? getColorContrast(color, true) : undefined;
-  }
-
-  /**
-   * Allow to reload values, if not detected
-   *
-   * @param value
-   */
-  reloadItems(value?: any) {
-    if (!this._definition) return;
-
-    this._onDefinitionChanged(this._definition);
-
-    if (this.autocompleteField) {
-      setTimeout(() => this.autocompleteField?.reloadItems(value));
-    }
-  }
-
-  /* -- protected method -- */
-
-  protected computeNumberInputStep(definition: FormFieldDefinition): string {
-    if (definition.maximumNumberDecimals > 0) {
-      let step = '0.';
-      if (definition.maximumNumberDecimals > 1) {
-        for (let i = 0; i < definition.maximumNumberDecimals - 1; i++) {
-          step += '0';
-        }
-      }
-      step += '1';
-      return step;
-    } else {
-      return '1';
-    }
-  }
-
-  protected checkAndResolveFormControl() {
-    if (this.formControl) return; // OK, there is a control
-
-    if (this.formGroupDir) {
-      // Try to find using definition.key, as formControlName
-      if (!this.formControlName && this._definition.key) {
-        this.formControlName = this._definition.key;
-      }
-      const formControlName = (this.formGroupDir.directives || []).find((d) => this.formControlName && d.name === this.formControlName);
-      this.formControl = formControlName && formControlName.control;
-      if (!this.formControl) {
-        this.formControl = this.formGroupDir.form.get(this.formControlName) as UntypedFormControl;
-      }
-    }
-
-    if (!this.formControl) {
-      throw new Error("Missing attribute 'formControl' or 'formControlName' in <app-form-field> component.");
-    }
-  }
-
-  protected _onDefinitionChanged(definition: FormFieldDefinition, opts?: { emitEvent?: boolean }) {
-    this.type = definition.type;
-    if (!this.type) throw new Error("Invalid attribute 'definition' in <app-form-field>. Missing type !");
-
-    this.placeholder = this.placeholder || (this._definition.label && this.translate.instant(this._definition.label));
-    this.required = isNotNilBoolean(this.required)
-      ? this.required
-      : this._definition.required || this.formControl?.validator === Validators.required || isBlankString(this.required);
-    this.disabled = toBoolean(this.disabled, toBoolean(this._definition.disabled, false));
-
-    // double
-    if (this.type === 'double') {
-      this.numberInputStep = this.computeNumberInputStep(definition);
-    } else {
-      this.numberInputStep = null;
-    }
-
-    // enum (or enums)
-    if (this.type === 'enum' || this.type === 'enums') {
-      // Resolve enum values
-      this._values = FormFieldDefinitionUtils.getEnumValues(this.injector, definition.values);
-    } else {
-      this._values = [];
-    }
-
-    // Repaint
-    if (!opts || opts.emitEvent !== false) {
-      this.cd.markForCheck();
-    }
-
-    // Recompute tab index, because if type changed, then matInput can have changed
-    this.updateTabIndex(100);
-  }
-
-  protected updateTabIndex(timeout?: number) {
-    if (this.tabindex && this.tabindex !== -1) {
-      setTimeout(() => {
-        const element = asInputElement(this.matInput);
-        if (element) {
-          element.tabIndex = this.tabindex;
-          this.cd.markForCheck();
-        } else if (this.autocompleteField) {
-          this.autocompleteField.tabindex = this.tabindex;
-        }
-      }, timeout || 0);
-    }
-  }
-}

package/src/app/shared/form/field.model.ts

@@ -1,158 +0,0 @@
-import { ObjectMap, Property } from '../types';
-import { isNotNil, joinPropertiesPath } from '../functions';
-import { InjectionToken, Injector } from '@angular/core';
-import { MatAutocompleteFieldConfig } from '../material/autocomplete/material.autocomplete.config';
-import { UserProfileLabel } from '../../core/services/model/person.model';
-import { FloatLabelType } from '@angular/material/form-field';
-
-export declare type DisplayFn = (obj: any) => string;
-
-export declare type EqualsFn = (o1: any, o2: any) => boolean;
-
-export declare type CompareFn = (o1: any, o2: any) => number;
-
-export declare type FormFieldType =
-  | 'integer'
-  | 'double'
-  | 'boolean'
-  | 'string'
-  | 'enum'
-  | 'enums'
-  | 'color'
-  | 'peer'
-  | 'entity'
-  | 'entities'
-  | 'date'
-  | 'dateTime';
-export declare type AppFloatLabelType = FloatLabelType | 'never';
-
-export declare interface FormFieldDefinition<K = string, T = FormFieldType, E = any> {
-  key: K;
-  type: T;
-  label: string;
-  minValue?: number;
-  maxValue?: number;
-  maximumNumberDecimals?: number;
-  defaultValue?: any;
-  isTransient?: boolean; // Useful only for remote configuration
-  values?: (string | Property)[] | InjectionToken<(string | Property)[]>;
-  autocomplete?: MatAutocompleteFieldConfig<E>;
-
-  disabled?: boolean;
-  required?: boolean;
-  extra?: {
-    [key: string]: {
-      disabled?: boolean;
-      required: boolean;
-    };
-  };
-  minProfile?: UserProfileLabel;
-
-  /**
-   * Use for automatic serialization/deserialization to/from string (eg. using the autocomplete suggestFn).
-   * Default value: 'id'
-   */
-  serializeAttribute?: string;
-
-  /**
-   * Use to serialize an entity into string (see AppPropertiesUtils.***asObject())
-   * @param value
-   */
-  serialize?: (value: E) => string;
-
-  /**
-   * Use to deserialize a string into an entity (see AppPropertiesUtils.***fromObject())
-   * @param value
-   */
-  deserialize?: (value: string) => E | Promise<E>;
-}
-export declare type FormFieldDefinitionMap = ObjectMap<FormFieldDefinition>;
-
-export class FormFieldDefinitionUtils {
-  /**
-   * Prepares an array of form field definitions by using the specified injector to process each definition.
-   *
-   * @param {Injector} injector - The injector used to process each form field definition.
-   * @param {FormFieldDefinition[]} defs - An array of form field definitions to be prepared.
-   * @return {FormFieldDefinition[]} An array of prepared form field definitions.
-   */
-  static prepareDefinitions(injector: Injector, defs: FormFieldDefinition[]): FormFieldDefinition[] {
-    return defs?.map((def) => FormFieldDefinitionUtils.prepareDefinition(injector, def));
-  }
-
-  /**
-   * Prepares the definition by processing its type and optionally setting the values property.
-   *
-   * @param {Injector} injector - The injector used to get the necessary services.
-   * @param {FormFieldDefinition} def - The form field definition to be prepared.
-   * @return {FormFieldDefinition} - The prepared form field definition with updated values if the type is 'enum' or 'enums'.
-   */
-  static prepareDefinition(injector: Injector, def: FormFieldDefinition): FormFieldDefinition {
-    if (def.type === 'enum' || def.type === 'enums') {
-      return {
-        ...def,
-        values: FormFieldDefinitionUtils.getEnumValues(injector, def.values),
-      };
-    }
-    return def;
-  }
-
-  /**
-   * Retrieves an array of Property objects from the provided enum values.
-   *
-   * @param {Injector} injector - The Angular injector to resolve the InjectionToken.
-   * @param {(string | Property)[] | InjectionToken<(string | Property)[]>} enumValues - The enum values, which can be an array of strings, array of Property objects, or an InjectionToken that resolves to such an array.
-   * @return {Property[]} An array of Property objects.
-   */
-  static getEnumValues(injector: Injector, enumValues: (string | Property)[] | InjectionToken<(string | Property)[]>): Property[] {
-    // Resolve token
-    if (enumValues instanceof InjectionToken) {
-      const values = injector.get(enumValues);
-      return Array.isArray(values) ? FormFieldDefinitionUtils.asPropertyArray(values) : [];
-    }
-
-    // Normalize string[] => Property[]
-    return FormFieldDefinitionUtils.asPropertyArray(enumValues as (string | Property)[]);
-  }
-
-  static getDisplayValueFn(definition: FormFieldDefinition): DisplayFn {
-    if (definition.autocomplete && definition.autocomplete.displayWith) {
-      return (obj: any) => definition.autocomplete.displayWith(obj);
-    }
-    const attributes = (definition.autocomplete && definition.autocomplete.attributes) || ['label', 'name'];
-    return (obj: any) => obj && joinPropertiesPath(obj, attributes);
-  }
-
-  private static asPropertyArray(values: (string | Property)[]): Property[] {
-    return (Array.isArray(values) ? values : [])
-      .map((v) => (typeof v === 'string' ? <Property>{ key: v, value: v } : typeof v === 'object' ? (v as Property) : null))
-      .filter(isNotNil);
-  }
-}
-
-export abstract class FormFieldValuesHolder {
-  getAsBoolean(data: ObjectMap, definition: FormFieldDefinition): boolean {
-    const value = this.get(data, definition);
-    return isNotNil(value) ? value && value !== 'false' : undefined;
-  }
-
-  getAsInt(data: any, definition: FormFieldDefinition): number {
-    const value = this.get(data, definition);
-    return isNotNil(value) ? parseInt(value) : undefined;
-  }
-
-  getAsNumbers(data: any, definition: FormFieldDefinition): number[] {
-    const value = this.get(data, definition);
-    if (typeof value === 'string') return value.split(',').map(parseFloat) || undefined;
-    return isNotNil(value) ? [parseFloat(value)] : undefined;
-  }
-
-  getAsStrings(data: any, definition: FormFieldDefinition): string[] {
-    const value = this.get(data, definition);
-    return (value && value.split(',')) || undefined;
-  }
-
-  get<T = string>(data: any, definition: FormFieldDefinition): T {
-    return isNotNil(data[definition.key]) ? data[definition.key] : definition.defaultValue || undefined;
-  }
-}

package/src/app/shared/form/loading-spinner.ts

@@ -1,16 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'app-loading-spinner',
-  template: `
-    <ion-spinner *ngIf="loading; else content" [color]="color" [name]="name"></ion-spinner>
-    <ng-template #content>
-      <ng-content></ng-content>
-    </ng-template>
-  `,
-})
-export class AppLoadingSpinner {
-  @Input() loading = false;
-  @Input() color: string | undefined = 'secondary';
-  @Input() name: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-small' | undefined;
-}