valtech-components 2.0.794 → 2.0.795

package/src/lib/components/organisms/form/form.component.ts

@@ -0,0 +1,448 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  DoCheck,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { isAtEnd } from '../../../shared/utils/dom';
+import { DisplayComponent } from '../../atoms/display/display.component';
+import { DividerComponent } from '../../atoms/divider/divider.component';
+import { TitleComponent } from '../../atoms/title/title.component';
+import { ButtonGroupComponent } from '../../molecules/button-group/button-group.component';
+import { CheckInputComponent } from '../../molecules/check-input/check-input.component';
+import { CommentInputComponent } from '../../molecules/comment-input/comment-input.component';
+import { DateInputComponent } from '../../molecules/date-input/date-input.component';
+import { EmailInputComponent } from '../../molecules/email-input/email-input.component';
+import { FileInputComponent } from '../../molecules/file-input/file-input.component';
+import { HintComponent } from '../../molecules/hint/hint.component';
+import { HourInputComponent } from '../../molecules/hour-input/hour-input.component';
+import { NumberInputComponent } from '../../molecules/number-input/number-input.component';
+import { NumberFromToComponent } from '../../molecules/number-from-to/number-from-to.component';
+import { PasswordInputComponent } from '../../molecules/password-input/password-input.component';
+import { PinInputComponent } from '../../molecules/pin-input/pin-input.component';
+import { RadioInputComponent } from '../../molecules/radio-input/radio-input.component';
+import { SearchSelectorComponent } from '../../molecules/select-input/select-input.component';
+import { SelectSearchComponent } from '../../molecules/select-search/select-search.component';
+import { MultiSelectSearchComponent } from '../../molecules/multi-select-search/multi-select-search.component';
+import { TextInputComponent } from '../../molecules/text-input/text-input.component';
+import { TextareaInputComponent } from '../../molecules/textarea-input/textarea-input.component';
+import { TextareaInputMetadata } from '../../molecules/textarea-input/types';
+import { PhoneInputComponent } from '../../molecules/phone-input/phone-input.component';
+import { ToggleInputComponent } from '../../molecules/toggle-input/toggle-input.component';
+import { CheckboxRadioInputComponent } from '../../molecules/checkbox-radio-input/checkbox-radio-input.component';
+import { UsernameInputComponent } from '../../molecules/username-input/username-input.component';
+import { UsernameInputMetadata } from '../../molecules/username-input/types';
+import { ButtonMetadata, ComponentStates, FormMetadata, FormSubmit, InputMetadata, InputType } from '../../types';
+
+@Component({
+  selector: 'val-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    DisplayComponent,
+    TitleComponent,
+    TextInputComponent,
+    TextareaInputComponent,
+    CheckInputComponent,
+    ButtonGroupComponent,
+    DividerComponent,
+    HintComponent,
+    CommentInputComponent,
+    DateInputComponent,
+    FileInputComponent,
+    HourInputComponent,
+    EmailInputComponent,
+    NumberInputComponent,
+    NumberFromToComponent,
+    RadioInputComponent,
+    PasswordInputComponent,
+    PinInputComponent,
+    SelectSearchComponent,
+    MultiSelectSearchComponent,
+    SearchSelectorComponent,
+    PhoneInputComponent,
+    ToggleInputComponent,
+    CheckboxRadioInputComponent,
+    UsernameInputComponent,
+  ],
+  template: `
+    <div class="container">
+      <form [formGroup]="form">
+        @if (props.name) {
+          <val-display
+            [props]="{
+              content: props.name,
+              color: 'dark',
+              size: 'small',
+            }"
+          ></val-display>
+        }
+        @for (s of props.sections; track s.name) {
+          <div class="section">
+            <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
+            @for (f of s.fields; track f.name) {
+              <div class="input">
+                @if (f.type !== types.PHONE && f.type !== types.HANDLE) {
+                  <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
+                }
+                @if (f.description) {
+                  <span class="field-description">{{ f.description }}</span>
+                }
+                @switch (f.type) {
+                  @case (types.TEXT) {
+                    <val-text-input [props]="getFieldProp(f)"></val-text-input>
+                  }
+                  @case (types.TEXTAREA) {
+                    <val-textarea-input [props]="getTextareaProp(f)"></val-textarea-input>
+                  }
+                  @case (types.CHECK) {
+                    <val-check-input></val-check-input>
+                  }
+                  @case (types.COMMENT) {
+                    <val-comment-input [props]="getFieldProp(f)"></val-comment-input>
+                  }
+                  @case (types.DATE) {
+                    <val-date-input [props]="getFieldProp(f)"></val-date-input>
+                  }
+                  @case (types.EMAIL) {
+                    <val-email-input [props]="getFieldProp(f)"></val-email-input>
+                  }
+                  @case (types.FILE) {
+                    <val-file-input [props]="getFieldProp(f)"></val-file-input>
+                  }
+                  @case (types.HOUR) {
+                    <val-hour-input [props]="getFieldProp(f)"></val-hour-input>
+                  }
+                  @case (types.NUMBER) {
+                    <val-number-input [props]="getFieldProp(f)"></val-number-input>
+                  }
+                  @case (types.NUMBER_FROM_TO) {
+                    <val-number-from-to [props]="getFieldProp(f)"></val-number-from-to>
+                  }
+                  @case (types.PASSWORD) {
+                    <val-password-input [props]="getFieldProp(f)"></val-password-input>
+                  }
+                  @case (types.PIN_CODE) {
+                    <val-pin-input [props]="getFieldProp(f)"></val-pin-input>
+                  }
+                  @case (types.RADIO) {
+                    <val-radio-input [props]="getFieldProp(f)"></val-radio-input>
+                  }
+                  @case (types.SELECT) {
+                    <val-select-input [props]="getSelectProp(f)"></val-select-input>
+                  }
+                  @case (types.SEARCH_SELECT) {
+                    <val-select-search [props]="getFieldProp(f)"></val-select-search>
+                  }
+                  @case (types.MULTI_SELECT) {
+                    <val-multi-select-search [props]="getFieldProp(f)"></val-multi-select-search>
+                  }
+                  @case (types.PHONE) {
+                    <val-phone-input [props]="getFieldProp(f)"></val-phone-input>
+                  }
+                  @case (types.HANDLE) {
+                    <val-username-input [props]="getUsernameProp(f)"></val-username-input>
+                  }
+                  @case (types.TOGGLE) {
+                    <val-toggle-input [props]="getFieldProp(f)"></val-toggle-input>
+                  }
+                  @case (types.CHECKBOX_RADIO) {
+                    <val-checkbox-radio-input [props]="getFieldProp(f)"></val-checkbox-radio-input>
+                  }
+                }
+                <val-hint [props]="getFieldProp(f)"></val-hint>
+              </div>
+            }
+            <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'medium' }"></val-divider>
+            <ng-content></ng-content>
+          </div>
+        }
+        <val-button-group
+          [props]="{ buttons: actions, position: 'center', columned: false }"
+          (onClick)="submitHandler($event)"
+        ></val-button-group>
+      </form>
+    </div>
+  `,
+  styleUrls: ['./form.component.scss'],
+})
+export class FormComponent implements OnInit, OnChanges, DoCheck {
+  @Input()
+  props: FormMetadata;
+
+  @Output()
+  onSubmit = new EventEmitter<FormSubmit>();
+
+  @Output()
+  onInvalid = new EventEmitter();
+
+  @Output()
+  onSelectChange = new EventEmitter<{ field: string; value: any }>();
+
+  form: FormGroup;
+  types = InputType;
+  private subscriptions: Subscription[] = [];
+
+  private actionsCache: ButtonMetadata[] = [];
+
+  // Memo de getFieldProp/getUsernameProp por referencia de field — evita
+  // crear un nuevo objeto props por keystroke (cada CD cycle invocaría el
+  // template binding, multiplicando re-renders en cascada por # fields).
+  // WeakMap: si la referencia del field cambia, el cache se libera.
+  private fieldPropMemo = new WeakMap<InputMetadata, InputMetadata>();
+  private usernamePropMemo = new WeakMap<InputMetadata, UsernameInputMetadata>();
+  private textareaPropMemo = new WeakMap<InputMetadata, TextareaInputMetadata>();
+  private selectPropMemo = new WeakMap<InputMetadata, InputMetadata>();
+
+  // Estado previo para detectar cambios en ngDoCheck
+  private previousState: string | undefined;
+
+  constructor(
+    private fb: FormBuilder,
+    private elementRef: ElementRef
+  ) {}
+
+  ngOnInit() {
+    const formControls = {};
+    this.props.sections.forEach(section => {
+      section.fields.forEach(field => {
+        // Honra `field.value` al construir el FormGroup para que controles tipo
+        // HANDLE (que consumen el control directo via [formControl]) reciban el
+        // valor inicial sin que el caller tenga que patchValue post-mount.
+        // El helper applyDefaultValueToControl (val-text-input etc.) sigue
+        // funcionando — escribe sobre un control ya inicializado, idempotente.
+        const initialValue = field.value ?? null;
+        if (field.type === this.types.NUMBER_FROM_TO) {
+          // Crear dos controles para campos NUMBER_FROM_TO
+          formControls[`${field.name}_from`] = [initialValue, field.validators || []];
+          formControls[`${field.name}_to`] = [initialValue, field.validators || []];
+        } else {
+          formControls[field.name] = [initialValue, field.validators || []];
+        }
+      });
+    });
+    this.form = this.fb.group(formControls);
+    this.props.sections.forEach(section => {
+      section.fields
+        .filter(
+          x =>
+            x.type === this.types.SELECT ||
+            x.type === this.types.TEXT ||
+            x.type === this.types.SEARCH_SELECT ||
+            x.type === this.types.MULTI_SELECT
+        )
+        .forEach(field => {
+          this.trackSelectChanges(field.name);
+        });
+    });
+
+    this.syncFieldControlStates();
+    this.updateActionsCache();
+    this.previousState = this.props.state;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Cuando props cambia, reconstruir el cache
+    if (changes['props'] && this.form) {
+      this.syncFieldControlStates();
+      this.updateActionsCache();
+      this.previousState = this.props.state;
+    }
+  }
+
+  ngDoCheck() {
+    // Detectar cambios en el estado del formulario (mutación sin cambiar referencia)
+    if (this.form && this.props && this.props.state !== this.previousState) {
+      this.previousState = this.props.state;
+      this.updateActionsCache();
+    }
+  }
+
+  /**
+   * Synchronizes form control disabled/enabled state with field metadata.
+   */
+  private syncFieldControlStates() {
+    this.props.sections.forEach(section => {
+      section.fields.forEach(field => {
+        if (field.type === this.types.NUMBER_FROM_TO) {
+          const fromControl = this.getControl(`${field.name}_from`);
+          const toControl = this.getControl(`${field.name}_to`);
+
+          if (field.state === ComponentStates.DISABLED) {
+            fromControl.disable({ emitEvent: false });
+            toControl.disable({ emitEvent: false });
+          } else {
+            fromControl.enable({ emitEvent: false });
+            toControl.enable({ emitEvent: false });
+          }
+        } else {
+          const control = this.getControl(field.name);
+          if (field.state === ComponentStates.DISABLED) {
+            control.disable({ emitEvent: false });
+          } else {
+            control.enable({ emitEvent: false });
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * Actualiza el cache de actions basado en el estado actual del form.
+   */
+  private updateActionsCache() {
+    let actionState = this.props.actions.state;
+
+    if (this.props.state === ComponentStates.WORKING) {
+      actionState = ComponentStates.WORKING;
+    } else if (this.props.state === ComponentStates.DISABLED) {
+      actionState = ComponentStates.DISABLED;
+    } else if (this.props.state === ComponentStates.ENABLED || this.form?.valid) {
+      actionState = ComponentStates.ENABLED;
+    }
+
+    this.actionsCache = [{ ...this.props.actions, state: actionState }];
+  }
+
+  ngOnDestroy() {
+    // Cleanup subscriptions to avoid memory leaks
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  trackSelectChanges(fieldName: string) {
+    const control = this.getControl(fieldName);
+    const subscription = control.valueChanges.subscribe(value => {
+      this.onSelectChange.emit({ field: fieldName, value });
+    });
+    this.subscriptions.push(subscription);
+  }
+
+  async submitHandler(token?: string) {
+    this.onSubmit.emit({ fields: this.form.getRawValue(), token });
+  }
+
+  getControl(field: string): FormControl {
+    return this.Form.get(field) as FormControl;
+  }
+
+  getFieldProp(field: InputMetadata): InputMetadata {
+    const cached = this.fieldPropMemo.get(field);
+    if (cached) return cached;
+
+    if (!field.token) {
+      field.token = `input-${field.type}-${field.name}`;
+    }
+
+    let result: InputMetadata;
+    if (field.type === this.types.NUMBER_FROM_TO) {
+      const fromControl = this.getControl(`${field.name}_from`);
+      const toControl = this.getControl(`${field.name}_to`);
+      result = { ...field, fromControl, toControl, control: undefined };
+    } else {
+      const control = this.getControl(field.name);
+      result = { ...field, control };
+    }
+    this.fieldPropMemo.set(field, result);
+    return result;
+  }
+
+  /**
+   * Adapter para SELECT — igual que `getFieldProp` pero limpia `label`.
+   * val-form ya renderiza el título del campo con `<val-title>` arriba del input;
+   * si además pasáramos `label` al `<ion-select>`, este lo pinta DENTRO del pill
+   * → redundancia visual ("Tipo" dos veces). Reusa el mismo memo (con la entrada
+   * ya label-stripped) para no romper la identidad de referencia.
+   */
+  getSelectProp(field: InputMetadata): InputMetadata {
+    const cached = this.selectPropMemo.get(field);
+    if (cached) return cached;
+
+    const base = this.getFieldProp(field);
+    const result: InputMetadata = { ...base, label: '' };
+    this.selectPropMemo.set(field, result);
+    return result;
+  }
+
+  /**
+   * Adapter — convierte un `InputMetadata` (con type=HANDLE) a `UsernameInputMetadata`.
+   * El check de disponibilidad se resuelve dentro del component (AuthService inyectado);
+   * el caller puede sobrescribirlo pasando `field.errors` o un `UsernameInputMetadata`
+   * custom usando type=TEXT si necesita otra fuente de truth.
+   */
+  getUsernameProp(field: InputMetadata): UsernameInputMetadata {
+    const cached = this.usernamePropMemo.get(field);
+    if (cached) return cached;
+
+    const control = this.getControl(field.name);
+    const result: UsernameInputMetadata = {
+      control: control as FormControl<string>,
+      label: field.label,
+      hint: field.hint,
+      placeholder: field.placeholder,
+      minLength: field.range?.min,
+      maxLength: field.range?.max,
+      errors: field.errors,
+      state: field.state,
+    };
+    this.usernamePropMemo.set(field, result);
+    return result;
+  }
+
+  /**
+   * Adapter — convierte un `InputMetadata` (con type=TEXTAREA) a `TextareaInputMetadata`.
+   * Defaults sensatos: autoGrow + counter habilitado, 4-12 rows.
+   */
+  getTextareaProp(field: InputMetadata): TextareaInputMetadata {
+    const cached = this.textareaPropMemo.get(field);
+    if (cached) return cached;
+
+    const control = this.getControl(field.name);
+    const result: TextareaInputMetadata = {
+      control: control as FormControl<string>,
+      name: field.name,
+      label: field.label,
+      hint: field.hint,
+      placeholder: field.placeholder,
+      autoGrow: true,
+      minRows: 4,
+      maxRows: 12,
+      maxLength: field.range?.max ?? 2000,
+      showCounter: true,
+      counterFormat: 'current',
+      fill: 'outline',
+      errors: field.errors,
+      state: field.state,
+    };
+    this.textareaPropMemo.set(field, result);
+    return result;
+  }
+
+  get isAtEndOfForm(): boolean {
+    return isAtEnd(this.elementRef);
+  }
+
+  get Form(): FormGroup {
+    return this.form;
+  }
+
+  get FormState(): { form: FormGroup; data: FormMetadata } {
+    return {
+      form: this.Form,
+      data: this.props,
+    };
+  }
+
+  get actions(): ButtonMetadata[] {
+    // Retornar del cache para evitar crear nuevos objetos en cada ciclo de change detection
+    return this.actionsCache;
+  }
+}