Taxes Modal (CbmTaxesModalComponent)

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

Descripción

Componente modal que muestra una tabla detallada de impuestos aplicados a un ítem o transacción. Soporta tres tipos de impuestos: IVA, ICE e IRBPNR, con cálculos automáticos de totales por tipo y total general. Incluye animaciones de apertura/cierre y está encapsulado en Shadow DOM para aislamiento de estilos.

Características principales:

• Componente standalone con encapsulación Shadow DOM.
• Tabla responsive con datos de impuestos (código, descripción, porcentaje, base, valor).
• Cálculos automáticos de totales por tipo de impuesto y total general.
• Animaciones de entrada/salida personalizadas.
• Soporte para cerrar modal con clic fuera, tecla Escape o botón.
• Formateo de números con decimales fijos.

API pública

Inputs

• isOpen: boolean — Controla la visibilidad del modal.
• taxes: CbmTaxesModal.Data — Datos de los impuestos a mostrar (requerido).

Outputs

• open: void — Emitido cuando el modal se abre.
• close: void — Emitido cuando el modal se cierra.

Señales internas (solo lectura)

• totalTaxBase: Signal<number> — Total de bases imponibles de todos los impuestos.
• totalTaxValue: Signal<number> — Total de valores de impuestos de todos los impuestos.

Tipos importantes

export namespace CbmTaxesModal {
  export interface Data {
    iva?: {
      items: Data.Item[];
      totals: {
        tax_iva: number;
        tax_value: number;
        tax_base: number;
      };
    };
    ice?: {
      items: Data.Item[];
      totals: {
        tax_base: number;
        tax_value: number;
      };
    };
    irbpnr?: {
      items: Data.Item[];
      totals: {
        tax_base: number;
        tax_value: number;
      };
    };
  }

  export namespace Data {
    export interface Item {
      type: string;
      tax_code: string;
      tax_description?: string;
      tax_rate: number;
      tax_base: number;
      tax_value: number;
    }
  }
}

Ejemplos de uso

1. Uso básico con datos de impuestos

import { CbmTaxesModalComponent, CbmTaxesModal } from 'taxes-modal';

@Component({
  // ...
  imports: [CbmTaxesModalComponent]
})
export class MyComponent {
  // Estado del modal
  isModalOpen = false;

  // Datos de ejemplo de impuestos
  taxesData: CbmTaxesModal.Data = {
    iva: {
      items: [
        {
          type: 'iva',
          tax_code: 'IVA12',
          tax_description: 'IVA 12%',
          tax_rate: 12,
          tax_base: 100,
          tax_value: 12
        }
      ],
      totals: {
        tax_iva: 100,
        tax_value: 12,
        tax_base: 100
      }
    },
    ice: {
      items: [
        {
          type: 'ice',
          tax_code: 'ICE001',
          tax_description: '',
          tax_rate: 5,
          tax_base: 100,
          tax_value: 5
        }
      ],
      totals: {
        tax_base: 100,
        tax_value: 5
      }
    }
  };

  openModal() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
  }

  onModalOpen() {
    console.log('Modal abierto');
  }

  onModalClose() {
    console.log('Modal cerrado');
  }
}

2. Template correspondiente

<cbm-taxes-modal
  [isOpen]="isModalOpen"
  [taxes]="taxesData"
  (open)="onModalOpen()"
  (close)="onModalClose()"
></cbm-taxes-modal>

3. Control programático

// Abrir modal
this.isModalOpen = true;

// Cerrar modal
this.isModalOpen = false;

Notas de integración

Shadow DOM

• Utiliza ViewEncapsulation.ShadowDom para aislamiento completo de estilos.
• Los estilos globales no afectan el componente; usa variables CSS si necesitas theming.
• Incluye Tailwind CSS completo en styles.css.

Animaciones

• Animaciones personalizadas para cierre del modal con KeyframeEffect y Animation.
• Transición suave con translate y opacity durante 300ms.
• Easing 'ease' para transiciones naturales.

Interacción del usuario

• Cerrar modal con:
  • Clic fuera del contenido del modal.
  • Tecla Escape.
  • Botón "Cerrar".
• El modal usa el elemento nativo <dialog> con showModal().

Cálculos automáticos

• Los totales se calculan automáticamente en ngOnChanges cuando cambian los datos de taxes.
• Totales por tipo de impuesto y total general (base imponible + valor del impuesto).
• Formateo con toFixed(2) para mostrar 2 decimales.

Accesibilidad

• Tabla con aria-label para lectores de pantalla.
• Elemento <dialog> nativo con soporte de teclado.

Construcción y publicación

Para compilar la librería dentro del monorepo:

ng build taxes-modal

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

Desarrollo y pruebas

Ejecutar tests del workspace:

ng test

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

Archivos relevantes

• taxes-modal.component.ts — Componente principal con lógica de modal y cálculos.
• taxes-modal.component.html — Plantilla con tabla de impuestos.
• styles.css — Estilos globales (Tailwind CSS).
• types.ts — Definiciones de tipos TypeScript para datos de impuestos.
• index.ts — Exports públicos.

Fin de la documentación.