@acontplus/ng-customer 2.0.3 → 2.1.0

package/fesm2022/acontplus-ng-customer.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, input, output, signal, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, output, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, HostListener, Directive } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
-import { map } from 'rxjs';
+import { map, forkJoin, from } from 'rxjs';
 import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/input';
@@ -11,314 +11,86 @@ 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 { ToUpperCase, InputChip, Button, AdvancedDialogService, DataGrid } from '@acontplus/ng-components';
 import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { SRI_DOCUMENT_TYPE } from '@acontplus/core';
+import { MatDialogRef, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { isValidField } from '@acontplus/utils';
+import * as i4$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 
-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',
-};
-
-const CUSTOMER_SRI_SERVICE = new InjectionToken('CUSTOMER_SRI_SERVICE');
+const CUSTOMER_SRI_HTTP_TOKEN = new InjectionToken('CUSTOMER_SRI_HTTP_TOKEN');
 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');
+const COMPANY_CUSTOMER_HTTP_TOKEN = new InjectionToken('COMPANY_CUSTOMER_HTTP_TOKEN');
+
+class CompanyCustomerFormDataResult {
+    identificationTypes = [];
+    tipoContribuyentes = [];
+    tiempoCreditos = [];
+    cities = [];
+    tiposCliente = [];
+    empresas = [];
+    cargos = [];
+    formasPagoSri = [];
+    housingTypes = [];
+    maritalStatuses = [];
+    employees = [];
+}
 
 class CompanyCustomerDefaultMapper {
+    toModelFormData(response) {
+        const result = new CompanyCustomerFormDataResult();
+        if (response.code === '1') {
+            const mainData = JSON.parse(response.payload);
+            const cities = Array.isArray(mainData) ? mainData[3] : mainData.cities;
+            const identificationTypes = Array.isArray(mainData)
+                ? mainData[0]
+                : mainData.identificationTypes;
+            console.log(mainData);
+            result.identificationTypes = identificationTypes.map(item => ({
+                id: item.idTipoIdentificacion,
+                code: item.codigo,
+                value: item.descripcion,
+                sriCode: item.codigoSri,
+            }));
+            result.tipoContribuyentes = mainData[1];
+            result.tiempoCreditos = mainData[2] || [];
+            result.cities = cities.reduce((acc, ciudade) => {
+                const dataExists = acc.find((c) => c.idProvincia === ciudade.idProvincia);
+                if (!dataExists) {
+                    acc.push({
+                        id: ciudade.idProvincia,
+                        value: ciudade.provincia,
+                        cities: [
+                            {
+                                id: ciudade.idCiudad,
+                                value: ciudade.ciudad,
+                            },
+                        ],
+                    });
+                }
+                else {
+                    dataExists.cities.push({
+                        id: ciudade.idCiudad,
+                        value: ciudade.ciudad,
+                    });
+                }
+                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;
+    }
     toModel(dto) {
         return {
             name: `Esto de mapper default - ${dto.name}`,
@@ -366,10 +138,11 @@ class CompanyCustomerDefaultMapper {
         const parsed = JSON.parse(response.payload);
         const tempList = Array.isArray(parsed) ? parsed[0] : parsed.Table;
         console.log(tempList);
-        const mapClient = (data) => ({
+        const mapClient = (data, index) => ({
+            index: index + 1,
             clientId: data.idCliente,
             identificationTypeId: data.idTipoIdentificacion,
-            identificationNumber: data.numeroIdentificacion,
+            idCard: data.numeroIdentificacion,
             tradeName: data.nombreComercial,
             legalName: data.nombreFiscal,
             address: data.direccion,
@@ -380,9 +153,9 @@ class CompanyCustomerDefaultMapper {
             identificationType: data.tipoIdentificacion,
             identificationTypeCode: data.codTipoIdentificacion,
             status: data.estado,
-            totalResults: data.totalResults,
+            totalRecords: data.totalRecords,
         });
-        const list = tempList.map((item) => mapClient(item));
+        const list = tempList.map((item, index) => mapClient(item, index));
         const totalRecords = response.totalRecords ?? (list[0]?.totalRecords || 0);
         return {
             data: list,
@@ -438,16 +211,25 @@ class CompanyCustomerDefaultMapper {
     }
 }
 
-class CompanyCustomerService {
+class CompanyCustomerHttp {
     apiUrl = '/FactElect/CompanyCustomer/';
     http = inject(HttpClient);
     mapper = inject(COMPANY_CUSTOMER_MAPPER, { optional: true }) ?? new CompanyCustomerDefaultMapper();
+    getFormData() {
+        const json = JSON.stringify({
+            tipo: 2,
+        });
+        return this.http
+            .get(`${this.apiUrl}?json=${json}`)
+            .pipe(map(response => this.mapper.toModelFormData(response)));
+    }
     list(params) {
         console.log(params);
         const json = JSON.stringify({
             pageIndex: params.pageIndex || 1,
             pageSize: params.pageSize || 10,
             tipo: 1,
+            ...params,
         });
         return this.http
             .get(`${this.apiUrl}?json=${json}`)
@@ -482,10 +264,10 @@ class CompanyCustomerService {
     isValidPhone(phone) {
         return /^\d{10}$/.test(phone.replace(/\D/g, ''));
     }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerHttp, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerHttp, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CompanyCustomerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerHttp, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -580,17 +362,312 @@ class CustomerValidators {
     }
 }
 
-class CompanyCustomerFormComponent {
+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 CompanyCustomerForm {
     formId = input(...(ngDevMode ? [undefined, { debugName: "formId" }] : []));
-    customer;
-    mode = 'create';
+    customer = input({}, ...(ngDevMode ? [{ debugName: "customer" }] : []));
+    mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     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);
+    customerService = inject(COMPANY_CUSTOMER_HTTP_TOKEN, { optional: true }) ?? inject(CompanyCustomerHttp);
     form;
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     errorMessage = null;
@@ -600,7 +677,7 @@ class CompanyCustomerFormComponent {
     tiemposCredito = signal([], ...(ngDevMode ? [{ debugName: "tiemposCredito" }] : []));
     tipoContribuyentes = signal([], ...(ngDevMode ? [{ debugName: "tipoContribuyentes" }] : []));
     tiposCliente = signal([], ...(ngDevMode ? [{ debugName: "tiposCliente" }] : []));
-    tiposIdentificacion = signal([], ...(ngDevMode ? [{ debugName: "tiposIdentificacion" }] : []));
+    identificationTypes = signal([], ...(ngDevMode ? [{ debugName: "identificationTypes" }] : []));
     formasPagoSri = signal([], ...(ngDevMode ? [{ debugName: "formasPagoSri" }] : []));
     placas = signal([], ...(ngDevMode ? [{ debugName: "placas" }] : []));
     ciudades = signal([], ...(ngDevMode ? [{ debugName: "ciudades" }] : []));
@@ -609,21 +686,54 @@ class CompanyCustomerFormComponent {
     employees = signal([], ...(ngDevMode ? [{ debugName: "employees" }] : []));
     maritalStatuses = signal([], ...(ngDevMode ? [{ debugName: "maritalStatuses" }] : []));
     housingTypes = signal([], ...(ngDevMode ? [{ debugName: "housingTypes" }] : []));
-    showRefresh = signal(true, ...(ngDevMode ? [{ debugName: "showRefresh" }] : []));
     setStep(index) {
         this.step.set(index);
     }
-    nextStep() {
-        this.step.update(i => i + 1);
-    }
-    prevStep() {
-        this.step.update(i => i - 1);
+    loadFormData() {
+        if (this.mode() === 'edit') {
+            return forkJoin([
+                from(this.customerService.getFormData()),
+                // from(this.customerService.getById(this.params.id)),
+            ]);
+        }
+        return from(this.customerService.getFormData());
     }
     ngOnInit() {
         this.buildForm();
-        if (this.customer) {
-            this.patchFormValue(this.customer);
-        }
+        this.loadFormData().subscribe(response => {
+            const mainDataForm = Array.isArray(response)
+                ? response[0].data
+                : response;
+            console.log(response);
+            this.identificationTypes.set(mainDataForm.identificationTypes);
+            /*  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.mode() === 'create') {
+                const dataIdentificacion = this.identificationTypes().find(ti => ti.sriCode === SRI_DOCUMENT_TYPE.RUC);
+                if (dataIdentificacion) {
+                    this.form.patchValue({
+                        idTipoIdentificacion: dataIdentificacion.id,
+                    });
+                    //  this.setIdentificationTypeChange(dataIdentificacion.codigoSri);
+                }
+                if (this.tiemposCredito().length > 0) {
+                    this.form.patchValue({
+                        idTiempoCredito: this.tiemposCredito()[0].id,
+                    });
+                }
+            }
+        });
+        /*  if (this.customer) {
+          this.patchFormValue(this.customer());
+        }*/
     }
     getDefaultConfig() {
         // Configuración por defecto
@@ -801,9 +911,9 @@ class CompanyCustomerFormComponent {
         }
         this.isLoading.set(true);
         this.errorMessage = null;
-        const operation$ = this.mode === 'create'
+        const operation$ = this.mode() === 'create'
             ? this.customerService.create(customerData)
-            : this.customerService.update(this.customer.id, customerData);
+            : this.customerService.update(this.customer().id, customerData);
         operation$.subscribe({
             next: (savedCustomer) => {
                 this.isLoading.set(false);
@@ -857,10 +967,10 @@ class CompanyCustomerFormComponent {
         $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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CompanyCustomerForm, 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: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, 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 identificationTypes(); track $index) {\n                <mat-option [value]=\"item.id\">{{ item.value }}</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-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    </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    </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-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: "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: "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: "21.0.6", ngImport: i0, type: CompanyCustomerFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerForm, decorators: [{
             type: Component,
             args: [{ selector: 'acp-company-customer-form', exportAs: 'acpCustomerForm', imports: [
                         ReactiveFormsModule,
@@ -869,25 +979,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatExpansionModule,
                         MatSelectModule,
                         MatIcon,
-                        Button,
                         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"] }] } });
+                    ], 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 identificationTypes(); track $index) {\n                <mat-option [value]=\"item.id\">{{ item.value }}</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-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    </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    </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-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: i0.Input, args: [{ isSignal: true, alias: "customer", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+class CompanyCustomerAddEditDialog {
+    formId = signal('companyCustomerFormId', ...(ngDevMode ? [{ debugName: "formId" }] : []));
+    dgRef = inject((MatDialogRef));
+    onCustomerCreated(customer) {
+        console.log('Cliente creado:', customer);
+        // Mostrar notificación de éxito
+    }
+    onCancel() {
+        this.dgRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerAddEditDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: CompanyCustomerAddEditDialog, isStandalone: true, selector: "acp-company-customer-add-edit-dialog", ngImport: i0, template: "<mat-dialog-content>\n  <div class=\"page-container\">\n    <acp-company-customer-form\n      [formId]=\"formId()\"\n      #form\n      mode=\"create\"\n      (submitted)=\"onCustomerCreated($event)\"\n      (cancelled)=\"onCancel()\"\n      [showButtons]=\"false\"\n    ></acp-company-customer-form>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <div class=\"hstack gap-2\">\n    <acp-button\n      type=\"submit\"\n      icon=\"save\"\n      [form]=\"formId()\"\n      [text]=\"form.isLoading() ? 'Guardando...' : 'Guardar'\"\n      [variant]=\"'success'\"\n      [matStyle]=\"'filled'\"\n      [disabled]=\"form.form.invalid || form.isLoading()\"\n    />\n    <acp-button\n      type=\"button\"\n      variant=\"dark\"\n      text=\"Cerrar\"\n      matStyle=\"filled\"\n      (handleClick)=\"onCancel()\"\n    />\n  </div>\n</mat-dialog-actions>\n", dependencies: [{ kind: "component", type: CompanyCustomerForm, selector: "acp-company-customer-form", inputs: ["formId", "customer", "mode", "showButtons"], outputs: ["submitted", "cancelled"], exportAs: ["acpCustomerForm"] }, { 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: "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: "21.2.1", ngImport: i0, type: CompanyCustomerAddEditDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-company-customer-add-edit-dialog', imports: [CompanyCustomerForm, MatDialogContent, MatDialogActions, Button], template: "<mat-dialog-content>\n  <div class=\"page-container\">\n    <acp-company-customer-form\n      [formId]=\"formId()\"\n      #form\n      mode=\"create\"\n      (submitted)=\"onCustomerCreated($event)\"\n      (cancelled)=\"onCancel()\"\n      [showButtons]=\"false\"\n    ></acp-company-customer-form>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <div class=\"hstack gap-2\">\n    <acp-button\n      type=\"submit\"\n      icon=\"save\"\n      [form]=\"formId()\"\n      [text]=\"form.isLoading() ? 'Guardando...' : 'Guardar'\"\n      [variant]=\"'success'\"\n      [matStyle]=\"'filled'\"\n      [disabled]=\"form.form.invalid || form.isLoading()\"\n    />\n    <acp-button\n      type=\"button\"\n      variant=\"dark\"\n      text=\"Cerrar\"\n      matStyle=\"filled\"\n      (handleClick)=\"onCancel()\"\n    />\n  </div>\n</mat-dialog-actions>\n" }]
+        }] });
+
+class CompanyCustomerAddEditDirective {
+    dgSvc = inject(AdvancedDialogService);
+    companyCustomerSaved = output();
+    id = input(0, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    async onClick(event) {
+        event.stopPropagation();
+        const isEdit = this.id() > 0;
+        const ref = await this.dgSvc.openInWrapper({
+            component: CompanyCustomerAddEditDialog,
+            title: isEdit ? 'Editar Cliente' : 'Nuevo Cliente',
+            icon: isEdit ? 'edit' : 'add',
+            showCloseButton: true,
+            data: {
+                id: this.id(),
+            },
+        }, {
+            size: 'xxl',
+        });
+        ref.afterClosed().subscribe(result => {
+            if (result && typeof result === 'object') {
+                this.companyCustomerSaved.emit(result);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerAddEditDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: CompanyCustomerAddEditDirective, isStandalone: true, selector: "[acpCompanyCustomerAddEdit]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { companyCustomerSaved: "companyCustomerSaved" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerAddEditDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[acpCompanyCustomerAddEdit]',
+                }]
+        }], propDecorators: { companyCustomerSaved: [{ type: i0.Output, args: ["companyCustomerSaved"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
-// export * from './lib/application';
-// export * from './lib/domain';
-// export * from './lib/infrastructure';
-// export * from './lib/ui';
+class CompanyCustomerList {
+    http = inject(COMPANY_CUSTOMER_HTTP_TOKEN);
+    canEdit = input(true, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canAdd = input(true, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
+    canInactive = input(true, ...(ngDevMode ? [{ debugName: "canInactive" }] : []));
+    canGenerateReport = input(true, ...(ngDevMode ? [{ debugName: "canGenerateReport" }] : []));
+    dataSearch = {
+        textSearch: null,
+    };
+    dataSource = signal([], ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+    columnsDefs = [
+        { field: 'index', header: '#' },
+        { field: 'op', header: 'Op.' },
+        { field: 'identificationType', header: 'Tipo' },
+        { field: 'idCard', header: 'Nro. Identificación' },
+        { field: 'tradeName', header: 'Razón Social' },
+        { field: 'legalName', header: 'Nombre Comercial' },
+        { field: 'address', header: 'Dirección' },
+        { field: 'email', header: 'Correo' },
+        { field: 'phone', header: 'Teléfono' },
+        {
+            field: 'sriValidation',
+            header: 'Validación Sri',
+            type: 'tag',
+            tag: {
+                true: { text: 'Si', color: 'text-danger' },
+                false: { text: 'No', color: 'text-success' },
+            },
+        },
+        {
+            field: 'status',
+            header: 'Estado',
+            type: 'tag',
+            tag: {
+                true: { text: 'Activo', color: 'text-primary' },
+                false: { text: 'Inactivo', color: 'text-success' },
+            },
+        },
+    ];
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    pageCount = signal(0, ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
+    refresh() {
+        this.list();
+    }
+    list() {
+        const params = {
+            pageIndex: this.pageIndex() + 1,
+            pageSize: this.pageSize(),
+            checkTextSearch: !!isValidField(this.dataSearch.textSearch),
+            textSearch: isValidField(this.dataSearch.textSearch),
+        };
+        this.http.list(params).subscribe(response => {
+            console.log(response);
+            this.dataSource.set(response.data);
+            this.pageCount.set(response.pagination.totalRecords);
+        });
+    }
+    ngOnInit() {
+        this.refresh();
+    }
+    handlePageEvent($event) {
+        this.pageIndex.set($event.pageIndex);
+        this.pageSize.set($event.pageSize);
+        this.pageCount.set($event.length);
+        this.refresh();
+    }
+    exportExcel() {
+        /* empty */
+    }
+    exportPdf() {
+        /* empty */
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    askToDelete(data) {
+        /* empty */
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CompanyCustomerList, isStandalone: true, selector: "acp-company-customer-list", inputs: { canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canAdd: { classPropertyName: "canAdd", publicName: "canAdd", isSignal: true, isRequired: false, transformFunction: null }, canInactive: { classPropertyName: "canInactive", publicName: "canInactive", isSignal: true, isRequired: false, transformFunction: null }, canGenerateReport: { classPropertyName: "canGenerateReport", publicName: "canGenerateReport", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<acp-data-grid\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"headerToolbar\"\n  [data]=\"dataSource()\"\n  [columns]=\"columnsDefs\"\n  [cellTemplate]=\"{\n    op: templateOp,\n  }\"\n  [length]=\"pageCount()\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSize]=\"pageSize()\"\n  (page)=\"handlePageEvent($event)\"\n/>\n<ng-template #headerToolbar>\n  <div class=\"d-flex flex-row gap-2 align-items-center\">\n    <mat-form-field>\n      <mat-label>Buscar</mat-label>\n      <input matInput [(ngModel)]=\"dataSearch.textSearch\" />\n      <ng-container matSuffix>\n        <acp-button variant=\"secondary\" icon=\"refresh\" matStyle=\"icon\" (handleClick)=\"refresh()\" />\n      </ng-container>\n    </mat-form-field>\n\n    <div class=\"ms-auto d-flex flex-row gap-2\">\n      @if (canGenerateReport()) {\n      <acp-button\n        variant=\"info\"\n        icon=\"download\"\n        matStyle=\"filled\"\n        text=\"Exportar Reporte\"\n        [matMenuTriggerFor]=\"exportMenu\"\n      />\n      }\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"exportExcel()\">\n          <mat-icon>table_view</mat-icon>\n          <span>Exportar a Excel</span>\n        </button>\n        <button mat-menu-item (click)=\"exportPdf()\">\n          <mat-icon>picture_as_pdf</mat-icon>\n          <span>Exportar a PDF</span>\n        </button>\n      </mat-menu>\n\n      @if (canAdd()) {\n      <acp-button\n        acpCompanyCustomerAddEdit\n        (companyCustomerSaved)=\"refresh()\"\n        variant=\"success\"\n        icon=\"add\"\n        matStyle=\"filled\"\n        text=\"Nuevo\"\n      />\n      }\n\n      <acp-button variant=\"secondary\" icon=\"refresh\" matStyle=\"icon\" (handleClick)=\"refresh()\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateOp let-data>\n  @if (canEdit()){\n  <acp-button\n    acpCompanyCustomerAddEdit\n    (companyCustomerSaved)=\"refresh()\"\n    [id]=\"data.idCliente\"\n    variant=\"success\"\n    icon=\"edit\"\n    matStyle=\"icon\"\n  />\n  } @if (!data.esConsumidorFinal) {\n  <acp-button (handleClick)=\"askToDelete(data)\" variant=\"danger\" icon=\"delete\" matStyle=\"icon\" />\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: DataGrid, selector: "acp-data-grid", inputs: ["showToolbar", "showColumnMenuButton", "toolbarTitle", "toolbarTemplate", "data", "columns", "length", "loading", "emptyValuePlaceholder", "trackBy", "cellTemplate", "headerTemplate", "headerExtraTemplate", "noResultTemplate", "paginationTemplate", "summaryTemplate", "size", "headerCellTemplate", "expandable", "expansionTemplate", "closeOthersOnExpand", "pageOnFront", "showPaginator", "pageDisabled", "showFirstLastButtons", "pageIndex", "pageSize", "pageSizeOptions", "hidePageSize", "infiniteScroll", "infiniteScrollThreshold", "infiniteScrollDisabled", "keyboardNavigation", "highlightedRowIndex", "sortOnFront", "sortActive", "sortDirection", "sortDisableClear", "sortDisabled", "sortStart", "rowHover", "rowStriped", "rowSelectable", "multiSelectable", "multiSelectionWithClick", "hideRowSelectionCheckbox", "disableRowClickSelection", "rowClassFormatter", "rowSelected", "rowSelectionFormatter", "cellSelectable", "useContentRowTemplate", "useContentHeaderRowTemplate", "useContentFooterRowTemplate", "showSummary", "noResultText"], outputs: ["page", "sortChange", "rowClick", "rowSelectedChange", "selectionChange", "cellClick", "cellSelectedChange", "expansionChange", "rowContextMenu", "infiniteScrollLoad", "focusedRowChange"], exportAs: ["dataGrid"] }, { 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.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: "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: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: CompanyCustomerAddEditDirective, selector: "[acpCompanyCustomerAddEdit]", inputs: ["id"], outputs: ["companyCustomerSaved"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CompanyCustomerList, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-company-customer-list', imports: [
+                        DataGrid,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        Button,
+                        FormsModule,
+                        MatIcon,
+                        MatMenuModule,
+                        CompanyCustomerAddEditDirective,
+                    ], template: "<acp-data-grid\n  [showToolbar]=\"true\"\n  [toolbarTemplate]=\"headerToolbar\"\n  [data]=\"dataSource()\"\n  [columns]=\"columnsDefs\"\n  [cellTemplate]=\"{\n    op: templateOp,\n  }\"\n  [length]=\"pageCount()\"\n  [pageIndex]=\"pageIndex()\"\n  [pageSize]=\"pageSize()\"\n  (page)=\"handlePageEvent($event)\"\n/>\n<ng-template #headerToolbar>\n  <div class=\"d-flex flex-row gap-2 align-items-center\">\n    <mat-form-field>\n      <mat-label>Buscar</mat-label>\n      <input matInput [(ngModel)]=\"dataSearch.textSearch\" />\n      <ng-container matSuffix>\n        <acp-button variant=\"secondary\" icon=\"refresh\" matStyle=\"icon\" (handleClick)=\"refresh()\" />\n      </ng-container>\n    </mat-form-field>\n\n    <div class=\"ms-auto d-flex flex-row gap-2\">\n      @if (canGenerateReport()) {\n      <acp-button\n        variant=\"info\"\n        icon=\"download\"\n        matStyle=\"filled\"\n        text=\"Exportar Reporte\"\n        [matMenuTriggerFor]=\"exportMenu\"\n      />\n      }\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"exportExcel()\">\n          <mat-icon>table_view</mat-icon>\n          <span>Exportar a Excel</span>\n        </button>\n        <button mat-menu-item (click)=\"exportPdf()\">\n          <mat-icon>picture_as_pdf</mat-icon>\n          <span>Exportar a PDF</span>\n        </button>\n      </mat-menu>\n\n      @if (canAdd()) {\n      <acp-button\n        acpCompanyCustomerAddEdit\n        (companyCustomerSaved)=\"refresh()\"\n        variant=\"success\"\n        icon=\"add\"\n        matStyle=\"filled\"\n        text=\"Nuevo\"\n      />\n      }\n\n      <acp-button variant=\"secondary\" icon=\"refresh\" matStyle=\"icon\" (handleClick)=\"refresh()\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #templateOp let-data>\n  @if (canEdit()){\n  <acp-button\n    acpCompanyCustomerAddEdit\n    (companyCustomerSaved)=\"refresh()\"\n    [id]=\"data.idCliente\"\n    variant=\"success\"\n    icon=\"edit\"\n    matStyle=\"icon\"\n  />\n  } @if (!data.esConsumidorFinal) {\n  <acp-button (handleClick)=\"askToDelete(data)\" variant=\"danger\" icon=\"delete\" matStyle=\"icon\" />\n  }\n</ng-template>\n" }]
+        }], propDecorators: { canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdd", required: false }] }], canInactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "canInactive", required: false }] }], canGenerateReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGenerateReport", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { COMPANY_CUSTOMER_FORM_CONFIG, COMPANY_CUSTOMER_HTTP_TOKEN, COMPANY_CUSTOMER_MAPPER, CUSTOMER_SRI_HTTP_TOKEN, CompanyCustomerAddEditDialog, CompanyCustomerAddEditDirective, CompanyCustomerDefaultMapper, CompanyCustomerForm, CompanyCustomerFormDataResult, CompanyCustomerHttp, CompanyCustomerList, CustomerValidators, MAIN_APP_COMPANY_CUSTOMER_CONFIG, POS_COMPANY_CUSTOMER_CONFIG };
 //# sourceMappingURL=acontplus-ng-customer.mjs.map