Additional Data Modal (CbmAdditionalDataModalComponent)

Documentación en español para el componente standalone CbmAdditionalDataModalComponent incluido en esta librería.

Descripción

Componente modal avanzado para gestionar datos adicionales de un ítem, con pestañas para información adicional y general. Incluye formularios reactivos, validaciones, animaciones y carga dinámica de estilos CSS externos. Diseñado para ser usado en aplicaciones Angular con Shadow DOM para aislamiento de estilos.

Características principales:

• Componente standalone con encapsulación Shadow DOM.
• Pestañas dinámicas: "Información adicional" y "Información general" (esta última solo si hay valores de IVA/ICE).
• Integración con formularios reactivos (FormControl).
• Animaciones de entrada/salida personalizadas.
• Carga dinámica de estilos CSS externos (FontAwesome, etc.).
• Componentes hijos modulares para cada pestaña.
• Directivas personalizadas para inputs, tooltips y validaciones.
• Soporte para códigos de barras y códigos de ítem.

API pública

Inputs

• modalId: string — ID único para el modal. Valor por defecto: UUID generado automáticamente.
• isOpen: boolean — Controla la visibilidad del modal.
• replaceItemNameControl: FormControl<string | null> — Control para el nombre de reemplazo del ítem (requerido).
• commentaryItemControl: FormControl<string | null> — Control para el comentario del ítem (requerido).
• unitDiscountControl: FormControl<string | null> — Control para el descuento unitario.
• priceWithIvaControl: FormControl<string | null> — Control para el precio con IVA.
• unitPriceWithIvaControl: FormControl<string | null> — Control para el precio unitario con IVA.
• ivaValue: number — Valor del IVA.
• iceValue: number — Valor del ICE.
• item: IItemInformation | null — Información del ítem (nombre, código, barcode, precio).

Outputs

• open: void — Emitido cuando el modal se abre.
• close: void — Emitido cuando el modal se cierra.
• onBlurUnitDiscount: void — Emitido al perder foco en el descuento unitario.
• onBlurPriceWithIva: void — Emitido al perder foco en el precio con IVA.
• onBlurUnitPriceWithIva: void — Emitido al perder foco en el precio unitario con IVA.

Señales internas (solo lectura)

• tab_name: Signal<'additional-data' | 'general-data'> — Pestaña activa.
• isVisible: Signal<boolean> — Estado de visibilidad del modal.
• loadCss: Signal<boolean> — Estado de carga de CSS externo.

Tipos importantes

export interface IItemInformation {
  _id: string;
  name: string;
  code?: string;
  barcode?: string;
  price?: number;
}

Estructura de componentes

Componentes hijos

• AdditionalDataComponent — Maneja la pestaña de información adicional con formularios.
• GeneralDataComponent — Muestra información general (IVA, ICE) de solo lectura.

Animaciones

• fadeInOutAnimation — Animación de fade in/out para elementos.
• modalAnimation — Animación de entrada/salida del modal con transformación y opacidad.

Ejemplos de uso

1. Uso básico con formularios reactivos

import { FormControl } from '@angular/forms';
import { CbmAdditionalDataModalComponent } from 'additional-data-modal';

@Component({
  // ...
  imports: [CbmAdditionalDataModalComponent]
})
export class MyComponent {
  // Controles de formulario
  replaceItemNameControl = new FormControl<string>('');
  commentaryItemControl = new FormControl<string>('');
  unitDiscountControl = new FormControl<string>('');
  priceWithIvaControl = new FormControl<string>('');
  unitPriceWithIvaControl = new FormControl<string>('');

  // Estado del modal
  isModalOpen = false;

  // Datos del ítem
  item: IItemInformation = {
    _id: '123',
    name: 'Producto Ejemplo',
    code: 'PROD001',
    barcode: '123456789',
    price: 100
  };

  // Valores de IVA/ICE
  ivaValue = 12;
  iceValue = 5;

  openModal() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
  }

  onBlurUnitDiscount() {
    console.log('Blur en descuento unitario');
  }

  onBlurPriceWithIva() {
    console.log('Blur en precio con IVA');
  }

  onBlurUnitPriceWithIva() {
    console.log('Blur en precio unitario con IVA');
  }
}

2. Template correspondiente

<cbm-additional-data-modal
  [modalId]="'additional-data-modal'"
  [isOpen]="isModalOpen"
  [replaceItemNameControl]="replaceItemNameControl"
  [commentaryItemControl]="commentaryItemControl"
  [unitDiscountControl]="unitDiscountControl"
  [priceWithIvaControl]="priceWithIvaControl"
  [unitPriceWithIvaControl]="unitPriceWithIvaControl"
  [ivaValue]="ivaValue"
  [iceValue]="iceValue"
  [item]="item"
  (open)="onOpen()"
  (close)="onClose()"
  (onBlurUnitDiscount)="onBlurUnitDiscount()"
  (onBlurPriceWithIva)="onBlurPriceWithIva()"
  (onBlurUnitPriceWithIva)="onBlurUnitPriceWithIva()"
></cbm-additional-data-modal>

3. Control programático

// Abrir modal
this.isModalOpen = true;

// Cerrar modal
this.isModalOpen = false;

Notas de integración

Dependencias

El componente requiere las siguientes librerías/directivas:

• @cbm-common/horizontal-overflow-shadow-directive — Para sombras en scroll horizontal.
• @cbm-common/character-counter — Contador de caracteres en inputs.
• @cbm-common/error-translate-pipe — Traducción de errores de validación.
• @cbm-common/number-input-directive — Directiva para inputs numéricos.
• @cbm-common/text-input-directive — Directiva para inputs de texto.
• @cbm-common/tooltip-directive — Directivas para tooltips.

Shadow DOM

• Utiliza ViewEncapsulation.ShadowDom para aislamiento completo de estilos.
• Carga dinámica de CSS externo desde assets/css/style.min.css para iconos (FontAwesome, etc.).
• Los estilos globales no afectan el componente; usa variables CSS si necesitas theming.

Animaciones

• Animaciones Angular personalizadas para entrada/salida del modal.
• Transiciones suaves con transform y opacity.
• Duraciones: 100ms para fade, 300ms para modal.

Formularios y validaciones

• Usa ReactiveFormsModule para formularios reactivos.
• Controles requeridos: replaceItemNameControl, commentaryItemControl.
• Outputs para eventos de blur en campos específicos.

Navegación por teclado

• Soporte para cerrar modal con tecla Escape (@HostListener).

Pestañas dinámicas

• Pestaña "Información general" solo se muestra si hay valores de ivaValue o iceValue.
• Navegación por clic en pestañas.

Construcción y publicación

Para compilar la librería dentro del monorepo:

ng build additional-data-modal

Publicar desde dist/additional-data-modal con npm publish si corresponde.

Desarrollo y pruebas

Ejecutar tests del workspace:

ng test

El componente incluye pruebas básicas en additional-data-modal.component.spec.ts.

Archivos relevantes

• additional-data-modal.component.ts — Componente principal con lógica de modal y pestañas.
• additional-data-modal.component.html — Plantilla principal con navegación y contenido.
• styles.css — Estilos globales (Tailwind CSS).
• types.ts — Definiciones de tipos TypeScript.
• animations.ts — Definiciones de animaciones Angular.
• components/additional-data/ — Componente para pestaña de datos adicionales.
• components/general-data/ — Componente para pestaña de datos generales.
• index.ts — Exports públicos.

Fin de la documentación.