Confirmation Modal (CbmConfirmationModalComponent)

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

Descripción

Componente modal de confirmación implementado como standalone y encapsulado con Shadow DOM. Expone entradas (inputs) y salidas (outputs) basadas en Signals y la API de eventos de Angular para integrarse de forma declarativa o programática.

Características principales

• Standalone component (no requiere NgModule para usarse en Angular 15+ cuando se importa correctamente).
• Encapsulación por Shadow DOM: evita fugas de estilos, pero requiere considerar el scope de los estilos globales.
• Inputs/Outputs basados en Signals y outputs custom: titleText, message, isOpen, confirm, cancel, open, close.

API pública

Inputs

• titleText: string — Texto del título del modal. Valor por defecto: Procesar transacción.
• message: string — Mensaje de confirmación. Valor por defecto: ¿Está seguro de que desea procesar la transacción?.
• isOpen: boolean — Controla si el modal está abierto (puede usarse con binding de señales o propiedades).

Outputs

• confirm: void — Emitido cuando el usuario confirma.
• cancel: void — Emitido cuando el usuario cancela.
• open: void — Emitido cuando el modal se abre.
• close: void — Emitido cuando el modal se cierra.

Referencias y selectores

• Selector: <cbm-confirmation-modal>
• Estilos: styles.css dentro del componente (Shadow DOM)

Ejemplos de uso

1. Uso en template (binding simple)

<cbm-confirmation-modal
   [titleText]="'Eliminar registro'"
   [message]="'¿Deseas eliminar el registro seleccionado?'"
   [isOpen]="isModalOpen"
   (confirm)="onConfirm()"
   (cancel)="onCancel()"
></cbm-confirmation-modal>

2. Apertura programática desde componente (usando una propiedad o señal)

// component.ts
isModalOpen = false;

open() { this.isModalOpen = true; }
close() { this.isModalOpen = false; }

onConfirm() { /* procesar confirmación */ }
onCancel() { /* procesar cancelación */ }

3. Uso con comunicación por outputs

<cbm-confirmation-modal
   [isOpen]="isModalOpen"
   (confirm)="handleConfirm()"
   (close)="isModalOpen = false"
></cbm-confirmation-modal>

Notas de integración

• Shadow DOM: El componente utiliza ViewEncapsulation.ShadowDom. Ten en cuenta que los estilos globales no penetran automáticamente en el Shadow DOM. Si necesitas sobreescribir estilos, puedes:

  • Pasar variables CSS a través del host (style en el elemento) o
  • Usar propiedades CSS personalizadas (variables) que el componente lea.

• Accesibilidad: el componente utiliza el elemento <dialog> y showModal()/close(); revisa compatibilidad del navegador o polyfills si das soporte a navegadores antiguos.

• Standalone: para usarlo en una aplicación, importa el componente en el imports del @Component consumidor o decláralo en un módulo.

Construcción y publicación

• Para compilar la librería dentro del monorepo:

ng build confirmation-modal

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

Archivos relevantes

• confirmation-modal.component.ts — implementación del componente standalone, inputs/outputs y control del <dialog>.
• confirmation-modal.component.html — plantilla del modal.
• styles.css — estilos aplicados dentro del Shadow DOM.
• index.ts — exports públicos.

Desarrollo y pruebas

• Ejecutar tests del workspace:

ng test

• El componente tiene pruebas básicas en confirmation-modal.component.spec.ts.

Soporte y mantenimiento

Si deseas añadir opciones (por ejemplo, variantes de botones, iconos o estilos theming), puedo extender el componente para exponer inputs adicionales o crear slots para contenido personalizado.

Fin de la documentación.