@acontplus/ng-customer 1.0.2 → 1.0.4

package/fesm2022/acontplus-ng-customer.mjs

@@ -0,0 +1,891 @@
+import { IdentificationNumberVo, SEPARADORES_REGEX, HttpClientFactory, isSuccessResponse, SRI_DOCUMENT_TYPE, SEPARATOR_KEY_CODE } from '@acontplus/core';
+import { DateFormatter, getValidId, isValidField, parseJSONSafe } from '@acontplus/utils';
+import * as i0 from '@angular/core';
+import { inject, signal, ChangeDetectionStrategy, Component, input, output, computed } from '@angular/core';
+import { from, forkJoin } from 'rxjs';
+import { NotificationService } from '@acontplus/ng-notifications';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { MatInputChipComponent, ToUpperCaseDirective, MatThemeButtonComponent, MatDynamicCardComponent } from '@acontplus/ng-components';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import * as i8 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import * as i1$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i2$1 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+
+class CustomerUseCase {
+    repo;
+    constructor(repo) {
+        this.repo = repo;
+    }
+    getAll(params) {
+        return this.repo.getAll(params);
+    }
+    getFormData() {
+        return this.repo.getFormData();
+    }
+    getById(id) {
+        return this.repo.getById(id);
+    }
+    checkExistence(identificationNumber) {
+        return this.repo.checkExistence(identificationNumber);
+    }
+    create(params) {
+        return this.repo.create(params);
+    }
+    update(params) {
+        return this.repo.update(params);
+    }
+    updateState(id) {
+        return this.repo.updateState(id);
+    }
+    search(filter) {
+        return this.repo.search(filter);
+    }
+}
+
+class CustomerExternalUseCase {
+    repo;
+    constructor(repo) {
+        this.repo = repo;
+    }
+    getById(identification) {
+        const idNumber = new IdentificationNumberVo(identification);
+        return this.repo.getById(idNumber);
+    }
+}
+
+const CUSTOMER_API = {
+    BILLING: '/api',
+};
+
+class CompanySearchMapper {
+    static toJson(params) {
+        return JSON.stringify({
+            textSearch: params.search,
+        });
+    }
+    static fromJson(response) {
+        let customers = [];
+        if (response && response.code === '1') {
+            const results = JSON.parse(response.payload) || [];
+            customers = results.map((item) => ({
+                id: item.idCliente,
+                identificationTypeId: item.idTipoIdentificacion,
+                creditTimeId: item.idTiempoCredito,
+                customerId: item.customerId,
+                status: item.estado,
+                email: item.correo,
+                phone: item.telefono,
+                address: item.direccion,
+                licensePlate: item.placa,
+                creditDays: item.diasCredito,
+                sriValidation: item.validationSri,
+                businessName: item.nombreFiscal,
+                tradeName: item.nombreComercial,
+                identificationNumber: item.numeroIdentificacion,
+                identificationType: item.tipoIdentificacion,
+                sriCode: item.codigoSri,
+                companyRuc: item.rucEmpresa,
+                companyId: item.companyId,
+                name: item.nombreFiscal,
+            }));
+        }
+        return customers;
+    }
+}
+
+class CustomerCreateUpdateMapper {
+    static toJson(param) {
+        return {
+            idCliente: getValidId(param.idCliente),
+            idEmpleado: getValidId(param.idEmpleado),
+            idTipoIdentificacion: param.idTipoIdentificacion,
+            idTipoClienteProveedor: getValidId(param.idTipoClienteProveedor),
+            idTipoEntidad: getValidId(param.idTipoEntidad),
+            idCiudad: getValidId(param.idCiudad),
+            idSubContribuyente: getValidId(param.idSubContribuyente),
+            idTiempoCredito: getValidId(param.idTiempoCredito),
+            idEmpresa: getValidId(param.idEmpresa),
+            idCargo: getValidId(param.idCargo),
+            numeroIdentificacion: param.numeroIdentificacion,
+            nombreFiscal: param.nombreFiscal,
+            nombreComercial: param.nombreComercial,
+            direccion: isValidField(param.direccion),
+            telefono: isValidField(param.telefono),
+            correo: isValidField(param.correo),
+            placa: isValidField(param.placa),
+            montoCredito: isValidField(param.montoCredito),
+            nota: isValidField(param.nota),
+            validationSri: param.validationSri,
+            idFormaPagoSri: getValidId(param.idFormaPagoSri),
+            estado: param.estado ?? true,
+            infoCrediticia: param.dataInfoCred && JSON.stringify(param.dataInfoCred),
+            configValorBruto: param.configValorBruto ?? null,
+            birthDate: DateFormatter.isValid(param.birthDate)
+                ? DateFormatter.toUTCString(param.birthDate)
+                : null,
+        };
+    }
+    static fromJson(response) {
+        if (!response)
+            return response;
+        const result = {
+            id: 0,
+        };
+        if (response.code === '1' && typeof response.payload === 'string') {
+            try {
+                const parsed = JSON.parse(response.payload);
+                if (Array.isArray(parsed) && parsed.length > 0) {
+                    const { idCliente } = parsed[0];
+                    result.id = idCliente;
+                }
+            }
+            catch (error) {
+                console.error('Error parsing payload JSON:', error);
+            }
+        }
+        return result;
+    }
+}
+
+class CustomerFormDataMapper {
+    static toJson() {
+        return JSON.stringify({
+            tipo: 2,
+        });
+    }
+    static fromJson(response) {
+        const result = {};
+        if (response.code === '1') {
+            const mainData = JSON.parse(response.payload);
+            result.tipoIdentificacion = mainData[0];
+            result.tipoContribuyentes = mainData[1];
+            result.tiempoCreditos = mainData[2] || [];
+            const ciudades = mainData[3];
+            result.ciudades = ciudades.reduce((acc, ciudade) => {
+                const dataExists = acc.find((c) => c.idProvincia === ciudade.idProvincia);
+                if (!dataExists) {
+                    acc.push({
+                        idProvincia: ciudade.idProvincia,
+                        nombre: ciudade.provincia,
+                        ciudades: [
+                            {
+                                idCiudad: ciudade.idCiudad,
+                                nombre: ciudade.ciudad,
+                            },
+                        ],
+                    });
+                }
+                else {
+                    dataExists.ciudades.push({
+                        idCiudad: ciudade.idCiudad,
+                        nombre: ciudade.ciudad,
+                    });
+                }
+                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;
+    }
+}
+
+class CustomerGetByIdMapper {
+    static fromJson(response) {
+        if (response.code !== '1' || !response.payload) {
+            return {};
+        }
+        const data = JSON.parse(response.payload)[0];
+        return {
+            idCliente: data.idCliente,
+            idTipoClienteProveedor: data.idTipoClienteProveedor,
+            idTipoEntidad: data.idTipoEntidad,
+            idSubContribuyente: data.idSubContribuyente,
+            idTiempoCredito: data.idTiempoCredito,
+            idTipoIdentificacion: data.idTipoIdentificacion,
+            idCiudad: data.idCiudad,
+            numeroIdentificacion: data.numeroIdentificacion,
+            identificacionComprador: data.numeroIdentificacion,
+            razonSocialComprador: data.nombreFiscal,
+            nombreFiscal: data.nombreFiscal,
+            montoCredito: data.montoCredito,
+            nombreComercial: data.nombreComercial,
+            direccion: data.direccion,
+            telefono: data.telefono,
+            correo: data.correo,
+            estado: data.estado,
+            idEmpleado: data.idEmpleado,
+            diasCredito: data.diasCredito,
+            empleado: data.empleado,
+            idEmpresa: data.idEmpresa,
+            idCargo: data.idCargo,
+            placa: data.placa,
+            validationSri: data.validationSri,
+            codigoSri: data.codigoSri,
+            correos: data.correo ? data.correo.split(SEPARADORES_REGEX) : [],
+            telefonos: data.telefono ? data.telefono.split(SEPARADORES_REGEX) : [],
+            placas: data.placa ? data.placa.split(SEPARADORES_REGEX) : [],
+            idFormaPagoSri: data.idFormaPagoSri,
+            dataInfoCred: parseJSONSafe(data.infoCrediticia, {}),
+            nota: data.nota?.trim() ?? '',
+            configValorBruto: data.configValorBruto ?? false,
+        };
+    }
+}
+
+class ListCustomerMapper {
+    static toJson(params) {
+        return JSON.stringify({
+            ...params,
+            type: 1,
+            tipo: 1, // remove after
+            pageIndex: params.pageIndex,
+            pageSize: params.pageSize,
+        });
+    }
+    static fromJson(response) {
+        // Initialize with backend-aligned shape (PageIndex is commonly 1-based server-side)
+        const result = {
+            items: [],
+            pageIndex: 1,
+            pageSize: 0,
+            totalCount: 0,
+            totalPages: 0,
+            hasPreviousPage: false,
+            hasNextPage: false,
+            metadata: {},
+        };
+        // Parse payload (backend sends JSON string in payload)
+        const parsed = typeof response?.payload === 'string' ? JSON.parse(response.payload) : response?.payload;
+        const dataArray = Array.isArray(parsed) ? parsed[0] ?? [] : Array.isArray(parsed?.items) ? parsed.items : [];
+        // Map each item to UI-friendly fields, preserving source values
+        result.items = dataArray.map((item, index) => ({
+            index: index + 1,
+            id: item.idCliente,
+            identificationTypeId: item.idTipoIdentificacion,
+            identification: item.numeroIdentificacion,
+            businessName: item.nombreFiscal,
+            tradeName: item.nombreComercial,
+            address: item.direccion,
+            phone: item.telefono,
+            email: item.correo,
+            finalConsumer: item.consumidorFinal,
+            sriValidation: item.validacionSri ?? item.validationSri,
+            sriValidationName: (item.validationSri ?? item.validacionSri) ? 'SI' : 'NO',
+            identificationType: item.tipoIdentificacion,
+            status: item.estado,
+            statusName: item.estado ? 'Activo' : 'Inactivo',
+            isFinalConsumer: item.codTipoIdentificacion === 'CF',
+            totalRecords: item.totalRecords ?? item.TotalCount,
+        }));
+        // Flexible pagination extraction (prefer explicit backend values)
+        const pageIndex = response?.PageIndex ?? response?.pageIndex ?? 1;
+        const pageSize = response?.PageSize ?? response?.pageSize ?? result.items.length;
+        const totalCountFromItem = result.items.length > 0 ? result.items[0].totalRecords : undefined;
+        const totalCount = response?.TotalCount ?? response?.totalCount ?? totalCountFromItem ?? result.items.length;
+        const metadata = response?.Metadata ?? response?.metadata ?? {};
+        result.pageIndex = Number.isFinite(pageIndex) ? pageIndex : 1;
+        result.pageSize = Number.isFinite(pageSize) ? pageSize : result.items.length;
+        result.totalCount = Number.isFinite(totalCount) ? totalCount : result.items.length;
+        result.totalPages = result.pageSize > 0 ? Math.ceil(result.totalCount / result.pageSize) : 0;
+        // Backend semantics show HasPreviousPage as PageIndex > 1
+        result.hasPreviousPage = result.pageIndex > 1;
+        result.hasNextPage = result.pageIndex < result.totalPages;
+        result.metadata = metadata;
+        return result;
+    }
+}
+
+class CustomerExternalHttpRepository {
+    get http() {
+        return HttpClientFactory.getClient(); // siempre toma el último cliente configurado
+    }
+    get url() {
+        return `${CUSTOMER_API.BILLING}/Consultas/`;
+    }
+    getById(identification) {
+        const id = identification.getId();
+        let endpoint = '';
+        if (identification.isValidRuc()) {
+            endpoint = `GetRucSRI?Ruc=${id}`;
+        }
+        else if (identification.isValidCedula()) {
+            endpoint = `GetCedulaSri?Ruc=${id}`;
+        }
+        else {
+            throw new Error('Número de identificación inválido para SRI');
+        }
+        return this.http.get(`${this.url}${endpoint}`).then(response => {
+            const idCard = response.numeroRuc ? response.numeroRuc : response.identificacion;
+            const businessName = response.razonSocial ? response.razonSocial : response.nombreCompleto;
+            const data = {
+                phone: response.telefono,
+                email: response.email,
+                idCard,
+                businessName,
+                address: response.direccion,
+            };
+            return {
+                status: response.error ? 'warning' : 'success',
+                code: response.error ? 'EXTERNAL_API_ERROR' : 'SUCCESS',
+                data,
+                message: response.error ?? 'External API call completed',
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+}
+
+class CustomerHttpRepository {
+    get http() {
+        return HttpClientFactory.getClient(); // siempre toma el último cliente configurado
+    }
+    get url() {
+        return `${CUSTOMER_API.BILLING}/CompanyCustomer/`;
+    }
+    checkExistence(identificationNumber) {
+        const searchPayload = JSON.stringify({
+            textSearch: identificationNumber,
+            tipo: 3,
+        });
+        return this.http.get(`${this.url}?json=${searchPayload}`).then(response => {
+            const result = {
+                status: 'warning',
+                code: response.code ?? 'UNKNOWN_ERROR',
+                data: null,
+                message: response.message ?? 'Unknown error occurred',
+                timestamp: new Date().toISOString(),
+            };
+            if (response.code === '1' && response.payload) {
+                const parsedData = JSON.parse(response.payload);
+                if (Array.isArray(parsedData) && parsedData.length > 0 && Array.isArray(parsedData[0])) {
+                    const [customer] = parsedData[0];
+                    if (customer) {
+                        result.status = 'success';
+                        result.data = customer;
+                    }
+                }
+            }
+            return result;
+        });
+    }
+    getFormData() {
+        const json = CustomerFormDataMapper.toJson();
+        return this.http.get(`${this.url}?json=${json}`).then((response) => {
+            const data = CustomerFormDataMapper.fromJson(response);
+            return {
+                status: 'success',
+                code: response.code ?? 'SUCCESS',
+                data,
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+    getAll(obj) {
+        const json = ListCustomerMapper.toJson(obj);
+        return this.http
+            .get(`${this.url}?json=${json}`)
+            .then((response) => {
+            const data = ListCustomerMapper.fromJson(response);
+            return {
+                status: 'success',
+                code: response.code ?? 'SUCCESS',
+                data,
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+    create(dto) {
+        return this.http
+            .post(this.url, { data: CustomerCreateUpdateMapper.toJson(dto.data) })
+            .then(response => {
+            console.log(response);
+            const data = CustomerCreateUpdateMapper.fromJson(response);
+            return {
+                status: response.code === '1' ? 'success' : 'warning',
+                code: response.code ?? 'OPERATION_FAILED',
+                data,
+                message: response.message ?? 'Operation completed with issues',
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+    update(dto) {
+        return this.http
+            .put(`${this.url}${dto.id}`, {
+            data: CustomerCreateUpdateMapper.toJson(dto.data),
+        })
+            .then(response => {
+            console.log(response);
+            return {
+                status: response.code === '1' ? 'success' : 'warning',
+                code: response.code ?? 'OPERATION_FAILED',
+                message: response.message ?? 'Operation completed with issues',
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+    updateState(id) {
+        return this.http.delete(`${this.url}${id}`).then(response => {
+            return {
+                status: response.code === '1' ? 'success' : 'warning',
+                code: response.code,
+                message: response.message,
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+    getById(id) {
+        return this.http
+            .get(`${this.url}GetId/${id}`)
+            .then(response => {
+            const data = CustomerGetByIdMapper.fromJson(response);
+            return {
+                status: response.code === '1' ? 'success' : 'warning',
+                code: response.code ?? 'OPERATION_FAILED',
+                data,
+                message: response.message ?? 'Operation completed with issues',
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+    search(params) {
+        const json = CompanySearchMapper.toJson(params);
+        return this.http.get(`${this.url}Search?json=${json}`).then(response => {
+            const data = CompanySearchMapper.fromJson(response);
+            return {
+                status: response.code === '1' ? 'success' : 'warning',
+                code: response.code,
+                data,
+                message: response.message,
+                timestamp: new Date().toISOString(),
+            };
+        });
+    }
+}
+
+class CustomerAddEditComponent {
+    dialogRef = inject((MatDialogRef));
+    customerUseCase = inject(CustomerUseCase);
+    customerExternalUseCase = inject(CustomerExternalUseCase);
+    btnText = signal('Guardar', ...(ngDevMode ? [{ debugName: "btnText" }] : []));
+    paramsOptions = inject(MAT_DIALOG_DATA);
+    params = this.paramsOptions.data;
+    notificationService = inject(NotificationService);
+    title = 'Nuevo Cliente';
+    loading = false;
+    emails = [];
+    telephones = [];
+    tiemposCredito = signal([], ...(ngDevMode ? [{ debugName: "tiemposCredito" }] : []));
+    tipoContribuyentes = signal([], ...(ngDevMode ? [{ debugName: "tipoContribuyentes" }] : []));
+    tiposCliente = signal([], ...(ngDevMode ? [{ debugName: "tiposCliente" }] : []));
+    tiposIdentificacion = signal([], ...(ngDevMode ? [{ debugName: "tiposIdentificacion" }] : []));
+    formasPagoSri = signal([], ...(ngDevMode ? [{ debugName: "formasPagoSri" }] : []));
+    placas = signal([], ...(ngDevMode ? [{ debugName: "placas" }] : []));
+    ciudades = signal([], ...(ngDevMode ? [{ debugName: "ciudades" }] : []));
+    cargos = signal([], ...(ngDevMode ? [{ debugName: "cargos" }] : []));
+    empresas = signal([], ...(ngDevMode ? [{ debugName: "empresas" }] : []));
+    employees = signal([], ...(ngDevMode ? [{ debugName: "employees" }] : []));
+    maritalStatuses = signal([], ...(ngDevMode ? [{ debugName: "maritalStatuses" }] : []));
+    housingTypes = signal([], ...(ngDevMode ? [{ debugName: "housingTypes" }] : []));
+    showRefresh = signal(true, ...(ngDevMode ? [{ debugName: "showRefresh" }] : []));
+    endsWith001Validator(control) {
+        const value = control.value;
+        if (value && value.length >= 3) {
+            if (!value.endsWith('001')) {
+                return { endsWith001: true };
+            }
+        }
+        return null;
+    }
+    customerForm = new FormGroup({
+        direccion: new FormControl('', Validators.required),
+        idCargo: new FormControl(0),
+        idCliente: new FormControl(0),
+        idEmpresa: new FormControl(0),
+        idFormaPagoSri: new FormControl(0),
+        idTipoClienteProveedor: new FormControl(0),
+        idTipoEntidad: new FormControl(0),
+        idCiudad: new FormControl(0),
+        idEmpleado: new FormControl(0),
+        nombreFiscal: new FormControl('', Validators.required),
+        nombreComercial: new FormControl(''),
+        numeroIdentificacion: new FormControl({ value: '', disabled: false }, [
+            Validators.required,
+            Validators.minLength(13),
+            Validators.maxLength(13),
+            this.endsWith001Validator,
+        ]),
+        correo: new FormControl(''),
+        telefono: new FormControl(''),
+        placa: new FormControl(''),
+        nota: new FormControl(''),
+        estado: new FormControl(false),
+        birthDate: new FormControl(null),
+        validationSri: new FormControl(false),
+        configValorBruto: new FormControl(false),
+        dataInfoCred: new FormGroup({
+            maritalStatusId: new FormControl(null),
+            conyugeNombre: new FormControl(null),
+            conyugeTel: new FormControl(null),
+            refFamNombre: new FormControl(null),
+            refFamTel: new FormControl(null),
+            housingTypeId: new FormControl(null),
+            dirVivienda: new FormControl(null),
+            refDomicilio: new FormControl(null),
+            sector: new FormControl(null),
+            barrio: new FormControl(null),
+            calle: new FormControl(null),
+        }),
+    });
+    getCustomer(codigo, id) {
+        this.customerForm.patchValue({
+            validationSri: false,
+        });
+        from(this.customerUseCase.checkExistence(id)).subscribe(response => {
+            if (isSuccessResponse(response) && response.data) {
+                alert('El cliente ya se encuentra registrado en su empresa');
+                this.notificationService.toastr.show({
+                    type: 'warning',
+                    message: 'El cliente ya se encuentra registrado en su empresa',
+                });
+                this.customerForm.patchValue({ numeroIdentificacion: null });
+                return;
+            }
+            if (codigo === SRI_DOCUMENT_TYPE.PASSPORT) {
+                this.customerForm.patchValue({
+                    validationSri: true,
+                });
+                return;
+            }
+            from(this.customerExternalUseCase.getById(id)).subscribe(secondResponse => {
+                if (!isSuccessResponse(secondResponse) || !secondResponse.data) {
+                    this.notificationService.toastr.show({
+                        type: 'info',
+                        message: '  No se encontró información en el SRI',
+                    });
+                    return;
+                }
+                const { phone, email, idCard, // numeroRuc
+                businessName, // razonSocial
+                address, // direccion
+                 } = secondResponse.data;
+                if (phone && typeof phone === 'string') {
+                    this.telephones = phone.split(SEPARADORES_REGEX) || [];
+                }
+                if (email && typeof email === 'string') {
+                    this.emails = email.split(SEPARADORES_REGEX) || [];
+                }
+                if (idCard) {
+                    this.customerForm.patchValue({
+                        numeroIdentificacion: idCard,
+                        nombreFiscal: businessName,
+                        validationSri: true,
+                        direccion: address,
+                        nombreComercial: businessName,
+                    });
+                }
+            });
+        });
+    }
+    getLoadData() {
+        if (this.isUpdate()) {
+            return forkJoin([
+                from(this.customerUseCase.getFormData()),
+                from(this.customerUseCase.getById(this.params.id)),
+            ]);
+        }
+        return from(this.customerUseCase.getFormData());
+    }
+    ngOnInit() {
+        try {
+            this.getLoadData().subscribe(response => {
+                let mainDataForm = {};
+                let dataCompanyCustomer = {};
+                if (Array.isArray(response)) {
+                    mainDataForm = response[0].data;
+                    dataCompanyCustomer = response[1];
+                }
+                else {
+                    mainDataForm = response.data;
+                }
+                this.tiposIdentificacion.set(mainDataForm.tipoIdentificacion);
+                this.tiemposCredito.set(mainDataForm.tiempoCreditos);
+                this.tipoContribuyentes.set(mainDataForm.tipoContribuyentes);
+                this.formasPagoSri.set(mainDataForm.formasPagoSri);
+                this.tiposCliente.set(mainDataForm.tiposCliente);
+                this.ciudades.set(mainDataForm.ciudades);
+                this.cargos.set(mainDataForm.cargos);
+                this.empresas.set(mainDataForm.empresas);
+                this.employees.set(mainDataForm.employees);
+                this.maritalStatuses.set(mainDataForm.maritalStatuses);
+                this.housingTypes.set(mainDataForm.housingTypes);
+                if (this.isDataOfSri()) {
+                    const { codigoSri, numeroIdentificacion } = this.params;
+                    const dataIdentificacion = this.tiposIdentificacion().find((ti) => ti.codigoSri === codigoSri);
+                    if (dataIdentificacion) {
+                        const idTipoIdentificacionCtrl = this.customerForm.get('idTipoIdentificacion');
+                        idTipoIdentificacionCtrl?.setValue(dataIdentificacion.idTipoIdentificacion);
+                        const numeroIdentificacionCtrl = this.customerForm.get('numeroIdentificacion');
+                        numeroIdentificacionCtrl?.setValue(numeroIdentificacion);
+                        const idTiempoCreditoCtrl = this.customerForm.get('idTiempoCredito');
+                        idTiempoCreditoCtrl?.setValue(this.tiemposCredito().length > 0
+                            ? this.tiemposCredito()[0].idTiempoCredito
+                            : 0);
+                        this.updateFormControlNumeroIdentificacion(dataIdentificacion.codigoSri);
+                        this.onKeyDownGovernmentId();
+                    }
+                    return;
+                }
+                if (this.isCreate()) {
+                    const dataIdentificacion = this.tiposIdentificacion().find((ti) => ti.codigoSri === SRI_DOCUMENT_TYPE.RUC);
+                    if (dataIdentificacion) {
+                        const idTipoIdentificacionCtrl = this.customerForm.get('idTipoIdentificacion');
+                        idTipoIdentificacionCtrl?.setValue(dataIdentificacion.idTipoIdentificacion);
+                        this.setIdentificationTypeChange(dataIdentificacion.codigoSri);
+                    }
+                    const idTiempoCreditoCtrl = this.customerForm.get('idTiempoCredito');
+                    idTiempoCreditoCtrl?.setValue(this.tiemposCredito().length > 0
+                        ? this.tiemposCredito()[0].idTiempoCredito
+                        : 0);
+                }
+                else {
+                    this.title = 'Editar Cliente';
+                    this.btnText.set('Actualizar');
+                    this.emails = dataCompanyCustomer.correos;
+                    this.telephones = dataCompanyCustomer.telefonos;
+                    this.placas.set(dataCompanyCustomer.placas);
+                    const { dataInfoCred, ...rest } = dataCompanyCustomer;
+                    this.customerForm.patchValue(rest);
+                    if (dataInfoCred) {
+                        this.customerForm.get('dataInfoCred')?.patchValue(dataInfoCred);
+                    }
+                    this.updateFormControlNumeroIdentificacion(rest.codigoSri);
+                }
+            });
+        }
+        catch (error) {
+            // Handle error appropriately
+        }
+    }
+    identificationTypeChange(event) {
+        const dt = this.tiposIdentificacion().find(item => item.idTipoIdentificacion === Number(event.value));
+        this.setIdentificationTypeChange(dt.codigoSri);
+    }
+    updateFormControlNumeroIdentificacion(codigoSri) {
+        const idNumberControl = this.customerForm.get('numeroIdentificacion');
+        this.showRefresh.set(false);
+        if ([SRI_DOCUMENT_TYPE.RUC, SRI_DOCUMENT_TYPE.CEDULA].includes(codigoSri)) {
+            let lengthValidator;
+            this.showRefresh.set(true);
+            if (codigoSri === SRI_DOCUMENT_TYPE.CEDULA) {
+                lengthValidator = [Validators.minLength(10), Validators.maxLength(10)];
+            }
+            else if (codigoSri === SRI_DOCUMENT_TYPE.RUC) {
+                lengthValidator = [
+                    Validators.minLength(13),
+                    Validators.maxLength(13),
+                    this.endsWith001Validator,
+                ];
+            }
+            if (lengthValidator) {
+                idNumberControl?.setValidators([
+                    Validators.required,
+                    Validators.pattern(/^\d+$/), // Solo números
+                    ...lengthValidator,
+                ]);
+            }
+        }
+        else {
+            idNumberControl?.setValidators([Validators.required]);
+        }
+        idNumberControl?.updateValueAndValidity();
+    }
+    setIdentificationTypeChange(codigoSri) {
+        const idNumberControl = this.customerForm.get('numeroIdentificacion');
+        idNumberControl?.reset();
+        idNumberControl?.clearValidators();
+        this.updateFormControlNumeroIdentificacion(codigoSri);
+    }
+    get numeroIdentificacionControl() {
+        return this.customerForm.get('numeroIdentificacion');
+    }
+    get birthDateCtrl() {
+        return this.customerForm.get('birthDate');
+    }
+    onKeyDownGovernmentId($event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+        if (this.numeroIdentificacionControl?.invalid)
+            return;
+        const idTipoIdentificacion = this.customerForm.get('idTipoIdentificacion')?.value;
+        const numeroIdentificacion = this.customerForm.get('numeroIdentificacion')?.value;
+        const codigoSri = this.tiposIdentificacion().find((x) => x.idTipoIdentificacion == idTipoIdentificacion).codigoSri;
+        if (numeroIdentificacion) {
+            this.getCustomer(codigoSri, numeroIdentificacion);
+        }
+    }
+    isDataOfSri = () => this.params.dataOfSri;
+    isCreate = () => !(this.params.id > 0);
+    isUpdate = () => this.params.id > 0;
+    onSave() {
+        this.customerForm.patchValue({
+            telefono: this.telephones.length > 0 ? this.telephones.join(SEPARATOR_KEY_CODE.SLASH) : null,
+        });
+        this.customerForm.patchValue({
+            correo: this.emails.length > 0 ? this.emails.join(SEPARATOR_KEY_CODE.SLASH) : null,
+        });
+        this.customerForm.patchValue({
+            placa: this.placas().length > 0 ? this.placas().join(SEPARATOR_KEY_CODE.SLASH) : null,
+        });
+        const dataForm = {
+            ...this.customerForm.value,
+        };
+        if (this.customerForm.invalid) {
+            this.notificationService.toastr.show({
+                type: 'warning',
+                message: 'Ingrese todos datos requeridos',
+            });
+            return;
+        }
+        if (this.isUpdate()) {
+            const sendParams = {
+                id: this.params.id,
+                data: dataForm,
+            };
+            from(this.customerUseCase.update(sendParams)).subscribe(response => {
+                this.notificationService.toastr.show({
+                    type: isSuccessResponse(response) ? 'success' : 'warning',
+                    message: `${response.message}`,
+                });
+                if (isSuccessResponse(response)) {
+                    this.dialogRef.close({
+                        id: this.params.id,
+                    });
+                }
+            });
+        }
+        if (this.isCreate()) {
+            from(this.customerUseCase.create(dataForm)).subscribe(response => {
+                this.notificationService.toastr.show({
+                    type: isSuccessResponse(response) ? 'success' : 'warning',
+                    message: `${response.message}`,
+                });
+                if (isSuccessResponse(response)) {
+                    this.dialogRef.close(response.data);
+                }
+            });
+        }
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CustomerAddEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CustomerAddEditComponent, isStandalone: true, selector: "acp-customer-add-edit", providers: [
+            provideNativeDateAdapter(),
+            {
+                provide: CustomerUseCase,
+                useFactory: () => new CustomerUseCase(new CustomerHttpRepository()),
+            },
+            {
+                provide: CustomerExternalUseCase,
+                useFactory: () => new CustomerExternalUseCase(new CustomerExternalHttpRepository()),
+            },
+        ], ngImport: i0, template: "<mat-dialog-content>\n  <form\n    (ngSubmit)=\"onSave()\"\n    id=\"formCompanyCustomer\"\n    [formGroup]=\"customerForm\"\n    autocomplete=\"off\"\n  >\n    <mat-tab-group>\n      <mat-tab label=\"DATOS PRINCIPALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Tipo Identificaci\u00F3n: </mat-label>\n                <mat-select\n                  formControlName=\"idTipoIdentificacion\"\n                  (selectionChange)=\"identificationTypeChange($event)\"\n                >\n                  @for (item of tiposIdentificacion(); track $index) {\n                    <mat-option [value]=\"item.idTipoIdentificacion\">{{\n                      item.descripcion\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>N\u00FAmero de Identificaci\u00F3n</mat-label>\n                <input\n                  type=\"text\"\n                  matInput\n                  (keydown.enter)=\"onKeyDownGovernmentId($event)\"\n                  formControlName=\"numeroIdentificacion\"\n                />\n                @if (\n                  numeroIdentificacionControl?.invalid &&\n                  (numeroIdentificacionControl?.dirty || numeroIdentificacionControl?.touched)\n                ) {\n                  @if (numeroIdentificacionControl?.hasError('required')) {\n                    <mat-error> El n\u00FAmero de identificaci\u00F3n es obligatorio. </mat-error>\n                  }\n\n                  @if (numeroIdentificacionControl?.hasError('minlength')) {\n                    <mat-error>\n                      Debe tener al menos\n                      {{ numeroIdentificacionControl?.errors?.['minlength'].requiredLength }}\n                      d\u00EDgitos.\n                    </mat-error>\n                  }\n                  @if (numeroIdentificacionControl?.hasError('maxlength')) {\n                    <mat-error>\n                      No puede tener m\u00E1s de\n                      {{ numeroIdentificacionControl?.errors?.['maxlength'].requiredLength }}\n                      d\u00EDgitos.\n                    </mat-error>\n                  }\n                  @if (numeroIdentificacionControl?.hasError('pattern')) {\n                    <mat-error> Solo se permiten caracteres num\u00E9ricos. </mat-error>\n                  }\n                  @if (numeroIdentificacionControl?.hasError('endsWith001')) {\n                    <mat-error> Los \u00FAltimos tres d\u00EDgitos deben ser 001. </mat-error>\n                  }\n                }\n\n                @if (showRefresh()) {\n                  <ng-container matSuffix>\n                    <button type=\"button\" mat-icon-button (click)=\"onKeyDownGovernmentId($event)\">\n                      <mat-icon>refresh</mat-icon>\n                    </button>\n                  </ng-container>\n                }\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Fiscal:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreFiscal\"\n                  id=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                />\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Comercial:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                  type=\"text\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>Direcci\u00F3n:</mat-label>\n              <input\n                matInput\n                formControlName=\"direccion\"\n                placeholder=\"AV. 09 DE OCTUBRE...\"\n                acpToUpperCase\n              />\n            </mat-form-field>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-input-chip [chips]=\"emails\" [labelText]=\"'Correo'\" />\n            </div>\n            <div class=\"col\">\n              <acp-mat-input-chip [chips]=\"telephones\" [labelText]=\"'Tel\u00E9fono'\" />\n            </div>\n          </div>\n\n          @if (isUpdate()) {\n            <div class=\"vstack gap-2 mt-2\">\n              <span>Estado</span>\n              <mat-slide-toggle formControlName=\"estado\">\n                {{ customerForm.value.estado ? 'Activo' : 'Inactivo' }}\n              </mat-slide-toggle>\n            </div>\n          }\n        </div>\n      </mat-tab>\n      <mat-tab label=\"DATOS ADICIONALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n B\u00E1sica\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Contribuyente: </mat-label>\n                      <mat-select formControlName=\"idSubContribuyente\">\n                        @for (item of tipoContribuyentes(); track $index) {\n                          <mat-option [value]=\"item.idSubContribuyente\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n                      <mat-select formControlName=\"idTiempoCredito\">\n                        @for (item of tiemposCredito(); track $index) {\n                          <mat-option [value]=\"item.idTiempoCredito\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Ciudad</mat-label>\n                      <mat-select formControlName=\"idCiudad\">\n                        <mat-option [value]=\"0\">-- Ninguno --</mat-option>\n                        @for (group of ciudades(); track $index) {\n                          <mat-optgroup [label]=\"group.nombre\">\n                            @for (item of group.ciudades; track $index) {\n                              <mat-option [value]=\"item.idCiudad\">{{ item.nombre }}</mat-option>\n                            }\n                          </mat-optgroup>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Cliente: </mat-label>\n                      <mat-select formControlName=\"idTipoClienteProveedor\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                        @for (item of tiposCliente(); track $index) {\n                          <mat-option [value]=\"item.idTipoClienteProveedor\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empresa: </mat-label>\n                      <mat-select formControlName=\"idEmpresa\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of empresas(); track $index) {\n                          <mat-option [value]=\"item.idEmpresa\">\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>Fecha Nacimiento</mat-label>\n                      <input matInput [matDatepicker]=\"birthDate\" formControlName=\"birthDate\" />\n                      <mat-hint>MM/DD/YYYY</mat-hint>\n                      <mat-datepicker-toggle\n                        matIconSuffix\n                        [for]=\"birthDate\"\n                      ></mat-datepicker-toggle>\n                      <mat-datepicker #birthDate></mat-datepicker>\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                        <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n Laboral\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empleado: </mat-label>\n                      <mat-select formControlName=\"idEmpleado\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of employees(); track $index) {\n                          <mat-option [value]=\"item.idEmpleado\">\n                            {{ item.nombreCompleto }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Cargo: </mat-label>\n                      <mat-select formControlName=\"idCargo\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of cargos(); track $index) {\n                          <mat-option [value]=\"item.idCargo\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Observaci\u00F3n</mat-label>\n                      <textarea matInput placeholder=\"...\" formControlName=\"nota\"></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Configuraci\u00F3n Financiera\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-1 row-cols-xl-1 row-cols-lg-1 row-cols-md-1 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Forma de pago: </mat-label>\n                      <mat-select formControlName=\"idFormaPagoSri\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of formasPagoSri(); track $index) {\n                          <mat-option [value]=\"item.idFormaPagoSri\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <acp-mat-input-chip labelText=\"Placa\" [chips]=\"placas()\" />\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-checkbox formControlName=\"configValorBruto\"\n                      >Activar configuraci\u00F3n de valor bruto\n                      <mat-icon\n                        matTooltip=\"valor total de un bien o servicio sin incluir impuestos, deducciones o descuentos (uso dentro del reporte)\"\n                        >info</mat-icon\n                      ></mat-checkbox\n                    >\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n            <div class=\"col\"></div>\n          </div>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"INFORMACI\u00D3N CREDITICIA\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n Personal\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Estado Civil: </mat-label>\n                      <mat-select formControlName=\"maritalStatusId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of maritalStatuses(); track $index) {\n                          <mat-option [value]=\"item.id\">\n                            {{ item.name }}\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>Esposo(a):</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"conyugeNombre\"\n                        placeholder=\"Nombre del c\u00F3nyuge\"\n                      />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Personal:</mat-label>\n                      <input matInput formControlName=\"conyugeTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Referencia:</mat-label>\n                      <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Referencia Familiar:</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"refFamNombre\"\n                        placeholder=\"Nombre de referencia familiar\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n de Vivienda\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo de Vivienda: </mat-label>\n                      <mat-select formControlName=\"housingTypeId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of housingTypes(); track $index) {\n                          <mat-option [value]=\"item.id\">\n                            {{ item.name }}\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>Sector:</mat-label>\n                      <input matInput formControlName=\"sector\" placeholder=\"Nombre del sector\" />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Barrio:</mat-label>\n                      <input matInput formControlName=\"barrio\" placeholder=\"Nombre del barrio\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Calle:</mat-label>\n                      <input matInput formControlName=\"calle\" placeholder=\"Nombre de la calle\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Direcci\u00F3n Completa</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"dirVivienda\"\n                        placeholder=\"Direcci\u00F3n completa de la vivienda (Sector, Barrio y Calle)\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Descripci\u00F3n del Punto de Referencia:</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"refDomicilio\"\n                        placeholder=\"Descripci\u00F3n detallada del punto de referencia\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <acp-mat-theme-button type=\"submit\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n<<<<<<<< HEAD:projects/acontplus-ui-components/src/lib/customers-ui/client/client-add-edit/client-add-edit.component.html\n  <acp-mat-theme-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n========\n>>>>>>>> e8b4dd251833a4e8d200bdc036806a3191730767:packages/ng-customer/src/lib/ui/components/customer-add-edit/customer-add-edit.component.html\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatInputChipComponent, selector: "acp-mat-input-chip", inputs: ["chips", "labelText", "placelholder"] }, { kind: "directive", type: ToUpperCaseDirective, selector: "[acpToUpperCase]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatThemeButtonComponent, selector: "acp-mat-theme-button", inputs: ["variant", "text", "icon", "outlined", "disabled", "useThemeColor", "type", "matStyle", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "component", type: MatDynamicCardComponent, selector: "acp-mat-dynamic-card", inputs: ["cardTitle", "cardSubtitle", "avatarImageUrl", "isHeaderVisible", "contentPadding", "hasDivider", "areActionsVisible", "primaryButtonText", "secondaryButtonText", "primaryButtonIcon", "secondaryButtonIcon", "buttonsPosition"], outputs: ["primaryButtonClicked", "secondaryButtonClicked", "cardClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CustomerAddEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-customer-add-edit', imports: [
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatButtonModule,
+                        ReactiveFormsModule,
+                        MatTabsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        MatInputChipComponent,
+                        ToUpperCaseDirective,
+                        MatCheckbox,
+                        MatIcon,
+                        MatTooltip,
+                        MatDatepickerModule,
+                        MatThemeButtonComponent,
+                        MatDynamicCardComponent,
+                    ], providers: [
+                        provideNativeDateAdapter(),
+                        {
+                            provide: CustomerUseCase,
+                            useFactory: () => new CustomerUseCase(new CustomerHttpRepository()),
+                        },
+                        {
+                            provide: CustomerExternalUseCase,
+                            useFactory: () => new CustomerExternalUseCase(new CustomerExternalHttpRepository()),
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-dialog-content>\n  <form\n    (ngSubmit)=\"onSave()\"\n    id=\"formCompanyCustomer\"\n    [formGroup]=\"customerForm\"\n    autocomplete=\"off\"\n  >\n    <mat-tab-group>\n      <mat-tab label=\"DATOS PRINCIPALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Tipo Identificaci\u00F3n: </mat-label>\n                <mat-select\n                  formControlName=\"idTipoIdentificacion\"\n                  (selectionChange)=\"identificationTypeChange($event)\"\n                >\n                  @for (item of tiposIdentificacion(); track $index) {\n                    <mat-option [value]=\"item.idTipoIdentificacion\">{{\n                      item.descripcion\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>N\u00FAmero de Identificaci\u00F3n</mat-label>\n                <input\n                  type=\"text\"\n                  matInput\n                  (keydown.enter)=\"onKeyDownGovernmentId($event)\"\n                  formControlName=\"numeroIdentificacion\"\n                />\n                @if (\n                  numeroIdentificacionControl?.invalid &&\n                  (numeroIdentificacionControl?.dirty || numeroIdentificacionControl?.touched)\n                ) {\n                  @if (numeroIdentificacionControl?.hasError('required')) {\n                    <mat-error> El n\u00FAmero de identificaci\u00F3n es obligatorio. </mat-error>\n                  }\n\n                  @if (numeroIdentificacionControl?.hasError('minlength')) {\n                    <mat-error>\n                      Debe tener al menos\n                      {{ numeroIdentificacionControl?.errors?.['minlength'].requiredLength }}\n                      d\u00EDgitos.\n                    </mat-error>\n                  }\n                  @if (numeroIdentificacionControl?.hasError('maxlength')) {\n                    <mat-error>\n                      No puede tener m\u00E1s de\n                      {{ numeroIdentificacionControl?.errors?.['maxlength'].requiredLength }}\n                      d\u00EDgitos.\n                    </mat-error>\n                  }\n                  @if (numeroIdentificacionControl?.hasError('pattern')) {\n                    <mat-error> Solo se permiten caracteres num\u00E9ricos. </mat-error>\n                  }\n                  @if (numeroIdentificacionControl?.hasError('endsWith001')) {\n                    <mat-error> Los \u00FAltimos tres d\u00EDgitos deben ser 001. </mat-error>\n                  }\n                }\n\n                @if (showRefresh()) {\n                  <ng-container matSuffix>\n                    <button type=\"button\" mat-icon-button (click)=\"onKeyDownGovernmentId($event)\">\n                      <mat-icon>refresh</mat-icon>\n                    </button>\n                  </ng-container>\n                }\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Fiscal:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreFiscal\"\n                  id=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                />\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Comercial:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                  type=\"text\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>Direcci\u00F3n:</mat-label>\n              <input\n                matInput\n                formControlName=\"direccion\"\n                placeholder=\"AV. 09 DE OCTUBRE...\"\n                acpToUpperCase\n              />\n            </mat-form-field>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-input-chip [chips]=\"emails\" [labelText]=\"'Correo'\" />\n            </div>\n            <div class=\"col\">\n              <acp-mat-input-chip [chips]=\"telephones\" [labelText]=\"'Tel\u00E9fono'\" />\n            </div>\n          </div>\n\n          @if (isUpdate()) {\n            <div class=\"vstack gap-2 mt-2\">\n              <span>Estado</span>\n              <mat-slide-toggle formControlName=\"estado\">\n                {{ customerForm.value.estado ? 'Activo' : 'Inactivo' }}\n              </mat-slide-toggle>\n            </div>\n          }\n        </div>\n      </mat-tab>\n      <mat-tab label=\"DATOS ADICIONALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n B\u00E1sica\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Contribuyente: </mat-label>\n                      <mat-select formControlName=\"idSubContribuyente\">\n                        @for (item of tipoContribuyentes(); track $index) {\n                          <mat-option [value]=\"item.idSubContribuyente\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n                      <mat-select formControlName=\"idTiempoCredito\">\n                        @for (item of tiemposCredito(); track $index) {\n                          <mat-option [value]=\"item.idTiempoCredito\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Ciudad</mat-label>\n                      <mat-select formControlName=\"idCiudad\">\n                        <mat-option [value]=\"0\">-- Ninguno --</mat-option>\n                        @for (group of ciudades(); track $index) {\n                          <mat-optgroup [label]=\"group.nombre\">\n                            @for (item of group.ciudades; track $index) {\n                              <mat-option [value]=\"item.idCiudad\">{{ item.nombre }}</mat-option>\n                            }\n                          </mat-optgroup>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Cliente: </mat-label>\n                      <mat-select formControlName=\"idTipoClienteProveedor\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                        @for (item of tiposCliente(); track $index) {\n                          <mat-option [value]=\"item.idTipoClienteProveedor\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empresa: </mat-label>\n                      <mat-select formControlName=\"idEmpresa\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of empresas(); track $index) {\n                          <mat-option [value]=\"item.idEmpresa\">\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>Fecha Nacimiento</mat-label>\n                      <input matInput [matDatepicker]=\"birthDate\" formControlName=\"birthDate\" />\n                      <mat-hint>MM/DD/YYYY</mat-hint>\n                      <mat-datepicker-toggle\n                        matIconSuffix\n                        [for]=\"birthDate\"\n                      ></mat-datepicker-toggle>\n                      <mat-datepicker #birthDate></mat-datepicker>\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                        <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n Laboral\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empleado: </mat-label>\n                      <mat-select formControlName=\"idEmpleado\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of employees(); track $index) {\n                          <mat-option [value]=\"item.idEmpleado\">\n                            {{ item.nombreCompleto }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Cargo: </mat-label>\n                      <mat-select formControlName=\"idCargo\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of cargos(); track $index) {\n                          <mat-option [value]=\"item.idCargo\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Observaci\u00F3n</mat-label>\n                      <textarea matInput placeholder=\"...\" formControlName=\"nota\"></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Configuraci\u00F3n Financiera\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-1 row-cols-xl-1 row-cols-lg-1 row-cols-md-1 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Forma de pago: </mat-label>\n                      <mat-select formControlName=\"idFormaPagoSri\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of formasPagoSri(); track $index) {\n                          <mat-option [value]=\"item.idFormaPagoSri\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <acp-mat-input-chip labelText=\"Placa\" [chips]=\"placas()\" />\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-checkbox formControlName=\"configValorBruto\"\n                      >Activar configuraci\u00F3n de valor bruto\n                      <mat-icon\n                        matTooltip=\"valor total de un bien o servicio sin incluir impuestos, deducciones o descuentos (uso dentro del reporte)\"\n                        >info</mat-icon\n                      ></mat-checkbox\n                    >\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n            <div class=\"col\"></div>\n          </div>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"INFORMACI\u00D3N CREDITICIA\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n Personal\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Estado Civil: </mat-label>\n                      <mat-select formControlName=\"maritalStatusId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of maritalStatuses(); track $index) {\n                          <mat-option [value]=\"item.id\">\n                            {{ item.name }}\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>Esposo(a):</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"conyugeNombre\"\n                        placeholder=\"Nombre del c\u00F3nyuge\"\n                      />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Personal:</mat-label>\n                      <input matInput formControlName=\"conyugeTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tel\u00E9fono Referencia:</mat-label>\n                      <input matInput formControlName=\"refFamTel\" placeholder=\"09xxxxxxxx\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Referencia Familiar:</mat-label>\n                      <input\n                        matInput\n                        formControlName=\"refFamNombre\"\n                        placeholder=\"Nombre de referencia familiar\"\n                      />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-mat-dynamic-card title=\"Informaci\u00F3n de Vivienda\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo de Vivienda: </mat-label>\n                      <mat-select formControlName=\"housingTypeId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of housingTypes(); track $index) {\n                          <mat-option [value]=\"item.id\">\n                            {{ item.name }}\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>Sector:</mat-label>\n                      <input matInput formControlName=\"sector\" placeholder=\"Nombre del sector\" />\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Barrio:</mat-label>\n                      <input matInput formControlName=\"barrio\" placeholder=\"Nombre del barrio\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Calle:</mat-label>\n                      <input matInput formControlName=\"calle\" placeholder=\"Nombre de la calle\" />\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Direcci\u00F3n Completa</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"dirVivienda\"\n                        placeholder=\"Direcci\u00F3n completa de la vivienda (Sector, Barrio y Calle)\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col w-100\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Descripci\u00F3n del Punto de Referencia:</mat-label>\n                      <textarea\n                        matInput\n                        formControlName=\"refDomicilio\"\n                        placeholder=\"Descripci\u00F3n detallada del punto de referencia\"\n                      ></textarea>\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-mat-dynamic-card>\n            </div>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <acp-mat-theme-button type=\"submit\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n<<<<<<<< HEAD:projects/acontplus-ui-components/src/lib/customers-ui/client/client-add-edit/client-add-edit.component.html\n  <acp-mat-theme-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n========\n>>>>>>>> e8b4dd251833a4e8d200bdc036806a3191730767:packages/ng-customer/src/lib/ui/components/customer-add-edit/customer-add-edit.component.html\n</mat-dialog-actions>\n" }]
+        }] });
+
+class CustomerCardComponent {
+    customer = input.required(...(ngDevMode ? [{ debugName: "customer" }] : []));
+    editCustomer = output();
+    deleteCustomer = output();
+    getLogoSliceBusinessName = computed(() => {
+        const name = this.customer()?.businessName || '';
+        return name.slice(0, 1);
+    }, ...(ngDevMode ? [{ debugName: "getLogoSliceBusinessName" }] : []));
+    onEditClick() {
+        // Emits the customer object to the parent component
+        this.editCustomer.emit(this.customer());
+    }
+    onDeleteClick() {
+        // Emits the customer object to the parent component
+        this.deleteCustomer.emit(this.customer());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CustomerCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: CustomerCardComponent, isStandalone: true, selector: "acp-customer-card", inputs: { customer: { classPropertyName: "customer", publicName: "customer", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editCustomer: "editCustomer", deleteCustomer: "deleteCustomer" }, ngImport: i0, template: "<mat-card class=\"customer-card\">\n  <!-- Header -->\n  <div class=\"card-header\">\n    <div class=\"avatar\" aria-label=\"Logo de cliente\">{{ getLogoSliceBusinessName() }}</div>\n    <h5 class=\"businessName\">{{ customer().businessName }}</h5>\n    <p class=\"tradeName\">{{ customer().tradeName }}</p>\n  </div>\n\n  <!-- Card content -->\n  <mat-card-content>\n    <div class=\"info\">\n      <p><strong>ID:</strong> 1234567890 (RUC)</p>\n      <p><strong>Email:</strong> {{ customer().email }}</p>\n      <p><strong>Tel\u00E9fono:</strong> {{ customer().phone }}</p>\n      <p><strong>Direcci\u00F3n:</strong>{{ customer().address }}</p>\n\n      <div class=\"chips\">\n        <mat-chip-set>\n          <mat-chip color=\"primary\">{{ customer().statusName }}</mat-chip>\n        </mat-chip-set>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Card actions -->\n  @if (!customer().isFinalConsumer) {\n    <mat-card-actions class=\"actions gap-2\">\n      <acp-mat-theme-button matStyle=\"icon\" icon=\"edit\" (handleClick)=\"onEditClick()\" />\n      <acp-mat-theme-button\n        matStyle=\"icon\"\n        icon=\"delete\"\n        variant=\"danger\"\n        (handleClick)=\"onDeleteClick()\"\n      />\n    </mat-card-actions>\n  }\n</mat-card>\n", styles: [".customer-card{width:345px;border-radius:16px}.card-header{display:flex;flex-direction:column;align-items:center;padding:16px;background-color:#e3f2fd;border-top-left-radius:16px;border-top-right-radius:16px}.card-header .businessName{text-align:center;font-size:14px;font-weight:500}.card-header .tradeName{text-align:center;font-size:12px;color:#6c757d}.avatar{width:80px;height:80px;border-radius:50%;background-color:#1976d2;display:flex;justify-content:center;align-items:center;font-size:32px;color:#fff;margin-bottom:12px}.info p{margin:4px 0}.chips{margin-top:12px;display:flex;gap:8px}.actions{justify-content:flex-end;padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i2$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MatThemeButtonComponent, selector: "acp-mat-theme-button", inputs: ["variant", "text", "icon", "outlined", "disabled", "useThemeColor", "type", "matStyle", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CustomerCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-customer-card', imports: [
+                        MatCardModule,
+                        MatDividerModule,
+                        MatChipsModule,
+                        MatButtonModule,
+                        MatThemeButtonComponent,
+                    ], template: "<mat-card class=\"customer-card\">\n  <!-- Header -->\n  <div class=\"card-header\">\n    <div class=\"avatar\" aria-label=\"Logo de cliente\">{{ getLogoSliceBusinessName() }}</div>\n    <h5 class=\"businessName\">{{ customer().businessName }}</h5>\n    <p class=\"tradeName\">{{ customer().tradeName }}</p>\n  </div>\n\n  <!-- Card content -->\n  <mat-card-content>\n    <div class=\"info\">\n      <p><strong>ID:</strong> 1234567890 (RUC)</p>\n      <p><strong>Email:</strong> {{ customer().email }}</p>\n      <p><strong>Tel\u00E9fono:</strong> {{ customer().phone }}</p>\n      <p><strong>Direcci\u00F3n:</strong>{{ customer().address }}</p>\n\n      <div class=\"chips\">\n        <mat-chip-set>\n          <mat-chip color=\"primary\">{{ customer().statusName }}</mat-chip>\n        </mat-chip-set>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Card actions -->\n  @if (!customer().isFinalConsumer) {\n    <mat-card-actions class=\"actions gap-2\">\n      <acp-mat-theme-button matStyle=\"icon\" icon=\"edit\" (handleClick)=\"onEditClick()\" />\n      <acp-mat-theme-button\n        matStyle=\"icon\"\n        icon=\"delete\"\n        variant=\"danger\"\n        (handleClick)=\"onDeleteClick()\"\n      />\n    </mat-card-actions>\n  }\n</mat-card>\n", styles: [".customer-card{width:345px;border-radius:16px}.card-header{display:flex;flex-direction:column;align-items:center;padding:16px;background-color:#e3f2fd;border-top-left-radius:16px;border-top-right-radius:16px}.card-header .businessName{text-align:center;font-size:14px;font-weight:500}.card-header .tradeName{text-align:center;font-size:12px;color:#6c757d}.avatar{width:80px;height:80px;border-radius:50%;background-color:#1976d2;display:flex;justify-content:center;align-items:center;font-size:32px;color:#fff;margin-bottom:12px}.info p{margin:4px 0}.chips{margin-top:12px;display:flex;gap:8px}.actions{justify-content:flex-end;padding:16px}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUSTOMER_API, CompanySearchMapper, CustomerAddEditComponent, CustomerCardComponent, CustomerCreateUpdateMapper, CustomerExternalHttpRepository, CustomerExternalUseCase, CustomerFormDataMapper, CustomerGetByIdMapper, CustomerHttpRepository, CustomerUseCase, ListCustomerMapper };
+//# sourceMappingURL=acontplus-ng-customer.mjs.map