@acontplus/ng-customer 1.1.1 → 2.0.1

package/fesm2022/acontplus-ng-customer.mjs

@@ -1,504 +1,600 @@
-import { IdentificationNumberVo, SEPARADORES_REGEX, HttpClientFactory, isSuccessResponse, SRI_DOCUMENT_TYPE, SEPARATOR_KEY_CODE } from '@acontplus/core';
-import { DateFormatter, getValidId, isValidField, parseJSONSafe } from '@acontplus/utils';
 import * as i0 from '@angular/core';
-import { inject, signal, ChangeDetectionStrategy, Component, input, output, computed } from '@angular/core';
-import { from, forkJoin } from 'rxjs';
-import { NotificationService } from '@acontplus/ng-notifications';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
-import { InputChip, ToUpperCase, Button, DynamicCard } from '@acontplus/ng-components';
-import { MatButtonModule } from '@angular/material/button';
+import { InjectionToken, inject, Injectable, input, output, signal, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i2 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i3 from '@angular/material/form-field';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs';
+import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIcon } from '@angular/material/icon';
+import { Button, ToUpperCase, InputChip } from '@acontplus/ng-components';
 import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i6 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatIcon } from '@angular/material/icon';
-import { MatTooltip } from '@angular/material/tooltip';
-import * as i7 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { provideNativeDateAdapter } from '@angular/material/core';
-import * as i1$1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i2$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-
-class CustomerUseCase {
-    repo;
-    constructor(repo) {
-        this.repo = repo;
-    }
-    getAll(params) {
-        return this.repo.getAll(params);
-    }
-    getFormData() {
-        return this.repo.getFormData();
-    }
-    getById(id) {
-        return this.repo.getById(id);
-    }
-    checkExistence(identificationNumber) {
-        return this.repo.checkExistence(identificationNumber);
-    }
-    create(params) {
-        return this.repo.create(params);
-    }
-    update(params) {
-        return this.repo.update(params);
-    }
-    updateState(id) {
-        return this.repo.updateState(id);
-    }
-    search(filter) {
-        return this.repo.search(filter);
-    }
-}
-
-class CustomerExternalUseCase {
-    repo;
-    constructor(repo) {
-        this.repo = repo;
-    }
-    getById(identification) {
-        const idNumber = new IdentificationNumberVo(identification);
-        return this.repo.getById(idNumber);
-    }
-}
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 
-const CUSTOMER_API = {
-    BILLING: 'customers',
+const MAIN_APP_COMPANY_CUSTOMER_CONFIG = {
+    fields: {
+        // IDs y referencias
+        idTipoIdentificacion: {
+            name: 'idTipoIdentificacion',
+            required: true,
+            visible: true,
+            label: 'Tipo de Identificación',
+            placeholder: 'Seleccione tipo',
+        },
+        idFormaPagoSri: {
+            name: 'idFormaPagoSri',
+            required: false,
+            visible: true,
+            label: 'Forma de Pago SRI',
+            placeholder: 'Seleccione forma de pago',
+        },
+        idTipoClienteProveedor: {
+            name: 'idTipoClienteProveedor',
+            required: false,
+            visible: true,
+            label: 'Tipo de Cliente/Proveedor',
+            placeholder: 'Seleccione tipo',
+        },
+        idSubContribuyente: {
+            name: 'idSubContribuyente',
+            required: false,
+            visible: true,
+            label: 'Sub-Contribuyente',
+            placeholder: 'Seleccione',
+        },
+        idTiempoCredito: {
+            name: 'idTiempoCredito',
+            required: false,
+            visible: true,
+            label: 'Tiempo de Crédito',
+            placeholder: 'Días de crédito',
+        },
+        idCiudad: {
+            name: 'idCiudad',
+            required: false,
+            visible: true,
+            label: 'Ciudad',
+            placeholder: 'Seleccione ciudad',
+        },
+        idCargo: {
+            name: 'idCargo',
+            required: false,
+            visible: true,
+            label: 'Cargo',
+            placeholder: 'Seleccione cargo',
+        },
+        idEmpleado: {
+            name: 'idEmpleado',
+            required: false,
+            visible: true,
+            label: 'Empleado Responsable',
+            placeholder: 'Seleccione empleado',
+        },
+        // Datos principales
+        numeroIdentificacion: {
+            name: 'numeroIdentificacion',
+            required: true,
+            visible: true,
+            label: 'RUC / Cédula',
+            placeholder: 'Ingrese número de identificación (13 dígitos para RUC)',
+        },
+        nombreFiscal: {
+            name: 'nombreFiscal',
+            required: true,
+            visible: true,
+            label: 'Razón Social / Nombre Fiscal',
+            placeholder: 'Ingrese razón social completa',
+        },
+        nombreComercial: {
+            name: 'nombreComercial',
+            required: false,
+            visible: true,
+            label: 'Nombre Comercial',
+            placeholder: 'Ingrese nombre comercial',
+        },
+        direccion: {
+            name: 'direccion',
+            required: true,
+            visible: true,
+            label: 'Dirección',
+            placeholder: 'Calle principal y secundaria',
+        },
+        correo: {
+            name: 'correo',
+            required: false,
+            visible: true,
+            label: 'Correo Electrónico',
+            placeholder: 'ejemplo@correo.com',
+        },
+        telefono: {
+            name: 'telefono',
+            required: false,
+            visible: true,
+            label: 'Teléfono',
+            placeholder: '0999999999',
+        },
+        placa: {
+            name: 'placa',
+            required: false,
+            visible: true,
+            label: 'Placa del Vehículo',
+            placeholder: 'ABC-1234',
+        },
+        nota: {
+            name: 'nota',
+            required: false,
+            visible: true,
+            label: 'Notas',
+            placeholder: 'Observaciones adicionales',
+        },
+        birthDate: {
+            name: 'birthDate',
+            required: false,
+            visible: true,
+            label: 'Fecha de Nacimiento',
+            placeholder: 'DD/MM/AAAA',
+        },
+        // Estados
+        estado: {
+            name: 'estado',
+            required: false,
+            visible: true,
+            label: 'Activo',
+        },
+        validationSri: {
+            name: 'validationSri',
+            required: false,
+            visible: true,
+            label: 'Validado en SRI',
+        },
+        configValorBruto: {
+            name: 'configValorBruto',
+            required: false,
+            visible: true,
+            label: 'Configurar Valor Bruto',
+        },
+    },
+    // Información de crédito
+    showCreditInfo: true,
+    creditFields: {
+        maritalStatusId: {
+            name: 'maritalStatusId',
+            required: false,
+            visible: true,
+            label: 'Estado Civil',
+            placeholder: 'Seleccione',
+        },
+        conyugeNombre: {
+            name: 'conyugeNombre',
+            required: false,
+            visible: true,
+            label: 'Nombre del Cónyuge',
+            placeholder: 'Ingrese nombre',
+        },
+        conyugeTel: {
+            name: 'conyugeTel',
+            required: false,
+            visible: true,
+            label: 'Teléfono del Cónyuge',
+            placeholder: '0999999999',
+        },
+        refFamNombre: {
+            name: 'refFamNombre',
+            required: false,
+            visible: true,
+            label: 'Referencia Familiar',
+            placeholder: 'Nombre',
+        },
+        refFamTel: {
+            name: 'refFamTel',
+            required: false,
+            visible: true,
+            label: 'Teléfono Referencia',
+            placeholder: '0999999999',
+        },
+        housingTypeId: {
+            name: 'housingTypeId',
+            required: false,
+            visible: true,
+            label: 'Tipo de Vivienda',
+            placeholder: 'Seleccione',
+        },
+        dirVivienda: {
+            name: 'dirVivienda',
+            required: false,
+            visible: true,
+            label: 'Dirección de Vivienda',
+            placeholder: 'Dirección completa',
+        },
+        refDomicilio: {
+            name: 'refDomicilio',
+            required: false,
+            visible: true,
+            label: 'Referencia de Domicilio',
+            placeholder: 'Referencia',
+        },
+        sector: {
+            name: 'sector',
+            required: false,
+            visible: true,
+            label: 'Sector',
+            placeholder: 'Ingrese sector',
+        },
+        barrio: {
+            name: 'barrio',
+            required: false,
+            visible: true,
+            label: 'Barrio',
+            placeholder: 'Ingrese barrio',
+        },
+        calle: {
+            name: 'calle',
+            required: false,
+            visible: true,
+            label: 'Calle',
+            placeholder: 'Calle principal',
+        },
+    },
+    submitButtonText: 'Guardar Cliente',
+    cancelButtonText: 'Cancelar',
+};
+// Configuración MÍNIMA para POS
+const POS_COMPANY_CUSTOMER_CONFIG = {
+    fields: {
+        // Solo lo esencial
+        idTipoIdentificacion: {
+            name: 'idTipoIdentificacion',
+            required: true,
+            visible: true,
+            label: 'Tipo ID',
+            placeholder: 'Tipo',
+        },
+        numeroIdentificacion: {
+            name: 'numeroIdentificacion',
+            required: true,
+            visible: true,
+            label: 'Cédula/RUC',
+            placeholder: 'Número de identificación',
+        },
+        nombreFiscal: {
+            name: 'nombreFiscal',
+            required: true,
+            visible: true,
+            label: 'Nombre',
+            placeholder: 'Nombre del cliente',
+        },
+        nombreComercial: {
+            name: 'nombreComercial',
+            required: false,
+            visible: false,
+        },
+        direccion: {
+            name: 'direccion',
+            required: false,
+            visible: true,
+            label: 'Dirección',
+            placeholder: 'Dirección',
+        },
+        correo: {
+            name: 'correo',
+            required: false,
+            visible: false,
+        },
+        telefono: {
+            name: 'telefono',
+            required: false,
+            visible: true,
+            label: 'Teléfono',
+            placeholder: 'Teléfono',
+        },
+        // Resto oculto
+        idFormaPagoSri: { name: 'idFormaPagoSri', required: false, visible: false },
+        idTipoClienteProveedor: { name: 'idTipoClienteProveedor', required: false, visible: false },
+        idSubContribuyente: { name: 'idSubContribuyente', required: false, visible: false },
+        idTiempoCredito: { name: 'idTiempoCredito', required: false, visible: false },
+        idCiudad: { name: 'idCiudad', required: false, visible: false },
+        idCargo: { name: 'idCargo', required: false, visible: false },
+        idEmpleado: { name: 'idEmpleado', required: false, visible: false },
+        placa: { name: 'placa', required: false, visible: false },
+        nota: { name: 'nota', required: false, visible: false },
+        birthDate: { name: 'birthDate', required: false, visible: false },
+        estado: { name: 'estado', required: false, visible: false },
+        validationSri: { name: 'validationSri', required: false, visible: false },
+        configValorBruto: { name: 'configValorBruto', required: false, visible: false },
+    },
+    showCreditInfo: false, // Sin info de crédito en POS
+    submitButtonText: 'Agregar',
+    cancelButtonText: 'Cancelar',
 };
 
-class CompanySearchMapper {
-    static toJson(params) {
-        return JSON.stringify({
-            textSearch: params.search,
-        });
-    }
-    static fromJson(response) {
-        let customers = [];
-        if (response && response.code === '1') {
-            const results = JSON.parse(response.payload) || [];
-            customers = results.map((item) => ({
-                id: item.idCliente,
-                identificationTypeId: item.idTipoIdentificacion,
-                creditTimeId: item.idTiempoCredito,
-                customerId: item.customerId,
-                status: item.estado,
-                email: item.correo,
-                phone: item.telefono,
-                address: item.direccion,
-                licensePlate: item.placa,
-                creditDays: item.diasCredito,
-                sriValidation: item.validationSri,
-                businessName: item.nombreFiscal,
-                tradeName: item.nombreComercial,
-                identificationNumber: item.numeroIdentificacion,
-                identificationType: item.tipoIdentificacion,
-                sriCode: item.codigoSri,
-                companyRuc: item.rucEmpresa,
-                companyId: item.companyId,
-                name: item.nombreFiscal,
-            }));
-        }
-        return customers;
-    }
-}
+const CUSTOMER_SRI_SERVICE = new InjectionToken('CUSTOMER_SRI_SERVICE');
+const COMPANY_CUSTOMER_MAPPER = new InjectionToken('COMPANY_CUSTOMER_MAPPER');
+const COMPANY_CUSTOMER_FORM_CONFIG = new InjectionToken('COMPANY_CUSTOMER_FORM_CONFIG');
+const COMPANY_CUSTOMER_SERVICE = new InjectionToken('COMPANY_CUSTOMER_SERVICE');
 
-class CustomerCreateUpdateMapper {
-    static toJson(param) {
+class CompanyCustomerDefaultMapper {
+    toModel(dto) {
         return {
-            idCliente: getValidId(param.idCliente),
-            idEmpleado: getValidId(param.idEmpleado),
-            idTipoIdentificacion: param.idTipoIdentificacion,
-            idTipoClienteProveedor: getValidId(param.idTipoClienteProveedor),
-            idTipoEntidad: getValidId(param.idTipoEntidad),
-            idCiudad: getValidId(param.idCiudad),
-            idSubContribuyente: getValidId(param.idSubContribuyente),
-            idTiempoCredito: getValidId(param.idTiempoCredito),
-            idEmpresa: getValidId(param.idEmpresa),
-            idCargo: getValidId(param.idCargo),
-            numeroIdentificacion: param.numeroIdentificacion,
-            nombreFiscal: param.nombreFiscal,
-            nombreComercial: param.nombreComercial,
-            direccion: isValidField(param.direccion),
-            telefono: isValidField(param.telefono),
-            correo: isValidField(param.correo),
-            placa: isValidField(param.placa),
-            montoCredito: isValidField(param.montoCredito),
-            nota: isValidField(param.nota),
-            validationSri: param.validationSri,
-            idFormaPagoSri: getValidId(param.idFormaPagoSri),
-            estado: param.estado ?? true,
-            infoCrediticia: param.dataInfoCred && JSON.stringify(param.dataInfoCred),
-            configValorBruto: param.configValorBruto ?? null,
-            birthDate: DateFormatter.isValid(param.birthDate)
-                ? DateFormatter.toUTCString(param.birthDate)
-                : null,
-        };
-    }
-    static fromJson(response) {
-        if (!response)
-            return response;
-        const result = {
-            id: 0,
-        };
-        if (response.code === '1' && typeof response.payload === 'string') {
-            try {
-                const parsed = JSON.parse(response.payload);
-                if (Array.isArray(parsed) && parsed.length > 0) {
-                    const { idCliente } = parsed[0];
-                    result.id = idCliente;
+            name: `Esto de mapper default - ${dto.name}`,
+            id: dto.id,
+            idCliente: dto.id_cliente,
+            idEmpresa: dto.id_empresa,
+            idCargo: dto.id_cargo,
+            idFormaPagoSri: dto.id_forma_pago_sri,
+            idTipoClienteProveedor: dto.id_tipo_cliente_proveedor,
+            idTipoIdentificacion: dto.id_tipo_identificacion,
+            idSubContribuyente: dto.id_sub_contribuyente,
+            idTiempoCredito: dto.id_tiempo_credito,
+            idCiudad: dto.id_ciudad,
+            idEmpleado: dto.id_empleado,
+            numeroIdentificacion: dto.numero_identificacion,
+            nombreFiscal: dto.nombre_fiscal,
+            nombreComercial: dto.nombre_comercial,
+            direccion: dto.direccion,
+            correo: dto.correo,
+            telefono: dto.telefono,
+            placa: dto.placa,
+            nota: dto.nota,
+            birthDate: dto.birth_date ? new Date(dto.birth_date) : null,
+            estado: dto.estado,
+            validationSri: dto.validation_sri,
+            configValorBruto: dto.config_valor_bruto,
+            dataInfoCred: dto.data_info_cred
+                ? {
+                    maritalStatusId: dto.data_info_cred.marital_status_id,
+                    conyugeNombre: dto.data_info_cred.conyuge_nombre,
+                    conyugeTel: dto.data_info_cred.conyuge_tel,
+                    refFamNombre: dto.data_info_cred.ref_fam_nombre,
+                    refFamTel: dto.data_info_cred.ref_fam_tel,
+                    housingTypeId: dto.data_info_cred.housing_type_id,
+                    dirVivienda: dto.data_info_cred.dir_vivienda,
+                    refDomicilio: dto.data_info_cred.ref_domicilio,
+                    sector: dto.data_info_cred.sector,
+                    barrio: dto.data_info_cred.barrio,
+                    calle: dto.data_info_cred.calle,
                 }
-            }
-            catch (error) {
-                console.error('Error parsing payload JSON:', error);
-            }
-        }
-        return result;
+                : undefined,
+        };
     }
-}
-
-class CustomerFormDataMapper {
-    static toJson() {
-        return JSON.stringify({
-            tipo: 2,
+    toModelList(response) {
+        const parsed = JSON.parse(response.payload);
+        const tempList = Array.isArray(parsed) ? parsed[0] : parsed.Table;
+        console.log(tempList);
+        const mapClient = (data) => ({
+            clientId: data.idCliente,
+            identificationTypeId: data.idTipoIdentificacion,
+            identificationNumber: data.numeroIdentificacion,
+            tradeName: data.nombreComercial,
+            legalName: data.nombreFiscal,
+            address: data.direccion,
+            phone: data.telefono,
+            email: data.correo,
+            finalConsumer: data.consumidorFinal,
+            sriValidation: data.validationSri,
+            identificationType: data.tipoIdentificacion,
+            identificationTypeCode: data.codTipoIdentificacion,
+            status: data.estado,
+            totalResults: data.totalResults,
         });
+        const list = tempList.map((item) => mapClient(item));
+        const totalRecords = response.totalRecords ?? (list[0]?.totalRecords || 0);
+        return {
+            data: list,
+            pagination: {
+                totalRecords,
+            },
+        };
     }
-    static fromJson(response) {
-        const result = {};
-        if (response.code === '1') {
-            const mainData = JSON.parse(response.payload);
-            result.tipoIdentificacion = mainData[0];
-            result.tipoContribuyentes = mainData[1];
-            result.tiempoCreditos = mainData[2] || [];
-            const ciudades = mainData[3];
-            result.ciudades = ciudades.reduce((acc, ciudade) => {
-                const dataExists = acc.find((c) => c.idProvincia === ciudade.idProvincia);
-                if (!dataExists) {
-                    acc.push({
-                        idProvincia: ciudade.idProvincia,
-                        nombre: ciudade.provincia,
-                        ciudades: [
-                            {
-                                idCiudad: ciudade.idCiudad,
-                                nombre: ciudade.ciudad,
-                            },
-                        ],
-                    });
-                }
-                else {
-                    dataExists.ciudades.push({
-                        idCiudad: ciudade.idCiudad,
-                        nombre: ciudade.ciudad,
-                    });
+    toCreateDTO(customer) {
+        return {
+            id_tipo_identificacion: customer.idTipoIdentificacion,
+            numero_identificacion: customer.numeroIdentificacion,
+            nombre_fiscal: customer.nombreFiscal,
+            nombre_comercial: customer.nombreComercial,
+            direccion: customer.direccion,
+            correo: customer.correo,
+            telefono: customer.telefono,
+            placa: customer.placa,
+            nota: customer.nota,
+            birth_date: customer.birthDate?.toISOString(),
+            estado: customer.estado,
+            validation_sri: customer.validationSri,
+            config_valor_bruto: customer.configValorBruto,
+            id_forma_pago_sri: customer.idFormaPagoSri,
+            id_tipo_cliente_proveedor: customer.idTipoClienteProveedor,
+            id_sub_contribuyente: customer.idSubContribuyente,
+            id_tiempo_credito: customer.idTiempoCredito,
+            id_ciudad: customer.idCiudad,
+            id_cargo: customer.idCargo,
+            id_empleado: customer.idEmpleado,
+            data_info_cred: customer.dataInfoCred
+                ? {
+                    marital_status_id: customer.dataInfoCred.maritalStatusId,
+                    conyuge_nombre: customer.dataInfoCred.conyugeNombre,
+                    conyuge_tel: customer.dataInfoCred.conyugeTel,
+                    ref_fam_nombre: customer.dataInfoCred.refFamNombre,
+                    ref_fam_tel: customer.dataInfoCred.refFamTel,
+                    housing_type_id: customer.dataInfoCred.housingTypeId,
+                    dir_vivienda: customer.dataInfoCred.dirVivienda,
+                    ref_domicilio: customer.dataInfoCred.refDomicilio,
+                    sector: customer.dataInfoCred.sector,
+                    barrio: customer.dataInfoCred.barrio,
+                    calle: customer.dataInfoCred.calle,
                 }
-                return acc;
-            }, []);
-            result.tiposCliente = mainData[4] || [];
-            result.empresas = mainData[5] || [];
-            result.cargos = mainData[6] || [];
-            result.formasPagoSri = mainData[7] || [];
-            result.housingTypes = mainData[8] || [];
-            result.maritalStatuses = mainData[9] || [];
-            result.employees = mainData[10] || [];
-        }
-        return result;
+                : null,
+        };
     }
-}
-
-class CustomerGetByIdMapper {
-    static fromJson(response) {
-        if (response.code !== '1' || !response.payload) {
-            return {};
-        }
-        const data = JSON.parse(response.payload)[0];
+    toUpdateDTO(customer) {
         return {
-            idCliente: data.idCliente,
-            idTipoClienteProveedor: data.idTipoClienteProveedor,
-            idTipoEntidad: data.idTipoEntidad,
-            idSubContribuyente: data.idSubContribuyente,
-            idTiempoCredito: data.idTiempoCredito,
-            idTipoIdentificacion: data.idTipoIdentificacion,
-            idCiudad: data.idCiudad,
-            numeroIdentificacion: data.numeroIdentificacion,
-            identificacionComprador: data.numeroIdentificacion,
-            razonSocialComprador: data.nombreFiscal,
-            nombreFiscal: data.nombreFiscal,
-            montoCredito: data.montoCredito,
-            nombreComercial: data.nombreComercial,
-            direccion: data.direccion,
-            telefono: data.telefono,
-            correo: data.correo,
-            estado: data.estado,
-            idEmpleado: data.idEmpleado,
-            diasCredito: data.diasCredito,
-            empleado: data.empleado,
-            idEmpresa: data.idEmpresa,
-            idCargo: data.idCargo,
-            placa: data.placa,
-            validationSri: data.validationSri,
-            codigoSri: data.codigoSri,
-            correos: data.correo ? data.correo.split(SEPARADORES_REGEX) : [],
-            telefonos: data.telefono ? data.telefono.split(SEPARADORES_REGEX) : [],
-            placas: data.placa ? data.placa.split(SEPARADORES_REGEX) : [],
-            idFormaPagoSri: data.idFormaPagoSri,
-            dataInfoCred: parseJSONSafe(data.infoCrediticia, {}),
-            nota: data.nota?.trim() ?? '',
-            configValorBruto: data.configValorBruto ?? false,
+            id: customer.id,
+            ...this.toCreateDTO(customer),
         };
     }
 }
 
-class ListCustomerMapper {
-    static toJson(params) {
-        return JSON.stringify({
-            ...params,
-            type: 1,
-            tipo: 1, // remove after
-            pageIndex: params.pageIndex,
-            pageSize: params.pageSize,
+class CompanyCustomerService {
+    apiUrl = '/FactElect/CompanyCustomer/';
+    http = inject(HttpClient);
+    mapper = inject(COMPANY_CUSTOMER_MAPPER, { optional: true }) ?? new CompanyCustomerDefaultMapper();
+    list(params) {
+        console.log(params);
+        const json = JSON.stringify({
+            pageIndex: params.pageIndex || 1,
+            pageSize: params.pageSize || 10,
+            tipo: 1,
         });
+        return this.http
+            .get(`${this.apiUrl}?json=${json}`)
+            .pipe(map(dtos => this.mapper.toModelList(dtos)));
     }
-    static fromJson(response) {
-        // Initialize with backend-aligned shape (PageIndex is commonly 1-based server-side)
-        const result = {
-            items: [],
-            pageIndex: 1,
-            pageSize: 0,
-            totalCount: 0,
-            totalPages: 0,
-            hasPreviousPage: false,
-            hasNextPage: false,
-            metadata: {},
-        };
-        // Parse payload (backend sends JSON string in payload)
-        const parsed = typeof response?.payload === 'string' ? JSON.parse(response.payload) : response?.payload;
-        const dataArray = Array.isArray(parsed)
-            ? (parsed[0] ?? [])
-            : Array.isArray(parsed?.items)
-                ? parsed.items
-                : [];
-        // Map each item to UI-friendly fields, preserving source values
-        result.items = dataArray.map((item, index) => ({
-            index: index + 1,
-            id: item.idCliente,
-            identificationTypeId: item.idTipoIdentificacion,
-            identification: item.numeroIdentificacion,
-            businessName: item.nombreFiscal,
-            tradeName: item.nombreComercial,
-            address: item.direccion,
-            phone: item.telefono,
-            email: item.correo,
-            finalConsumer: item.consumidorFinal,
-            sriValidation: item.validacionSri ?? item.validationSri,
-            sriValidationName: (item.validationSri ?? item.validacionSri) ? 'SI' : 'NO',
-            identificationType: item.tipoIdentificacion,
-            status: item.estado,
-            statusName: item.estado ? 'Activo' : 'Inactivo',
-            isFinalConsumer: item.codTipoIdentificacion === 'CF',
-            totalRecords: item.totalRecords ?? item.TotalCount,
-        }));
-        // Flexible pagination extraction (prefer explicit backend values)
-        const pageIndex = response?.PageIndex ?? response?.pageIndex ?? 1;
-        const pageSize = response?.PageSize ?? response?.pageSize ?? result.items.length;
-        const totalCountFromItem = result.items.length > 0 ? result.items[0].totalRecords : undefined;
-        const totalCount = response?.TotalCount ?? response?.totalCount ?? totalCountFromItem ?? result.items.length;
-        const metadata = response?.Metadata ?? response?.metadata ?? {};
-        result.pageIndex = Number.isFinite(pageIndex) ? pageIndex : 1;
-        result.pageSize = Number.isFinite(pageSize) ? pageSize : result.items.length;
-        result.totalCount = Number.isFinite(totalCount) ? totalCount : result.items.length;
-        result.totalPages = result.pageSize > 0 ? Math.ceil(result.totalCount / result.pageSize) : 0;
-        // Backend semantics show HasPreviousPage as PageIndex > 1
-        result.hasPreviousPage = result.pageIndex > 1;
-        result.hasNextPage = result.pageIndex < result.totalPages;
-        result.metadata = metadata;
-        return result;
+    create(customer) {
+        return this.http.post(this.apiUrl, customer);
     }
-}
-
-class CustomerExternalHttpRepository {
-    get http() {
-        return HttpClientFactory.getClient(); // siempre toma el último cliente configurado
-    }
-    get url() {
-        return `${CUSTOMER_API.BILLING}/Consultas/`;
-    }
-    getById(identification) {
-        const id = identification.getId();
-        let endpoint = '';
-        if (identification.isValidRuc()) {
-            endpoint = `GetRucSRI?Ruc=${id}`;
-        }
-        else if (identification.isValidCedula()) {
-            endpoint = `GetCedulaSri?Ruc=${id}`;
+    update(id, customer) {
+        return this.http.put(`${this.apiUrl}/${id}`, customer);
+    }
+    getById(id) {
+        return this.http.get(`${this.apiUrl}/${id}`);
+    }
+    search(term) {
+        return this.http.get(`${this.apiUrl}/search?q=${term}`);
+    }
+    // Validación completa para app principal
+    validate(customer) {
+        const errors = {};
+        if (!customer.email || !this.isValidEmail(customer.email)) {
+            errors['email'] = 'Email inválido';
         }
-        else {
-            throw new Error('Número de identificación inválido para SRI');
+        if (customer.phone && !this.isValidPhone(customer.phone)) {
+            errors['phone'] = 'Teléfono inválido';
         }
-        return this.http.get(`${this.url}${endpoint}`).then(response => {
-            const idCard = response.numeroRuc ? response.numeroRuc : response.identificacion;
-            const businessName = response.razonSocial ? response.razonSocial : response.nombreCompleto;
-            const data = {
-                phone: response.telefono,
-                email: response.email,
-                idCard,
-                businessName,
-                address: response.direccion,
-            };
-            return {
-                status: response.error ? 'warning' : 'success',
-                code: response.error ? 'EXTERNAL_API_ERROR' : 'SUCCESS',
-                data,
-                message: response.error ?? 'External API call completed',
-                timestamp: new Date().toISOString(),
-            };
-        });
+        return Object.keys(errors).length > 0 ? errors : null;
     }
-}
-
-class CustomerHttpRepository {
-    get http() {
-        return HttpClientFactory.getClient(); // siempre toma el último cliente configurado
+    isValidEmail(email) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
     }
-    get url() {
-        return `${CUSTOMER_API.BILLING}/CompanyCustomer/`;
+    isValidPhone(phone) {
+        return /^\d{10}$/.test(phone.replace(/\D/g, ''));
     }
-    checkExistence(identificationNumber) {
-        const searchPayload = JSON.stringify({
-            textSearch: identificationNumber,
-            tipo: 3,
-        });
-        return this.http.get(`${this.url}?json=${searchPayload}`).then(response => {
-            const result = {
-                status: 'warning',
-                code: response.code ?? 'UNKNOWN_ERROR',
-                data: null,
-                message: response.message ?? 'Unknown error occurred',
-                timestamp: new Date().toISOString(),
-            };
-            if (response.code === '1' && response.payload) {
-                const parsedData = JSON.parse(response.payload);
-                if (Array.isArray(parsedData) && parsedData.length > 0 && Array.isArray(parsedData[0])) {
-                    const [customer] = parsedData[0];
-                    if (customer) {
-                        result.status = 'success';
-                        result.data = customer;
-                    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompanyCustomerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompanyCustomerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompanyCustomerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class CustomerValidators {
+    // Validador para que termine en 001
+    static endsWith001() {
+        return (control) => {
+            const value = control.value;
+            if (value && value.length >= 3) {
+                if (!value.endsWith('001')) {
+                    return { endsWith001: true };
                 }
             }
-            return result;
-        });
-    }
-    getFormData() {
-        const json = CustomerFormDataMapper.toJson();
-        return this.http.get(`${this.url}?json=${json}`).then((response) => {
-            const data = CustomerFormDataMapper.fromJson(response);
-            return {
-                status: 'success',
-                code: response.code ?? 'SUCCESS',
-                data,
-                timestamp: new Date().toISOString(),
-            };
-        });
-    }
-    getAll(obj) {
-        const json = ListCustomerMapper.toJson(obj);
-        return this.http.get(`${this.url}?json=${json}`).then((response) => {
-            const data = ListCustomerMapper.fromJson(response);
-            return {
-                status: 'success',
-                code: response.code ?? 'SUCCESS',
-                data,
-                timestamp: new Date().toISOString(),
-            };
-        });
-    }
-    create(dto) {
-        return this.http
-            .post(this.url, { data: CustomerCreateUpdateMapper.toJson(dto.data) })
-            .then(response => {
-            console.log(response);
-            const data = CustomerCreateUpdateMapper.fromJson(response);
-            return {
-                status: response.code === '1' ? 'success' : 'warning',
-                code: response.code ?? 'OPERATION_FAILED',
-                data,
-                message: response.message ?? 'Operation completed with issues',
-                timestamp: new Date().toISOString(),
-            };
-        });
+            return null;
+        };
     }
-    update(dto) {
-        return this.http
-            .put(`${this.url}${dto.id}`, {
-            data: CustomerCreateUpdateMapper.toJson(dto.data),
-        })
-            .then(response => {
-            console.log(response);
-            return {
-                status: response.code === '1' ? 'success' : 'warning',
-                code: response.code ?? 'OPERATION_FAILED',
-                message: response.message ?? 'Operation completed with issues',
-                timestamp: new Date().toISOString(),
-            };
-        });
+    // Validador para RUC ecuatoriano (13 dígitos)
+    static ecuadorianRuc() {
+        return (control) => {
+            const value = control.value;
+            if (!value)
+                return null;
+            // Debe ser exactamente 13 dígitos
+            if (!/^\d{13}$/.test(value)) {
+                return { invalidRuc: true };
+            }
+            // Debe terminar en 001
+            if (!value.endsWith('001')) {
+                return { rucMustEndWith001: true };
+            }
+            return null;
+        };
     }
-    updateState(id) {
-        return this.http.delete(`${this.url}${id}`).then(response => {
-            return {
-                status: response.code === '1' ? 'success' : 'warning',
-                code: response.code,
-                message: response.message,
-                timestamp: new Date().toISOString(),
-            };
-        });
+    // Validador para cédula ecuatoriana (10 dígitos)
+    static ecuadorianCedula() {
+        return (control) => {
+            const value = control.value;
+            if (!value)
+                return null;
+            if (!/^\d{10}$/.test(value)) {
+                return { invalidCedula: true };
+            }
+            // Algoritmo de validación de cédula ecuatoriana
+            const provincia = parseInt(value.substring(0, 2));
+            if (provincia < 1 || provincia > 24) {
+                return { invalidProvince: true };
+            }
+            const coeficientes = [2, 1, 2, 1, 2, 1, 2, 1, 2];
+            let suma = 0;
+            for (let i = 0; i < 9; i++) {
+                let valor = parseInt(value.charAt(i)) * coeficientes[i];
+                if (valor >= 10)
+                    valor -= 9;
+                suma += valor;
+            }
+            const digitoVerificador = parseInt(value.charAt(9));
+            const resultado = suma % 10 === 0 ? 0 : 10 - (suma % 10);
+            if (resultado !== digitoVerificador) {
+                return { invalidCheckDigit: true };
+            }
+            return null;
+        };
     }
-    getById(id) {
-        return this.http.get(`${this.url}GetId/${id}`).then(response => {
-            const data = CustomerGetByIdMapper.fromJson(response);
-            return {
-                status: response.code === '1' ? 'success' : 'warning',
-                code: response.code ?? 'OPERATION_FAILED',
-                data,
-                message: response.message ?? 'Operation completed with issues',
-                timestamp: new Date().toISOString(),
-            };
-        });
+    // Validador de email
+    static email() {
+        return (control) => {
+            const value = control.value;
+            if (!value)
+                return null;
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(value)) {
+                return { invalidEmail: true };
+            }
+            return null;
+        };
     }
-    search(params) {
-        const json = CompanySearchMapper.toJson(params);
-        return this.http.get(`${this.url}Search?json=${json}`).then(response => {
-            const data = CompanySearchMapper.fromJson(response);
-            return {
-                status: response.code === '1' ? 'success' : 'warning',
-                code: response.code,
-                data,
-                message: response.message,
-                timestamp: new Date().toISOString(),
-            };
-        });
+    // Validador de teléfono ecuatoriano
+    static ecuadorianPhone() {
+        return (control) => {
+            const value = control.value;
+            if (!value)
+                return null;
+            // Debe empezar con 0 y tener 9-10 dígitos
+            if (!/^0\d{8,9}$/.test(value)) {
+                return { invalidPhone: true };
+            }
+            return null;
+        };
     }
 }
 
-class CustomerAddEditComponent {
-    dialogRef = inject((MatDialogRef));
-    customerUseCase = inject(CustomerUseCase);
-    customerExternalUseCase = inject(CustomerExternalUseCase);
-    btnText = signal('Guardar', ...(ngDevMode ? [{ debugName: "btnText" }] : []));
-    paramsOptions = inject(MAT_DIALOG_DATA);
-    params = this.paramsOptions.data;
-    notificationService = inject(NotificationService);
-    title = 'Nuevo Cliente';
-    loading = false;
+class CompanyCustomerFormComponent {
+    formId = input(...(ngDevMode ? [undefined, { debugName: "formId" }] : []));
+    customer;
+    mode = 'create';
+    showButtons = input(true, ...(ngDevMode ? [{ debugName: "showButtons" }] : []));
+    submitted = output();
+    cancelled = output();
+    panelOpenState = signal(false, ...(ngDevMode ? [{ debugName: "panelOpenState" }] : []));
+    fb = inject(FormBuilder);
+    config = inject(COMPANY_CUSTOMER_FORM_CONFIG, { optional: true }) ?? MAIN_APP_COMPANY_CUSTOMER_CONFIG;
+    customerService = inject(COMPANY_CUSTOMER_SERVICE, { optional: true }) ?? inject(CompanyCustomerService);
+    form;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    errorMessage = null;
+    step = signal(0, ...(ngDevMode ? [{ debugName: "step" }] : []));
     emails = [];
     telephones = [];
     tiemposCredito = signal([], ...(ngDevMode ? [{ debugName: "tiemposCredito" }] : []));
@@ -514,373 +610,284 @@ class CustomerAddEditComponent {
     maritalStatuses = signal([], ...(ngDevMode ? [{ debugName: "maritalStatuses" }] : []));
     housingTypes = signal([], ...(ngDevMode ? [{ debugName: "housingTypes" }] : []));
     showRefresh = signal(true, ...(ngDevMode ? [{ debugName: "showRefresh" }] : []));
-    endsWith001Validator(control) {
-        const value = control.value;
-        if (value && value.length >= 3) {
-            if (!value.endsWith('001')) {
-                return { endsWith001: true };
-            }
+    setStep(index) {
+        this.step.set(index);
+    }
+    nextStep() {
+        this.step.update(i => i + 1);
+    }
+    prevStep() {
+        this.step.update(i => i - 1);
+    }
+    ngOnInit() {
+        this.buildForm();
+        if (this.customer) {
+            this.patchFormValue(this.customer);
         }
-        return null;
-    }
-    customerForm = new FormGroup({
-        direccion: new FormControl('', Validators.required),
-        idCargo: new FormControl(0),
-        idCliente: new FormControl(0),
-        idEmpresa: new FormControl(0),
-        idFormaPagoSri: new FormControl(0),
-        idTipoClienteProveedor: new FormControl(0),
-        idTipoIdentificacion: new FormControl(0, Validators.required),
-        idSubContribuyente: new FormControl(0),
-        idTiempoCredito: new FormControl(0),
-        idCiudad: new FormControl(0),
-        idEmpleado: new FormControl(0),
-        nombreFiscal: new FormControl('', Validators.required),
-        nombreComercial: new FormControl(''),
-        numeroIdentificacion: new FormControl({ value: '', disabled: false }, [
-            Validators.required,
-            Validators.minLength(13),
-            Validators.maxLength(13),
-            this.endsWith001Validator,
-        ]),
-        correo: new FormControl(''),
-        telefono: new FormControl(''),
-        placa: new FormControl(''),
-        nota: new FormControl(''),
-        estado: new FormControl(false),
-        birthDate: new FormControl(null),
-        validationSri: new FormControl(false),
-        configValorBruto: new FormControl(false),
-        dataInfoCred: new FormGroup({
-            maritalStatusId: new FormControl(null),
-            conyugeNombre: new FormControl(null),
-            conyugeTel: new FormControl(null),
-            refFamNombre: new FormControl(null),
-            refFamTel: new FormControl(null),
-            housingTypeId: new FormControl(null),
-            dirVivienda: new FormControl(null),
-            refDomicilio: new FormControl(null),
-            sector: new FormControl(null),
-            barrio: new FormControl(null),
-            calle: new FormControl(null),
-        }),
-    });
-    getCustomer(codigo, id) {
-        this.customerForm.patchValue({
-            validationSri: false,
-        });
-        from(this.customerUseCase.checkExistence(id)).subscribe(response => {
-            if (isSuccessResponse(response) && response.data) {
-                alert('El cliente ya se encuentra registrado en su empresa');
-                this.notificationService.toastr.show({
-                    type: 'warning',
-                    message: 'El cliente ya se encuentra registrado en su empresa',
-                });
-                this.customerForm.patchValue({ numeroIdentificacion: null });
-                return;
-            }
-            if (codigo === SRI_DOCUMENT_TYPE.PASSPORT) {
-                this.customerForm.patchValue({
-                    validationSri: true,
-                });
-                return;
-            }
-            from(this.customerExternalUseCase.getById(id)).subscribe(secondResponse => {
-                if (!isSuccessResponse(secondResponse) || !secondResponse.data) {
-                    this.notificationService.toastr.show({
-                        type: 'info',
-                        message: '  No se encontró información en el SRI',
-                    });
-                    return;
-                }
-                const { phone, email, idCard, // numeroRuc
-                businessName, // razonSocial
-                address, // direccion
-                 } = secondResponse.data;
-                if (phone && typeof phone === 'string') {
-                    this.telephones = phone.split(SEPARADORES_REGEX) || [];
-                }
-                if (email && typeof email === 'string') {
-                    this.emails = email.split(SEPARADORES_REGEX) || [];
-                }
-                if (idCard) {
-                    this.customerForm.patchValue({
-                        numeroIdentificacion: idCard,
-                        nombreFiscal: businessName,
-                        validationSri: true,
-                        direccion: address,
-                        nombreComercial: businessName,
-                    });
-                }
+    }
+    getDefaultConfig() {
+        // Configuración por defecto
+        return {};
+    }
+    // Método mejorado para acceder a campos de crédito
+    getCreditFieldConfig(fieldName) {
+        return this.config.creditFields?.[fieldName];
+    }
+    isCreditFieldVisible(fieldName) {
+        const field = this.getCreditFieldConfig(fieldName);
+        return field?.visible || false;
+    }
+    isCreditFieldRequired(fieldName) {
+        const field = this.getCreditFieldConfig(fieldName);
+        return field?.required || false;
+    }
+    getCreditFieldLabel(fieldName) {
+        const field = this.getCreditFieldConfig(fieldName);
+        return field?.label || fieldName;
+    }
+    getCreditFieldPlaceholder(fieldName) {
+        const field = this.getCreditFieldConfig(fieldName);
+        return field?.placeholder || '';
+    }
+    // Método mejorado para construir el FormGroup de crédito
+    buildCreditFormGroup() {
+        if (!this.config.showCreditInfo || !this.config.creditFields) {
+            return this.fb.group({
+                maritalStatusId: [null],
+                conyugeNombre: [null],
+                conyugeTel: [null],
+                refFamNombre: [null],
+                refFamTel: [null],
+                housingTypeId: [null],
+                dirVivienda: [null],
+                refDomicilio: [null],
+                sector: [null],
+                barrio: [null],
+                calle: [null],
             });
+        }
+        // Construir dinámicamente basado en la config
+        const creditGroup = {};
+        const creditFields = this.config.creditFields;
+        Object.keys(creditFields).forEach(key => {
+            const fieldConfig = creditFields[key];
+            const validators = fieldConfig.required ? [Validators.required] : [];
+            creditGroup[key] = [null, validators];
+        });
+        return this.fb.group(creditGroup);
+    }
+    buildForm() {
+        this.form = this.fb.group({
+            // IDs
+            idCliente: [0],
+            idEmpresa: [0],
+            idCargo: [0],
+            idFormaPagoSri: [0],
+            idTipoClienteProveedor: [0],
+            idSubContribuyente: [0],
+            idTiempoCredito: [0],
+            idCiudad: [0],
+            idEmpleado: [0],
+            // Datos principales con validadores
+            idTipoIdentificacion: [
+                0,
+                this.config.fields.idTipoIdentificacion.required ? [Validators.required] : [],
+            ],
+            numeroIdentificacion: ['', this.getValidatorsForField('numeroIdentificacion')],
+            nombreFiscal: ['', this.getValidatorsForField('nombreFiscal')],
+            nombreComercial: [''],
+            direccion: ['', this.getValidatorsForField('direccion')],
+            correo: ['', this.getValidatorsForField('correo')],
+            telefono: ['', this.getValidatorsForField('telefono')],
+            placa: [''],
+            nota: [''],
+            birthDate: [null],
+            // Estados
+            estado: [false],
+            validationSri: [false],
+            configValorBruto: [false],
+            // FormGroup anidado para info de crédito
+            dataInfoCred: this.buildCreditFormGroup(),
         });
     }
-    getLoadData() {
-        if (this.isUpdate()) {
-            return forkJoin([
-                from(this.customerUseCase.getFormData()),
-                from(this.customerUseCase.getById(this.params.id)),
-            ]);
-        }
-        return from(this.customerUseCase.getFormData());
+    patchFormValue(customer) {
+        this.form.patchValue({
+            idCliente: customer.idCliente || 0,
+            idEmpresa: customer.idEmpresa || 0,
+            idCargo: customer.idCargo || 0,
+            idFormaPagoSri: customer.idFormaPagoSri || 0,
+            idTipoClienteProveedor: customer.idTipoClienteProveedor || 0,
+            idTipoIdentificacion: customer.idTipoIdentificacion || 0,
+            idSubContribuyente: customer.idSubContribuyente || 0,
+            idTiempoCredito: customer.idTiempoCredito || 0,
+            idCiudad: customer.idCiudad || 0,
+            idEmpleado: customer.idEmpleado || 0,
+            numeroIdentificacion: customer.numeroIdentificacion || '',
+            nombreFiscal: customer.nombreFiscal || '',
+            nombreComercial: customer.nombreComercial || '',
+            direccion: customer.direccion || '',
+            correo: customer.correo || '',
+            telefono: customer.telefono || '',
+            placa: customer.placa || '',
+            nota: customer.nota || '',
+            birthDate: customer.birthDate || null,
+            estado: customer.estado || false,
+            validationSri: customer.validationSri || false,
+            configValorBruto: customer.configValorBruto || false,
+            dataInfoCred: customer.dataInfoCred || {},
+        });
     }
-    ngOnInit() {
-        try {
-            this.getLoadData().subscribe(response => {
-                let mainDataForm = {};
-                let dataCompanyCustomer = {};
-                if (Array.isArray(response)) {
-                    mainDataForm = response[0].data;
-                    dataCompanyCustomer = response[1];
-                }
-                else {
-                    mainDataForm = response.data;
-                }
-                this.tiposIdentificacion.set(mainDataForm.tipoIdentificacion);
-                this.tiemposCredito.set(mainDataForm.tiempoCreditos);
-                this.tipoContribuyentes.set(mainDataForm.tipoContribuyentes);
-                this.formasPagoSri.set(mainDataForm.formasPagoSri);
-                this.tiposCliente.set(mainDataForm.tiposCliente);
-                this.ciudades.set(mainDataForm.ciudades);
-                this.cargos.set(mainDataForm.cargos);
-                this.empresas.set(mainDataForm.empresas);
-                this.employees.set(mainDataForm.employees);
-                this.maritalStatuses.set(mainDataForm.maritalStatuses);
-                this.housingTypes.set(mainDataForm.housingTypes);
-                if (this.isDataOfSri()) {
-                    const { codigoSri, numeroIdentificacion } = this.params;
-                    const dataIdentificacion = this.tiposIdentificacion().find((ti) => ti.codigoSri === codigoSri);
-                    if (dataIdentificacion) {
-                        const idTipoIdentificacionCtrl = this.customerForm.get('idTipoIdentificacion');
-                        idTipoIdentificacionCtrl?.setValue(dataIdentificacion.idTipoIdentificacion);
-                        const numeroIdentificacionCtrl = this.customerForm.get('numeroIdentificacion');
-                        numeroIdentificacionCtrl?.setValue(numeroIdentificacion);
-                        const idTiempoCreditoCtrl = this.customerForm.get('idTiempoCredito');
-                        idTiempoCreditoCtrl?.setValue(this.tiemposCredito().length > 0
-                            ? this.tiemposCredito()[0].idTiempoCredito
-                            : 0);
-                        this.updateFormControlNumeroIdentificacion(dataIdentificacion.codigoSri);
-                        this.onKeyDownGovernmentId();
-                    }
-                    return;
-                }
-                if (this.isCreate()) {
-                    const dataIdentificacion = this.tiposIdentificacion().find((ti) => ti.codigoSri === SRI_DOCUMENT_TYPE.RUC);
-                    if (dataIdentificacion) {
-                        const idTipoIdentificacionCtrl = this.customerForm.get('idTipoIdentificacion');
-                        idTipoIdentificacionCtrl?.setValue(dataIdentificacion.idTipoIdentificacion);
-                        this.setIdentificationTypeChange(dataIdentificacion.codigoSri);
-                    }
-                    const idTiempoCreditoCtrl = this.customerForm.get('idTiempoCredito');
-                    idTiempoCreditoCtrl?.setValue(this.tiemposCredito().length > 0
-                        ? this.tiemposCredito()[0].idTiempoCredito
-                        : 0);
+    // Método mejorado para obtener validadores
+    getValidatorsForField(fieldName) {
+        const validators = [];
+        const fieldConfig = this.config.fields[fieldName];
+        if (!fieldConfig)
+            return validators;
+        if (fieldConfig.required) {
+            validators.push(Validators.required);
+        }
+        // Validadores específicos por campo
+        switch (fieldName) {
+            case 'numeroIdentificacion':
+                validators.push(Validators.minLength(13));
+                validators.push(Validators.maxLength(13));
+                validators.push(CustomerValidators.endsWith001());
+                break;
+            case 'correo':
+                if (fieldConfig.visible) {
+                    validators.push(CustomerValidators.email());
                 }
-                else {
-                    this.title = 'Editar Cliente';
-                    this.btnText.set('Actualizar');
-                    this.emails = dataCompanyCustomer.correos;
-                    this.telephones = dataCompanyCustomer.telefonos;
-                    this.placas.set(dataCompanyCustomer.placas);
-                    const { dataInfoCred, ...rest } = dataCompanyCustomer;
-                    this.customerForm.patchValue(rest);
-                    if (dataInfoCred) {
-                        this.customerForm.get('dataInfoCred')?.patchValue(dataInfoCred);
-                    }
-                    this.updateFormControlNumeroIdentificacion(rest.codigoSri);
+                break;
+            case 'telefono':
+                if (fieldConfig.visible) {
+                    validators.push(CustomerValidators.ecuadorianPhone());
                 }
-            });
+                break;
         }
-        catch {
-            // Handle error appropriately
+        // Validadores custom del config
+        if (fieldConfig.validators) {
+            validators.push(...fieldConfig.validators);
         }
+        return validators;
     }
-    identificationTypeChange(event) {
-        const dt = this.tiposIdentificacion().find(item => item.idTipoIdentificacion === Number(event.value));
-        this.setIdentificationTypeChange(dt.codigoSri);
-    }
-    updateFormControlNumeroIdentificacion(codigoSri) {
-        const idNumberControl = this.customerForm.get('numeroIdentificacion');
-        this.showRefresh.set(false);
-        if ([SRI_DOCUMENT_TYPE.RUC, SRI_DOCUMENT_TYPE.CEDULA].includes(codigoSri)) {
-            let lengthValidator;
-            this.showRefresh.set(true);
-            if (codigoSri === SRI_DOCUMENT_TYPE.CEDULA) {
-                lengthValidator = [Validators.minLength(10), Validators.maxLength(10)];
-            }
-            else if (codigoSri === SRI_DOCUMENT_TYPE.RUC) {
-                lengthValidator = [
-                    Validators.minLength(13),
-                    Validators.maxLength(13),
-                    this.endsWith001Validator,
-                ];
-            }
-            if (lengthValidator) {
-                idNumberControl?.setValidators([
-                    Validators.required,
-                    Validators.pattern(/^\d+$/), // Solo números
-                    ...lengthValidator,
-                ]);
-            }
-        }
-        else {
-            idNumberControl?.setValidators([Validators.required]);
-        }
-        idNumberControl?.updateValueAndValidity();
+    // Métodos mejorados de acceso
+    isFieldVisible(fieldName) {
+        return this.config.fields[fieldName]?.visible || false;
     }
-    setIdentificationTypeChange(codigoSri) {
-        const idNumberControl = this.customerForm.get('numeroIdentificacion');
-        idNumberControl?.reset();
-        idNumberControl?.clearValidators();
-        this.updateFormControlNumeroIdentificacion(codigoSri);
+    isFieldRequired(fieldName) {
+        return this.config.fields[fieldName]?.required || false;
     }
-    get numeroIdentificacionControl() {
-        return this.customerForm.get('numeroIdentificacion');
+    getFieldLabel(fieldName) {
+        return this.config.fields[fieldName]?.label || fieldName;
     }
-    get birthDateCtrl() {
-        return this.customerForm.get('birthDate');
+    getFieldPlaceholder(fieldName) {
+        return this.config.fields[fieldName]?.placeholder || '';
     }
-    onKeyDownGovernmentId($event) {
-        if ($event) {
-            $event.preventDefault();
-        }
-        if (this.numeroIdentificacionControl?.invalid)
+    identificationTypeChange($ev) {
+        console.log($ev);
+    }
+    onSubmit() {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
             return;
-        const idTipoIdentificacion = this.customerForm.get('idTipoIdentificacion')?.value;
-        const numeroIdentificacion = this.customerForm.get('numeroIdentificacion')?.value;
-        const codigoSri = this.tiposIdentificacion().find((x) => x.idTipoIdentificacion == idTipoIdentificacion).codigoSri;
-        if (numeroIdentificacion) {
-            this.getCustomer(codigoSri, numeroIdentificacion);
         }
-    }
-    isDataOfSri = () => this.params.dataOfSri;
-    isCreate = () => !(this.params.id > 0);
-    isUpdate = () => this.params.id > 0;
-    onSave() {
-        this.customerForm.patchValue({
-            telefono: this.telephones.length > 0 ? this.telephones.join(SEPARATOR_KEY_CODE.SLASH) : null,
-        });
-        this.customerForm.patchValue({
-            correo: this.emails.length > 0 ? this.emails.join(SEPARATOR_KEY_CODE.SLASH) : null,
-        });
-        this.customerForm.patchValue({
-            placa: this.placas().length > 0 ? this.placas().join(SEPARATOR_KEY_CODE.SLASH) : null,
+        const customerData = this.form.getRawValue();
+        if (this.customerService?.validate) {
+            const validationErrors = this.customerService.validate(customerData);
+            if (validationErrors) {
+                this.errorMessage = 'Por favor corrija los errores de validación';
+                return;
+            }
+        }
+        this.isLoading.set(true);
+        this.errorMessage = null;
+        const operation$ = this.mode === 'create'
+            ? this.customerService.create(customerData)
+            : this.customerService.update(this.customer.id, customerData);
+        operation$.subscribe({
+            next: (savedCustomer) => {
+                this.isLoading.set(false);
+                this.submitted.emit(savedCustomer);
+            },
+            error: (error) => {
+                this.isLoading.set(false);
+                this.errorMessage = error.message || 'Error al guardar el cliente';
+            },
         });
-        const dataForm = {
-            ...this.customerForm.value,
-        };
-        if (this.customerForm.invalid) {
-            this.notificationService.toastr.show({
-                type: 'warning',
-                message: 'Ingrese todos datos requeridos',
-            });
-            return;
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    getErrorMessage(fieldName) {
+        const control = this.form.get(fieldName);
+        if (!control || !control.errors || !control.touched) {
+            return '';
         }
-        if (this.isUpdate()) {
-            const sendParams = {
-                id: this.params.id,
-                data: dataForm,
-            };
-            from(this.customerUseCase.update(sendParams)).subscribe(response => {
-                this.notificationService.toastr.show({
-                    type: isSuccessResponse(response) ? 'success' : 'warning',
-                    message: `${response.message}`,
-                });
-                if (isSuccessResponse(response)) {
-                    this.dialogRef.close({
-                        id: this.params.id,
-                    });
-                }
-            });
+        if (control.errors['required']) {
+            return `${this.getFieldLabel(fieldName)} es requerido`;
         }
-        if (this.isCreate()) {
-            from(this.customerUseCase.create(dataForm)).subscribe(response => {
-                this.notificationService.toastr.show({
-                    type: isSuccessResponse(response) ? 'success' : 'warning',
-                    message: `${response.message}`,
-                });
-                if (isSuccessResponse(response)) {
-                    this.dialogRef.close(response.data);
-                }
-            });
+        if (control.errors['minlength']) {
+            return `Mínimo ${control.errors['minlength'].requiredLength} caracteres`;
+        }
+        if (control.errors['maxlength']) {
+            return `Máximo ${control.errors['maxlength'].requiredLength} caracteres`;
+        }
+        if (control.errors['endsWith001']) {
+            return 'Debe terminar en 001';
+        }
+        if (control.errors['invalidRuc']) {
+            return 'RUC inválido';
+        }
+        if (control.errors['invalidCedula']) {
+            return 'Cédula inválida';
         }
+        if (control.errors['invalidEmail']) {
+            return 'Email inválido';
+        }
+        if (control.errors['invalidPhone']) {
+            return 'Teléfono inválido (debe empezar con 0)';
+        }
+        return 'Campo inválido';
     }
-    close() {
-        this.dialogRef.close();
+    // Getters para FormGroups anidados
+    get dataInfoCredForm() {
+        return this.form.get('dataInfoCred');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomerAddEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CustomerAddEditComponent, isStandalone: true, selector: "acp-customer-add-edit", providers: [
-            provideNativeDateAdapter(),
-            {
-                provide: CustomerUseCase,
-                useFactory: () => new CustomerUseCase(new CustomerHttpRepository()),
-            },
-            {
-                provide: CustomerExternalUseCase,
-                useFactory: () => new CustomerExternalUseCase(new CustomerExternalHttpRepository()),
-            },
-        ], ngImport: i0, template: "<mat-dialog-content>\n  <form\n    (ngSubmit)=\"onSave()\"\n    id=\"formCompanyCustomer\"\n    [formGroup]=\"customerForm\"\n    autocomplete=\"off\"\n  >\n    <mat-tab-group>\n      <mat-tab label=\"DATOS PRINCIPALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Tipo Identificaci\u00F3n: </mat-label>\n                <mat-select\n                  formControlName=\"idTipoIdentificacion\"\n                  (selectionChange)=\"identificationTypeChange($event)\"\n                >\n                  @for (item of tiposIdentificacion(); track $index) {\n                  <mat-option [value]=\"item.idTipoIdentificacion\"\n                    >{{ item.descripcion }}</mat-option\n                  >\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>N\u00FAmero de Identificaci\u00F3n</mat-label>\n                <input\n                  type=\"text\"\n                  matInput\n                  (keydown.enter)=\"onKeyDownGovernmentId($event)\"\n                  formControlName=\"numeroIdentificacion\"\n                />\n                @if ( numeroIdentificacionControl?.invalid && (numeroIdentificacionControl?.dirty ||\n                numeroIdentificacionControl?.touched) ) { @if\n                (numeroIdentificacionControl?.hasError('required')) {\n                <mat-error> El n\u00FAmero de identificaci\u00F3n es obligatorio. </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('minlength')) {\n                <mat-error>\n                  Debe tener al menos {{\n                  numeroIdentificacionControl?.errors?.['minlength'].requiredLength }} d\u00EDgitos.\n                </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('maxlength')) {\n                <mat-error>\n                  No puede tener m\u00E1s de {{\n                  numeroIdentificacionControl?.errors?.['maxlength'].requiredLength }} d\u00EDgitos.\n                </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('pattern')) {\n                <mat-error> Solo se permiten caracteres num\u00E9ricos. </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('endsWith001')) {\n                <mat-error> Los \u00FAltimos tres d\u00EDgitos deben ser 001. </mat-error>\n                } } @if (showRefresh()) {\n                <ng-container matSuffix>\n                  <acp-button\n                    type=\"button\"\n                    matStyle=\"icon\"\n                    icon=\"refresh\"\n                    (handleClick)=\"onKeyDownGovernmentId($event)\"\n                  />\n                </ng-container>\n                }\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Fiscal:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreFiscal\"\n                  id=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                />\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Comercial:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                  type=\"text\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>Direcci\u00F3n:</mat-label>\n              <input\n                matInput\n                formControlName=\"direccion\"\n                placeholder=\"AV. 09 DE OCTUBRE...\"\n                acpToUpperCase\n              />\n            </mat-form-field>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"emails\" [labelText]=\"'Correo'\" />\n            </div>\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"telephones\" [labelText]=\"'Tel\u00E9fono'\" />\n            </div>\n          </div>\n\n          @if (isUpdate()) {\n          <div class=\"vstack gap-2 mt-2\">\n            <span>Estado</span>\n            <mat-slide-toggle formControlName=\"estado\">\n              {{ customerForm.value.estado ? 'Activo' : 'Inactivo' }}\n            </mat-slide-toggle>\n          </div>\n          }\n        </div>\n      </mat-tab>\n      <mat-tab label=\"DATOS ADICIONALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n B\u00E1sica\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Contribuyente: </mat-label>\n                      <mat-select formControlName=\"idSubContribuyente\">\n                        @for (item of tipoContribuyentes(); track $index) {\n                        <mat-option [value]=\"item.idSubContribuyente\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n                      <mat-select formControlName=\"idTiempoCredito\">\n                        @for (item of tiemposCredito(); track $index) {\n                        <mat-option [value]=\"item.idTiempoCredito\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Ciudad</mat-label>\n                      <mat-select formControlName=\"idCiudad\">\n                        <mat-option [value]=\"0\">-- Ninguno --</mat-option>\n                        @for (group of ciudades(); track $index) {\n                        <mat-optgroup [label]=\"group.nombre\">\n                          @for (item of group.ciudades; track $index) {\n                          <mat-option [value]=\"item.idCiudad\">{{ item.nombre }}</mat-option>\n                          }\n                        </mat-optgroup>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Cliente: </mat-label>\n                      <mat-select formControlName=\"idTipoClienteProveedor\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                        @for (item of tiposCliente(); track $index) {\n                        <mat-option [value]=\"item.idTipoClienteProveedor\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empresa: </mat-label>\n                      <mat-select formControlName=\"idEmpresa\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of empresas(); track $index) {\n                        <mat-option [value]=\"item.idEmpresa\"> {{ item.descripcion }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Fecha Nacimiento</mat-label>\n                      <input matInput [matDatepicker]=\"birthDate\" formControlName=\"birthDate\" />\n                      <mat-hint>MM/DD/YYYY</mat-hint>\n                      <mat-datepicker-toggle matIconSuffix [for]=\"birthDate\" />\n                      <mat-datepicker #birthDate />\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                      <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Laboral\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empleado: </mat-label>\n                      <mat-select formControlName=\"idEmpleado\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of employees(); track $index) {\n                        <mat-option [value]=\"item.idEmpleado\">\n                          {{ item.nombreCompleto }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Cargo: </mat-label>\n                      <mat-select formControlName=\"idCargo\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of cargos(); track $index) {\n                        <mat-option [value]=\"item.idCargo\"> {{ item.descripcion }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Observaci\u00F3n</mat-label>\n                      <textarea matInput placeholder=\"...\" formControlName=\"nota\"></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Configuraci\u00F3n Financiera\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-1 row-cols-xl-1 row-cols-lg-1 row-cols-md-1 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Forma de pago: </mat-label>\n                      <mat-select formControlName=\"idFormaPagoSri\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of formasPagoSri(); track $index) {\n                        <mat-option [value]=\"item.idFormaPagoSri\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <acp-input-chip labelText=\"Placa\" [chips]=\"placas()\" />\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-checkbox formControlName=\"configValorBruto\"\n                      >Activar configuraci\u00F3n de valor bruto\n                      <mat-icon\n                        matTooltip=\"valor total de un bien o servicio sin incluir impuestos, deducciones o descuentos (uso dentro del reporte)\"\n                        >info</mat-icon\n                      ></mat-checkbox\n                    >\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\"></div>\n          </div>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"INFORMACI\u00D3N CREDITICIA\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Personal\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Estado Civil: </mat-label>\n                      <mat-select formControlName=\"maritalStatusId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of maritalStatuses(); track $index) {\n                        <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Esposo(a):</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"conyugeNombre\"\n                        placeholder=\"Nombre del c\u00F3nyuge\"\n                      />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Personal:</mat-label>\n                      <input matInput formControlName=\"conyugeTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Referencia:</mat-label>\n                      <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Referencia Familiar:</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"refFamNombre\"\n                        placeholder=\"Nombre de referencia familiar\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n de Vivienda\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo de Vivienda: </mat-label>\n                      <mat-select formControlName=\"housingTypeId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of housingTypes(); track $index) {\n                        <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Sector:</mat-label>\n                      <input matInput formControlName=\"sector\" placeholder=\"Nombre del sector\" />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Barrio:</mat-label>\n                      <input matInput formControlName=\"barrio\" placeholder=\"Nombre del barrio\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Calle:</mat-label>\n                      <input matInput formControlName=\"calle\" placeholder=\"Nombre de la calle\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Direcci\u00F3n Completa</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"dirVivienda\"\n                        placeholder=\"Direcci\u00F3n completa de la vivienda (Sector, Barrio y Calle)\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Descripci\u00F3n del Punto de Referencia:</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"refDomicilio\"\n                        placeholder=\"Descripci\u00F3n detallada del punto de referencia\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div class=\"hstack gap-2\">\n    <acp-button type=\"submit\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n    <acp-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n  </div>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: InputChip, selector: "acp-input-chip", inputs: ["chips", "labelText", "placelholder"] }, { kind: "directive", type: ToUpperCase, selector: "[acpToUpperCase]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "component", type: DynamicCard, selector: "acp-dynamic-card", inputs: ["cardTitle", "cardSubtitle", "avatarImageUrl", "isHeaderVisible", "contentPadding", "hasDivider", "areActionsVisible", "primaryButtonText", "secondaryButtonText", "primaryButtonIcon", "secondaryButtonIcon", "buttonsPosition"], outputs: ["primaryButtonClicked", "secondaryButtonClicked", "cardClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    searchIdentificacion($event) {
+        $event.stopPropagation();
+        console.log('search');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompanyCustomerFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CompanyCustomerFormComponent, isStandalone: true, selector: "acp-company-customer-form", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, customer: { classPropertyName: "customer", publicName: "customer", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, exportAs: ["acpCustomerForm"], ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" [id]=\"formId()\" class=\"mb-2\">\n  @if (errorMessage) {\n  <div class=\"alert alert-error\">{{ errorMessage }}</div>\n  }\n  <mat-accordion class=\"mb-2\">\n    <mat-expansion-panel [expanded]=\"step() === 0\" (opened)=\"setStep(0)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>account_circle</mat-icon>\n          Datos Principales\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <div class=\"d-grid gap-2 mx-3 mt-2\">\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            @if (isFieldVisible('idTipoIdentificacion')) {\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('idTipoIdentificacion') }} </mat-label>\n              <mat-select\n                formControlName=\"idTipoIdentificacion\"\n                (selectionChange)=\"identificationTypeChange($event)\"\n              >\n                @for (item of tiposIdentificacion(); track $index) {\n                <mat-option [value]=\"item.idTipoIdentificacion\">{{ item.descripcion }}</mat-option>\n                }\n              </mat-select>\n              @if (form.get('idTipoIdentificacion')?.invalid &&\n              form.get('idTipoIdentificacion')?.touched) {\n              <mat-error> {{ getErrorMessage('idTipoIdentificacion') }}</mat-error>\n              }\n            </mat-form-field>\n            }\n          </div>\n\n          <div class=\"col\">\n            <!-- N\u00FAmero de Identificaci\u00F3n -->\n            @if (isFieldVisible('numeroIdentificacion')) {\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('numeroIdentificacion') }} </mat-label>\n              <input\n                matInput\n                formControlName=\"numeroIdentificacion\"\n                [placeholder]=\"getFieldPlaceholder('numeroIdentificacion')\"\n              />\n              @if (form.get('numeroIdentificacion')?.invalid &&\n              form.get('numeroIdentificacion')?.touched) {\n              <mat-error> {{ getErrorMessage('numeroIdentificacion') }}</mat-error>\n              }\n              <ng-container matSuffix>\n                <button type=\"button\" mat-icon-button (click)=\"searchIdentificacion($event)\">\n                  <mat-icon>search</mat-icon>\n                </button>\n              </ng-container>\n            </mat-form-field>\n            }\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          @if (isFieldVisible('nombreFiscal')){\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('nombreFiscal') }} </mat-label>\n              <input\n                matInput\n                autocomplete=\"off\"\n                formControlName=\"nombreFiscal\"\n                [placeholder]=\"getFieldPlaceholder('nombreFiscal')\"\n                acpToUpperCase\n              />\n              @if (form.get('nombreFiscal')?.invalid && form.get('nombreFiscal')?.touched) {\n              <mat-error> {{ getErrorMessage('nombreFiscal') }}</mat-error>\n              }\n            </mat-form-field>\n          </div>\n\n          } @if (isFieldVisible('nombreComercial')) {\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('nombreComercial') }} </mat-label>\n              <input\n                matInput\n                autocomplete=\"off\"\n                formControlName=\"nombreComercial\"\n                [placeholder]=\"getFieldPlaceholder('nombreComercial')\"\n                acpToUpperCase\n                type=\"text\"\n              />\n            </mat-form-field>\n          </div>\n\n          }\n        </div>\n\n        @if (isFieldVisible('direccion')) {\n\n        <mat-form-field class=\"w-100\">\n          <mat-label> {{ getFieldLabel('direccion') }}:</mat-label>\n          <input\n            matInput\n            formControlName=\"direccion\"\n            [placeholder]=\"getFieldPlaceholder('direccion')\"\n            acpToUpperCase\n          />\n          @if (form.get('direccion')?.invalid && form.get('direccion')?.touched) {\n          <mat-error>{{ getErrorMessage('direccion') }}</mat-error>\n          }\n        </mat-form-field>\n        }\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          @if (isFieldVisible('correo')) {\n          <div class=\"col\">\n            <acp-input-chip [chips]=\"emails\" [labelText]=\"getFieldLabel('correo')\" />\n          </div>\n          } @if (isFieldVisible('telefono')) {\n          <div class=\"col\">\n            <acp-input-chip [chips]=\"telephones\" [labelText]=\"getFieldLabel('telefono')\" />\n          </div>\n          }\n        </div>\n      </div>\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Siguiente\"\n          (handleClick)=\"nextStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"step() === 1\" (opened)=\"setStep(1)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title> Informaci\u00F3n Comercial </mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class=\"d-grid gap-2 mx-3\">\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Forma de pago: </mat-label>\n              <mat-select formControlName=\"idFormaPagoSri\">\n                <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                @for (item of formasPagoSri(); track $index) {\n                <mat-option [value]=\"item.idFormaPagoSri\"> {{ item.descripcion }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n              <mat-select formControlName=\"idTiempoCredito\">\n                @for (item of tiemposCredito(); track $index) {\n                <mat-option [value]=\"item.idTiempoCredito\"> {{ item.descripcion }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tipo Cliente: </mat-label>\n              <mat-select formControlName=\"idTipoClienteProveedor\">\n                <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                @for (item of tiposCliente(); track $index) {\n                <mat-option [value]=\"item.idTipoClienteProveedor\">\n                  {{ item.descripcion }}\n                </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Empleado: </mat-label>\n              <mat-select formControlName=\"idEmpleado\">\n                <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                @for (item of employees(); track $index) {\n                <mat-option [value]=\"item.idEmpleado\"> {{ item.nombreCompleto }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n\n        <mat-form-field>\n          <mat-label>Country</mat-label>\n          <input matInput />\n        </mat-form-field>\n      </div>\n\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Atr\u00E1s\"\n          (handleClick)=\"prevStep()\"\n        />\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Siguiente\"\n          (handleClick)=\"nextStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"step() === 2\" (opened)=\"setStep(2)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title> Informaci\u00F3n de Cr\u00E9dito </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <section class=\"d-grid gap-2 mx-2\" formGroupName=\"dataInfoCred\">\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Estado Civil: </mat-label>\n              <mat-select formControlName=\"maritalStatusId\">\n                <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                @for (item of maritalStatuses(); track $index) {\n                <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tipo de Vivienda: </mat-label>\n              <mat-select formControlName=\"housingTypeId\">\n                <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                @for (item of housingTypes(); track $index) {\n                <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Nombre del C\u00F3nyuge:</mat-label>\n              <input matInput formControlName=\"conyugeNombre\" placeholder=\"Nombre del c\u00F3nyuge\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tel\u00E9fono del C\u00F3nyuge:</mat-label>\n              <input matInput formControlName=\"conyugeTel\" placeholder=\"09xxxxxxxx\" />\n            </mat-form-field>\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Referencia Familiar:</mat-label>\n              <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tel\u00E9fono Referencia:</mat-label>\n              <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n            </mat-form-field>\n          </div>\n        </div>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Direcci\u00F3n de Vivienda</mat-label>\n          <textarea\n            matInput\n            formControlName=\"dirVivienda\"\n            placeholder=\"Direcci\u00F3n completa de la vivienda (Sector, Barrio y Calle)\"\n          ></textarea>\n        </mat-form-field>\n\n        <div\n          class=\"row row-cols-xxl-3 row-cols-xl-3 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Sector:</mat-label>\n              <input matInput formControlName=\"sector\" placeholder=\"Nombre del sector\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Barrio:</mat-label>\n              <input matInput formControlName=\"barrio\" placeholder=\"Nombre del barrio\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Calle:</mat-label>\n              <input matInput formControlName=\"calle\" placeholder=\"Nombre de la calle\" />\n            </mat-form-field>\n          </div>\n        </div>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Referencia de Domicilio</mat-label>\n          <textarea\n            matInput\n            formControlName=\"refDomicilio\"\n            placeholder=\"Descripci\u00F3n detallada del punto de referencia\"\n          ></textarea>\n        </mat-form-field>\n      </section>\n\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Atr\u00E1s\"\n          (handleClick)=\"prevStep()\"\n        />\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Siguiente\"\n          (handleClick)=\"nextStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"step() === 3\" (opened)=\"setStep(3)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title> Notas</mat-panel-title>\n      </mat-expansion-panel-header>\n\n      @if (isFieldVisible('nota')) {\n\n      <mat-form-field class=\"w-100\">\n        <mat-label> {{ getFieldLabel('nota') }} </mat-label>\n        <textarea\n          matInput\n          formControlName=\"nota\"\n          [placeholder]=\"getFieldPlaceholder('nota')\"\n          rows=\"3\"\n        ></textarea>\n      </mat-form-field>\n      }\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Atr\u00E1s\"\n          (handleClick)=\"prevStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n  <!-- Buttons -->\n  @if (showButtons()){\n  <div class=\"form-actions\">\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\" [disabled]=\"isLoading()\">\n      {{ config.cancelButtonText }}\n    </button>\n\n    <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"isLoading() || form.invalid\">\n      @if (!isLoading()) {\n      <span>{{ config.submitButtonText }}</span>\n      } @else {\n      <span>Guardando...</span>\n      }\n    </button>\n  </div>\n\n  }\n</form>\n", styles: [".alert{padding:12px 16px;border-radius:6px;margin-bottom:20px;font-size:14px}.alert.alert-error{background-color:#fef2f2;border:1px solid #fecaca;color:#991b1b}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i4.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "directive", type: ToUpperCase, selector: "[acpToUpperCase]" }, { kind: "component", type: InputChip, selector: "acp-input-chip", inputs: ["chips", "labelText", "placelholder"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomerAddEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompanyCustomerFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'acp-customer-add-edit', imports: [
-                        MatDialogContent,
-                        MatDialogActions,
-                        MatButtonModule,
+            args: [{ selector: 'acp-company-customer-form', exportAs: 'acpCustomerForm', imports: [
                         ReactiveFormsModule,
-                        MatTabsModule,
                         MatFormFieldModule,
                         MatInputModule,
+                        MatExpansionModule,
                         MatSelectModule,
-                        MatSlideToggleModule,
-                        InputChip,
-                        ToUpperCase,
-                        MatCheckbox,
                         MatIcon,
-                        MatTooltip,
-                        MatDatepickerModule,
                         Button,
-                        DynamicCard,
-                    ], providers: [
-                        provideNativeDateAdapter(),
-                        {
-                            provide: CustomerUseCase,
-                            useFactory: () => new CustomerUseCase(new CustomerHttpRepository()),
-                        },
-                        {
-                            provide: CustomerExternalUseCase,
-                            useFactory: () => new CustomerExternalUseCase(new CustomerExternalHttpRepository()),
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-dialog-content>\n  <form\n    (ngSubmit)=\"onSave()\"\n    id=\"formCompanyCustomer\"\n    [formGroup]=\"customerForm\"\n    autocomplete=\"off\"\n  >\n    <mat-tab-group>\n      <mat-tab label=\"DATOS PRINCIPALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Tipo Identificaci\u00F3n: </mat-label>\n                <mat-select\n                  formControlName=\"idTipoIdentificacion\"\n                  (selectionChange)=\"identificationTypeChange($event)\"\n                >\n                  @for (item of tiposIdentificacion(); track $index) {\n                  <mat-option [value]=\"item.idTipoIdentificacion\"\n                    >{{ item.descripcion }}</mat-option\n                  >\n                  }\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>N\u00FAmero de Identificaci\u00F3n</mat-label>\n                <input\n                  type=\"text\"\n                  matInput\n                  (keydown.enter)=\"onKeyDownGovernmentId($event)\"\n                  formControlName=\"numeroIdentificacion\"\n                />\n                @if ( numeroIdentificacionControl?.invalid && (numeroIdentificacionControl?.dirty ||\n                numeroIdentificacionControl?.touched) ) { @if\n                (numeroIdentificacionControl?.hasError('required')) {\n                <mat-error> El n\u00FAmero de identificaci\u00F3n es obligatorio. </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('minlength')) {\n                <mat-error>\n                  Debe tener al menos {{\n                  numeroIdentificacionControl?.errors?.['minlength'].requiredLength }} d\u00EDgitos.\n                </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('maxlength')) {\n                <mat-error>\n                  No puede tener m\u00E1s de {{\n                  numeroIdentificacionControl?.errors?.['maxlength'].requiredLength }} d\u00EDgitos.\n                </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('pattern')) {\n                <mat-error> Solo se permiten caracteres num\u00E9ricos. </mat-error>\n                } @if (numeroIdentificacionControl?.hasError('endsWith001')) {\n                <mat-error> Los \u00FAltimos tres d\u00EDgitos deben ser 001. </mat-error>\n                } } @if (showRefresh()) {\n                <ng-container matSuffix>\n                  <acp-button\n                    type=\"button\"\n                    matStyle=\"icon\"\n                    icon=\"refresh\"\n                    (handleClick)=\"onKeyDownGovernmentId($event)\"\n                  />\n                </ng-container>\n                }\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Fiscal:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreFiscal\"\n                  id=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                />\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Comercial:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                  type=\"text\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>Direcci\u00F3n:</mat-label>\n              <input\n                matInput\n                formControlName=\"direccion\"\n                placeholder=\"AV. 09 DE OCTUBRE...\"\n                acpToUpperCase\n              />\n            </mat-form-field>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"emails\" [labelText]=\"'Correo'\" />\n            </div>\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"telephones\" [labelText]=\"'Tel\u00E9fono'\" />\n            </div>\n          </div>\n\n          @if (isUpdate()) {\n          <div class=\"vstack gap-2 mt-2\">\n            <span>Estado</span>\n            <mat-slide-toggle formControlName=\"estado\">\n              {{ customerForm.value.estado ? 'Activo' : 'Inactivo' }}\n            </mat-slide-toggle>\n          </div>\n          }\n        </div>\n      </mat-tab>\n      <mat-tab label=\"DATOS ADICIONALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n B\u00E1sica\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Contribuyente: </mat-label>\n                      <mat-select formControlName=\"idSubContribuyente\">\n                        @for (item of tipoContribuyentes(); track $index) {\n                        <mat-option [value]=\"item.idSubContribuyente\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n                      <mat-select formControlName=\"idTiempoCredito\">\n                        @for (item of tiemposCredito(); track $index) {\n                        <mat-option [value]=\"item.idTiempoCredito\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Ciudad</mat-label>\n                      <mat-select formControlName=\"idCiudad\">\n                        <mat-option [value]=\"0\">-- Ninguno --</mat-option>\n                        @for (group of ciudades(); track $index) {\n                        <mat-optgroup [label]=\"group.nombre\">\n                          @for (item of group.ciudades; track $index) {\n                          <mat-option [value]=\"item.idCiudad\">{{ item.nombre }}</mat-option>\n                          }\n                        </mat-optgroup>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Cliente: </mat-label>\n                      <mat-select formControlName=\"idTipoClienteProveedor\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                        @for (item of tiposCliente(); track $index) {\n                        <mat-option [value]=\"item.idTipoClienteProveedor\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empresa: </mat-label>\n                      <mat-select formControlName=\"idEmpresa\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of empresas(); track $index) {\n                        <mat-option [value]=\"item.idEmpresa\"> {{ item.descripcion }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Fecha Nacimiento</mat-label>\n                      <input matInput [matDatepicker]=\"birthDate\" formControlName=\"birthDate\" />\n                      <mat-hint>MM/DD/YYYY</mat-hint>\n                      <mat-datepicker-toggle matIconSuffix [for]=\"birthDate\" />\n                      <mat-datepicker #birthDate />\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                      <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Laboral\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empleado: </mat-label>\n                      <mat-select formControlName=\"idEmpleado\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of employees(); track $index) {\n                        <mat-option [value]=\"item.idEmpleado\">\n                          {{ item.nombreCompleto }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Cargo: </mat-label>\n                      <mat-select formControlName=\"idCargo\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of cargos(); track $index) {\n                        <mat-option [value]=\"item.idCargo\"> {{ item.descripcion }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Observaci\u00F3n</mat-label>\n                      <textarea matInput placeholder=\"...\" formControlName=\"nota\"></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Configuraci\u00F3n Financiera\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-1 row-cols-xl-1 row-cols-lg-1 row-cols-md-1 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Forma de pago: </mat-label>\n                      <mat-select formControlName=\"idFormaPagoSri\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of formasPagoSri(); track $index) {\n                        <mat-option [value]=\"item.idFormaPagoSri\">\n                          {{ item.descripcion }}\n                        </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <acp-input-chip labelText=\"Placa\" [chips]=\"placas()\" />\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-checkbox formControlName=\"configValorBruto\"\n                      >Activar configuraci\u00F3n de valor bruto\n                      <mat-icon\n                        matTooltip=\"valor total de un bien o servicio sin incluir impuestos, deducciones o descuentos (uso dentro del reporte)\"\n                        >info</mat-icon\n                      ></mat-checkbox\n                    >\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\"></div>\n          </div>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"INFORMACI\u00D3N CREDITICIA\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Personal\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Estado Civil: </mat-label>\n                      <mat-select formControlName=\"maritalStatusId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of maritalStatuses(); track $index) {\n                        <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Esposo(a):</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"conyugeNombre\"\n                        placeholder=\"Nombre del c\u00F3nyuge\"\n                      />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Personal:</mat-label>\n                      <input matInput formControlName=\"conyugeTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Referencia:</mat-label>\n                      <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Referencia Familiar:</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"refFamNombre\"\n                        placeholder=\"Nombre de referencia familiar\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n de Vivienda\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo de Vivienda: </mat-label>\n                      <mat-select formControlName=\"housingTypeId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of housingTypes(); track $index) {\n                        <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Sector:</mat-label>\n                      <input matInput formControlName=\"sector\" placeholder=\"Nombre del sector\" />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Barrio:</mat-label>\n                      <input matInput formControlName=\"barrio\" placeholder=\"Nombre del barrio\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Calle:</mat-label>\n                      <input matInput formControlName=\"calle\" placeholder=\"Nombre de la calle\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Direcci\u00F3n Completa</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"dirVivienda\"\n                        placeholder=\"Direcci\u00F3n completa de la vivienda (Sector, Barrio y Calle)\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Descripci\u00F3n del Punto de Referencia:</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"refDomicilio\"\n                        placeholder=\"Descripci\u00F3n detallada del punto de referencia\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div class=\"hstack gap-2\">\n    <acp-button type=\"submit\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n    <acp-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n  </div>\n</mat-dialog-actions>\n" }]
-        }] });
+                        ToUpperCase,
+                        InputChip,
+                        MatButtonModule,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" [id]=\"formId()\" class=\"mb-2\">\n  @if (errorMessage) {\n  <div class=\"alert alert-error\">{{ errorMessage }}</div>\n  }\n  <mat-accordion class=\"mb-2\">\n    <mat-expansion-panel [expanded]=\"step() === 0\" (opened)=\"setStep(0)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <mat-icon>account_circle</mat-icon>\n          Datos Principales\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <div class=\"d-grid gap-2 mx-3 mt-2\">\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            @if (isFieldVisible('idTipoIdentificacion')) {\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('idTipoIdentificacion') }} </mat-label>\n              <mat-select\n                formControlName=\"idTipoIdentificacion\"\n                (selectionChange)=\"identificationTypeChange($event)\"\n              >\n                @for (item of tiposIdentificacion(); track $index) {\n                <mat-option [value]=\"item.idTipoIdentificacion\">{{ item.descripcion }}</mat-option>\n                }\n              </mat-select>\n              @if (form.get('idTipoIdentificacion')?.invalid &&\n              form.get('idTipoIdentificacion')?.touched) {\n              <mat-error> {{ getErrorMessage('idTipoIdentificacion') }}</mat-error>\n              }\n            </mat-form-field>\n            }\n          </div>\n\n          <div class=\"col\">\n            <!-- N\u00FAmero de Identificaci\u00F3n -->\n            @if (isFieldVisible('numeroIdentificacion')) {\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('numeroIdentificacion') }} </mat-label>\n              <input\n                matInput\n                formControlName=\"numeroIdentificacion\"\n                [placeholder]=\"getFieldPlaceholder('numeroIdentificacion')\"\n              />\n              @if (form.get('numeroIdentificacion')?.invalid &&\n              form.get('numeroIdentificacion')?.touched) {\n              <mat-error> {{ getErrorMessage('numeroIdentificacion') }}</mat-error>\n              }\n              <ng-container matSuffix>\n                <button type=\"button\" mat-icon-button (click)=\"searchIdentificacion($event)\">\n                  <mat-icon>search</mat-icon>\n                </button>\n              </ng-container>\n            </mat-form-field>\n            }\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          @if (isFieldVisible('nombreFiscal')){\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('nombreFiscal') }} </mat-label>\n              <input\n                matInput\n                autocomplete=\"off\"\n                formControlName=\"nombreFiscal\"\n                [placeholder]=\"getFieldPlaceholder('nombreFiscal')\"\n                acpToUpperCase\n              />\n              @if (form.get('nombreFiscal')?.invalid && form.get('nombreFiscal')?.touched) {\n              <mat-error> {{ getErrorMessage('nombreFiscal') }}</mat-error>\n              }\n            </mat-form-field>\n          </div>\n\n          } @if (isFieldVisible('nombreComercial')) {\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label> {{ getFieldLabel('nombreComercial') }} </mat-label>\n              <input\n                matInput\n                autocomplete=\"off\"\n                formControlName=\"nombreComercial\"\n                [placeholder]=\"getFieldPlaceholder('nombreComercial')\"\n                acpToUpperCase\n                type=\"text\"\n              />\n            </mat-form-field>\n          </div>\n\n          }\n        </div>\n\n        @if (isFieldVisible('direccion')) {\n\n        <mat-form-field class=\"w-100\">\n          <mat-label> {{ getFieldLabel('direccion') }}:</mat-label>\n          <input\n            matInput\n            formControlName=\"direccion\"\n            [placeholder]=\"getFieldPlaceholder('direccion')\"\n            acpToUpperCase\n          />\n          @if (form.get('direccion')?.invalid && form.get('direccion')?.touched) {\n          <mat-error>{{ getErrorMessage('direccion') }}</mat-error>\n          }\n        </mat-form-field>\n        }\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          @if (isFieldVisible('correo')) {\n          <div class=\"col\">\n            <acp-input-chip [chips]=\"emails\" [labelText]=\"getFieldLabel('correo')\" />\n          </div>\n          } @if (isFieldVisible('telefono')) {\n          <div class=\"col\">\n            <acp-input-chip [chips]=\"telephones\" [labelText]=\"getFieldLabel('telefono')\" />\n          </div>\n          }\n        </div>\n      </div>\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Siguiente\"\n          (handleClick)=\"nextStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"step() === 1\" (opened)=\"setStep(1)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title> Informaci\u00F3n Comercial </mat-panel-title>\n      </mat-expansion-panel-header>\n      <div class=\"d-grid gap-2 mx-3\">\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Forma de pago: </mat-label>\n              <mat-select formControlName=\"idFormaPagoSri\">\n                <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                @for (item of formasPagoSri(); track $index) {\n                <mat-option [value]=\"item.idFormaPagoSri\"> {{ item.descripcion }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n              <mat-select formControlName=\"idTiempoCredito\">\n                @for (item of tiemposCredito(); track $index) {\n                <mat-option [value]=\"item.idTiempoCredito\"> {{ item.descripcion }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tipo Cliente: </mat-label>\n              <mat-select formControlName=\"idTipoClienteProveedor\">\n                <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                @for (item of tiposCliente(); track $index) {\n                <mat-option [value]=\"item.idTipoClienteProveedor\">\n                  {{ item.descripcion }}\n                </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Empleado: </mat-label>\n              <mat-select formControlName=\"idEmpleado\">\n                <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                @for (item of employees(); track $index) {\n                <mat-option [value]=\"item.idEmpleado\"> {{ item.nombreCompleto }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n\n        <mat-form-field>\n          <mat-label>Country</mat-label>\n          <input matInput />\n        </mat-form-field>\n      </div>\n\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Atr\u00E1s\"\n          (handleClick)=\"prevStep()\"\n        />\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Siguiente\"\n          (handleClick)=\"nextStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"step() === 2\" (opened)=\"setStep(2)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title> Informaci\u00F3n de Cr\u00E9dito </mat-panel-title>\n      </mat-expansion-panel-header>\n\n      <section class=\"d-grid gap-2 mx-2\" formGroupName=\"dataInfoCred\">\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Estado Civil: </mat-label>\n              <mat-select formControlName=\"maritalStatusId\">\n                <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                @for (item of maritalStatuses(); track $index) {\n                <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tipo de Vivienda: </mat-label>\n              <mat-select formControlName=\"housingTypeId\">\n                <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                @for (item of housingTypes(); track $index) {\n                <mat-option [value]=\"item.id\"> {{ item.name }} </mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Nombre del C\u00F3nyuge:</mat-label>\n              <input matInput formControlName=\"conyugeNombre\" placeholder=\"Nombre del c\u00F3nyuge\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tel\u00E9fono del C\u00F3nyuge:</mat-label>\n              <input matInput formControlName=\"conyugeTel\" placeholder=\"09xxxxxxxx\" />\n            </mat-form-field>\n          </div>\n        </div>\n\n        <div\n          class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Referencia Familiar:</mat-label>\n              <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Tel\u00E9fono Referencia:</mat-label>\n              <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n            </mat-form-field>\n          </div>\n        </div>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Direcci\u00F3n de Vivienda</mat-label>\n          <textarea\n            matInput\n            formControlName=\"dirVivienda\"\n            placeholder=\"Direcci\u00F3n completa de la vivienda (Sector, Barrio y Calle)\"\n          ></textarea>\n        </mat-form-field>\n\n        <div\n          class=\"row row-cols-xxl-3 row-cols-xl-3 row-cols-lg-3 row-cols-md-2 row-cols-sm-1 row-cols-1 g-1\"\n        >\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Sector:</mat-label>\n              <input matInput formControlName=\"sector\" placeholder=\"Nombre del sector\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Barrio:</mat-label>\n              <input matInput formControlName=\"barrio\" placeholder=\"Nombre del barrio\" />\n            </mat-form-field>\n          </div>\n          <div class=\"col\">\n            <mat-form-field class=\"w-100\">\n              <mat-label>Calle:</mat-label>\n              <input matInput formControlName=\"calle\" placeholder=\"Nombre de la calle\" />\n            </mat-form-field>\n          </div>\n        </div>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Referencia de Domicilio</mat-label>\n          <textarea\n            matInput\n            formControlName=\"refDomicilio\"\n            placeholder=\"Descripci\u00F3n detallada del punto de referencia\"\n          ></textarea>\n        </mat-form-field>\n      </section>\n\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Atr\u00E1s\"\n          (handleClick)=\"prevStep()\"\n        />\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Siguiente\"\n          (handleClick)=\"nextStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]=\"step() === 3\" (opened)=\"setStep(3)\" hideToggle>\n      <mat-expansion-panel-header>\n        <mat-panel-title> Notas</mat-panel-title>\n      </mat-expansion-panel-header>\n\n      @if (isFieldVisible('nota')) {\n\n      <mat-form-field class=\"w-100\">\n        <mat-label> {{ getFieldLabel('nota') }} </mat-label>\n        <textarea\n          matInput\n          formControlName=\"nota\"\n          [placeholder]=\"getFieldPlaceholder('nota')\"\n          rows=\"3\"\n        ></textarea>\n      </mat-form-field>\n      }\n      <mat-action-row>\n        <acp-button\n          variant=\"info\"\n          matStyle=\"filled\"\n          type=\"button\"\n          text=\"Atr\u00E1s\"\n          (handleClick)=\"prevStep()\"\n        />\n      </mat-action-row>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n  <!-- Buttons -->\n  @if (showButtons()){\n  <div class=\"form-actions\">\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\" [disabled]=\"isLoading()\">\n      {{ config.cancelButtonText }}\n    </button>\n\n    <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"isLoading() || form.invalid\">\n      @if (!isLoading()) {\n      <span>{{ config.submitButtonText }}</span>\n      } @else {\n      <span>Guardando...</span>\n      }\n    </button>\n  </div>\n\n  }\n</form>\n", styles: [".alert{padding:12px 16px;border-radius:6px;margin-bottom:20px;font-size:14px}.alert.alert-error{background-color:#fef2f2;border:1px solid #fecaca;color:#991b1b}\n"] }]
+        }], propDecorators: { formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], customer: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
-class CustomerCard {
-    customer = input.required(...(ngDevMode ? [{ debugName: "customer" }] : []));
-    editCustomer = output();
-    deleteCustomer = output();
-    getLogoSliceBusinessName = computed(() => {
-        const name = this.customer()?.businessName || '';
-        return name.slice(0, 1);
-    }, ...(ngDevMode ? [{ debugName: "getLogoSliceBusinessName" }] : []));
-    onEditClick() {
-        // Emits the customer object to the parent component
-        this.editCustomer.emit(this.customer());
-    }
-    onDeleteClick() {
-        // Emits the customer object to the parent component
-        this.deleteCustomer.emit(this.customer());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomerCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CustomerCard, isStandalone: true, selector: "acp-customer-card", inputs: { customer: { classPropertyName: "customer", publicName: "customer", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editCustomer: "editCustomer", deleteCustomer: "deleteCustomer" }, ngImport: i0, template: "<div class=\"acp-customer-card\">\n  <mat-card class=\"acp-customer-card-content\">\n    <!-- Header -->\n    <div class=\"acp-card-header\">\n      <div class=\"acp-avatar\" aria-label=\"Logo de cliente\">{{ getLogoSliceBusinessName() }}</div>\n      <h5 class=\"acp-business-name\">{{ customer().businessName }}</h5>\n      <p class=\"acp-trade-name\">{{ customer().tradeName }}</p>\n    </div>\n\n    <!-- Card content -->\n    <mat-card-content>\n      <div class=\"acp-info\">\n        <p><strong>ID:</strong> 1234567890 (RUC)</p>\n        <p><strong>Email:</strong> {{ customer().email }}</p>\n        <p><strong>Tel\u00E9fono:</strong> {{ customer().phone }}</p>\n        <p><strong>Direcci\u00F3n:</strong>{{ customer().address }}</p>\n\n        <div class=\"acp-chips\">\n          <mat-chip-set>\n            <mat-chip color=\"primary\">{{ customer().statusName }}</mat-chip>\n          </mat-chip-set>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <!-- Card actions -->\n    @if (!customer().isFinalConsumer) {\n    <mat-card-actions class=\"acp-actions gap-2\">\n      <acp-button matStyle=\"icon\" icon=\"edit\" (handleClick)=\"onEditClick()\" />\n      <acp-button matStyle=\"icon\" icon=\"delete\" variant=\"danger\" (handleClick)=\"onDeleteClick()\" />\n    </mat-card-actions>\n    }\n  </mat-card>\n</div>\n", styles: [".acp-customer-card{display:block}.acp-customer-card .acp-customer-card-content{width:345px;border-radius:16px}.acp-customer-card .acp-card-header{display:flex;flex-direction:column;align-items:center;padding:16px;background-color:var(--mat-sys-primary-container, #e3f2fd);border-top-left-radius:16px;border-top-right-radius:16px}.acp-customer-card .acp-card-header .acp-business-name{text-align:center;font-size:14px;font-weight:500}.acp-customer-card .acp-card-header .acp-trade-name{text-align:center;font-size:12px;color:var(--mat-sys-on-surface-variant, #6c757d)}.acp-customer-card .acp-avatar{width:80px;height:80px;border-radius:50%;background-color:var(--mat-sys-primary, #1976d2);display:flex;justify-content:center;align-items:center;font-size:32px;color:var(--mat-sys-on-primary, white);margin-bottom:12px}.acp-customer-card .acp-info p{margin:4px 0}.acp-customer-card .acp-chips{margin-top:12px;display:flex;gap:8px}.acp-customer-card .acp-actions{justify-content:flex-end;padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i2$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomerCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'acp-customer-card', imports: [MatCardModule, MatDividerModule, MatChipsModule, MatButtonModule, Button], template: "<div class=\"acp-customer-card\">\n  <mat-card class=\"acp-customer-card-content\">\n    <!-- Header -->\n    <div class=\"acp-card-header\">\n      <div class=\"acp-avatar\" aria-label=\"Logo de cliente\">{{ getLogoSliceBusinessName() }}</div>\n      <h5 class=\"acp-business-name\">{{ customer().businessName }}</h5>\n      <p class=\"acp-trade-name\">{{ customer().tradeName }}</p>\n    </div>\n\n    <!-- Card content -->\n    <mat-card-content>\n      <div class=\"acp-info\">\n        <p><strong>ID:</strong> 1234567890 (RUC)</p>\n        <p><strong>Email:</strong> {{ customer().email }}</p>\n        <p><strong>Tel\u00E9fono:</strong> {{ customer().phone }}</p>\n        <p><strong>Direcci\u00F3n:</strong>{{ customer().address }}</p>\n\n        <div class=\"acp-chips\">\n          <mat-chip-set>\n            <mat-chip color=\"primary\">{{ customer().statusName }}</mat-chip>\n          </mat-chip-set>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <!-- Card actions -->\n    @if (!customer().isFinalConsumer) {\n    <mat-card-actions class=\"acp-actions gap-2\">\n      <acp-button matStyle=\"icon\" icon=\"edit\" (handleClick)=\"onEditClick()\" />\n      <acp-button matStyle=\"icon\" icon=\"delete\" variant=\"danger\" (handleClick)=\"onDeleteClick()\" />\n    </mat-card-actions>\n    }\n  </mat-card>\n</div>\n", styles: [".acp-customer-card{display:block}.acp-customer-card .acp-customer-card-content{width:345px;border-radius:16px}.acp-customer-card .acp-card-header{display:flex;flex-direction:column;align-items:center;padding:16px;background-color:var(--mat-sys-primary-container, #e3f2fd);border-top-left-radius:16px;border-top-right-radius:16px}.acp-customer-card .acp-card-header .acp-business-name{text-align:center;font-size:14px;font-weight:500}.acp-customer-card .acp-card-header .acp-trade-name{text-align:center;font-size:12px;color:var(--mat-sys-on-surface-variant, #6c757d)}.acp-customer-card .acp-avatar{width:80px;height:80px;border-radius:50%;background-color:var(--mat-sys-primary, #1976d2);display:flex;justify-content:center;align-items:center;font-size:32px;color:var(--mat-sys-on-primary, white);margin-bottom:12px}.acp-customer-card .acp-info p{margin:4px 0}.acp-customer-card .acp-chips{margin-top:12px;display:flex;gap:8px}.acp-customer-card .acp-actions{justify-content:flex-end;padding:16px}\n"] }]
-        }], propDecorators: { customer: [{ type: i0.Input, args: [{ isSignal: true, alias: "customer", required: true }] }], editCustomer: [{ type: i0.Output, args: ["editCustomer"] }], deleteCustomer: [{ type: i0.Output, args: ["deleteCustomer"] }] } });
+// export * from './lib/application';
+// export * from './lib/domain';
+// export * from './lib/infrastructure';
+// export * from './lib/ui';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CUSTOMER_API, CompanySearchMapper, CustomerAddEditComponent, CustomerCard, CustomerCreateUpdateMapper, CustomerExternalHttpRepository, CustomerExternalUseCase, CustomerFormDataMapper, CustomerGetByIdMapper, CustomerHttpRepository, CustomerUseCase, ListCustomerMapper };
+export { COMPANY_CUSTOMER_FORM_CONFIG, COMPANY_CUSTOMER_MAPPER, COMPANY_CUSTOMER_SERVICE, CUSTOMER_SRI_SERVICE, CompanyCustomerDefaultMapper, CompanyCustomerFormComponent, CompanyCustomerService, CustomerValidators, MAIN_APP_COMPANY_CUSTOMER_CONFIG, POS_COMPANY_CUSTOMER_CONFIG };
 //# sourceMappingURL=acontplus-ng-customer.mjs.map