AddClient

This project was generated using Angular CLI version 20.1.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

cbm-add-client — Biblioteca de formulario de Cliente

Componente standalone para gestionar la creación/edición de clientes en la UI de CBM.

Este paquete expone el componente CbmAddClientComponent (selector cbm-add-client) y está pensado para usarse dentro de aplicaciones Angular que ya provean los módulos/servicios de repositorios que la componente consume (document-type, client-group, country-code, seller, price-list, rate, etc.).

Resumen rápido

• Selector: cbm-add-client
• Componente standalone (Angular 20) con Shadow DOM para encapsulación de estilos.
• Usa Reactive Forms y depende de varios repositorios y utilidades de @cbm-common.

Instalación (uso dentro de la monorepo)

1. Añadir el paquete como dependencia (si está publicado):

npm install add-client

2. Importar el componente en una página/standalone component o simplemente usar su selector en una plantilla si el proyecto ya provee los peer-dependencies necesarias.

Uso — inputs y outputs principales

El componente expone las siguientes entradas (inputs) y salidas (outputs) basadas en el código fuente:

Inputs

• clientId: string | undefined — Id del cliente a editar. Si se proporciona, el componente carga los datos para edición.
• isFromOrigin: boolean — Indica si la apertura proviene de una fuente origen (comportamiento condicional interno).
• document_type_code: string — Código del tipo de documento inicial.
• document_number: string — Número de documento inicial.
• resetForm: boolean — Si true resetea el formulario en ciertas condiciones.

Outputs

• cancel: void — Emitido cuando el usuario cancela la operación.
• save: any — Emitido al guardar (valor devuelto depende de la integración del repositorio de clientes).
• saveAndView: any — Guardar y abrir vista.
• saveAndNew: any — Guardar y limpiar para crear un nuevo registro.
• update: any — Emitido al actualizar un cliente existente.

Estado y comportamiento

• El formulario está compuesto por controles reactivos para tipo de documento, número de documento, categoría, razón social, nombre comercial, dirección, teléfonos, emails, vendedor, lista de precios, tarifa (rate), actividad económica, profesión, entre otros.
• El componente realiza peticiones a varios repositorios en su constructor / lifecycle hooks:
  • CbmDocumentTypeRepository (para tipos de documento)
  • CbmCountryCodeRepository (para prefijos telefónicos)
  • CbmSellerRepository (búsqueda de vendedores)
  • CbmPriceListRepository (listas de precios)
  • CbmClientGroupRepository (categorías/árbol de clientes)
  • CbmClientRepository (validaciones y guardado)
  • CbmRateRepository (opciones de tarifa)
  • CbmClientCategoryRepository, CbmSettingsProfessionsRepository, entre otros.

Validaciones

• Incluye validadores síncronos y asíncronos:
  • Validación de formato y espacios en blanco.
  • Validación asíncrona de documentNumber contra el repositorio (validateDocumentNumber).
  • Validación de celular según phoneCode (p. ej. Ecuador, 10 dígitos si code 593).
  • Validador de emails múltiples.

Integración de estilos

• El componente usa ViewEncapsulation.ShadowDom y carga styles.css generado por Tailwind en src/lib/styles.css. Si quieres aplicar estilos globales, debes hacerlo fuera del Shadow DOM o usar Custom Properties que el componente lea.

Dependencias y peerDependencies

• Revisa package.json del paquete; las dependencias esperadas como peerDependencies incluyen (resumen):
  • @angular/common, @angular/core (Angular 20)
  • @ng-select/ng-select
  • Múltiples paquetes @cbm-common/* (document-type-repository, notification-service, client-group-repository, country-code-repository, client-category-repository, seller-repository, price-list-repository, client-repository, rate-repository, etc.)

Ejemplo de uso sencillo

En un componente standalone o plantilla donde las dependencias estén disponibles:

<cbm-add-client
   [clientId]="selectedClientId"
   [document_type_code]="'CEDULA'"
   [resetForm]="false"
   (save)="onSave($event)"
   (cancel)="onCancel()"
></cbm-add-client>

Notas de implementación y consideraciones

• El componente hace uso intensivo de señales (signal) y del API reactividad de Angular 20. Si tu aplicación no usa la misma versión de Angular, pueden surgir incompatibilidades.
• Debido al Shadow DOM, iconos y estilos globales no afectan al interior; revisa styles.css incluido si deseas personalizar el aspecto.
• La componente depende de varios repositorios de @cbm-common. Asegúrate de registrar los módulos de esos repositorios (p. ej. CbmClientModule.forRoot({ baseUrl: '...' })) en la configuración de la aplicación para que los providers estén disponibles.

Pruebas

• El proyecto incluye un spec básico (add-client.component.spec.ts). Ejecuta las pruebas con ng test desde la raíz del workspace.

Desarrollo y watch de Tailwind

• Para regenerar styles.css localmente en modo desarrollo:

npm run tailwind --prefix projects/add-client

Publicación

• Construir la librería desde la raíz del workspace:

ng build add-client

Luego publicar desde dist/add-client si corresponde.

Conclusión

• add-client es una librería completa para formularios de cliente que integra múltiples repositorios y utilidades de @cbm-common. El README describe la API pública del componente; si quieres, puedo añadir ejemplos de código TypeScript más completos (ej.: manejo de save / update) o mejorar la sección de integración con módulos y public-api.