@acontplus/ng-customer 1.0.7 → 1.0.9

package/README.md

@@ -1,9 +1,51 @@
 # @acontplus/ng-customer
 
-Angular components for customer management.
+Angular customer management library for AcontPlus applications, providing components and services for customer CRUD operations following clean architecture principles.
 
 ## Installation
 
 ```bash
 npm install @acontplus/ng-customer
 ```
+
+## Features
+
+- **Customer Components**: Customer card and add/edit components built with Angular Material
+- **Clean Architecture**: Organized in domain, application, infrastructure, and presentation layers
+- **Domain Models**: Customer entities and value objects
+- **Use Cases**: Business logic for customer operations (create, read, update, delete)
+- **Repositories**: Data access abstractions with concrete implementations
+- **DTOs and Mappers**: Data transfer objects and mapping utilities
+- **TypeScript Support**: Full type safety with comprehensive TypeScript definitions
+- **Angular Material Integration**: Consistent UI components
+
+## Components
+
+### Customer Card
+
+Display component for showing customer information in a card format.
+
+### Customer Add/Edit
+
+Form component for creating and editing customer details.
+
+## Architecture
+
+The library follows Clean Architecture principles:
+
+- **Domain**: Core business logic, entities, and repository interfaces
+- **Application**: Use cases and application services
+- **Infrastructure**: Repository implementations, DTOs, mappers, and external integrations
+- **UI**: Angular components and presentation logic
+
+## Usage
+
+Import the components and services you need:
+
+```typescript
+import { CustomerCardComponent, CustomerAddEditComponent } from '@acontplus/ng-customer';
+```
+
+## Running unit tests
+
+Run `nx test ng-customer` to execute the unit tests.

package/fesm2022/acontplus-ng-customer.mjs

@@ -5,25 +5,24 @@ import { inject, signal, ChangeDetectionStrategy, Component, input, output, comp
 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 { InputChipComponent, ToUpperCaseDirective, ButtonComponent, DynamicCardComponent } from '@acontplus/ng-components';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/tabs';
+import * as i2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i4 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/select';
+import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7 from '@angular/material/slide-toggle';
+import * as i6 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
-import * as i8 from '@angular/material/datepicker';
+import * as i7 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { provideNativeDateAdapter } from '@angular/material/core';
 import * as i1$1 from '@angular/material/card';
@@ -75,7 +74,7 @@ class CustomerExternalUseCase {
 }
 
 const CUSTOMER_API = {
-    BILLING: '/api',
+    BILLING: 'customers',
 };
 
 class CompanySearchMapper {
@@ -283,7 +282,11 @@ class ListCustomerMapper {
         };
         // 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 : [];
+        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,
@@ -409,9 +412,7 @@ class CustomerHttpRepository {
     }
     getAll(obj) {
         const json = ListCustomerMapper.toJson(obj);
-        return this.http
-            .get(`${this.url}?json=${json}`)
-            .then((response) => {
+        return this.http.get(`${this.url}?json=${json}`).then((response) => {
             const data = ListCustomerMapper.fromJson(response);
             return {
                 status: 'success',
@@ -462,9 +463,7 @@ class CustomerHttpRepository {
         });
     }
     getById(id) {
-        return this.http
-            .get(`${this.url}GetId/${id}`)
-            .then(response => {
+        return this.http.get(`${this.url}GetId/${id}`).then(response => {
             const data = CustomerGetByIdMapper.fromJson(response);
             return {
                 status: response.code === '1' ? 'success' : 'warning',
@@ -531,7 +530,9 @@ class CustomerAddEditComponent {
         idEmpresa: new FormControl(0),
         idFormaPagoSri: new FormControl(0),
         idTipoClienteProveedor: new FormControl(0),
-        idTipoEntidad: new FormControl(0),
+        idTipoIdentificacion: new FormControl(0, Validators.required),
+        idSubContribuyente: new FormControl(0),
+        idTiempoCredito: new FormControl(0),
         idCiudad: new FormControl(0),
         idEmpleado: new FormControl(0),
         nombreFiscal: new FormControl('', Validators.required),
@@ -690,7 +691,7 @@ class CustomerAddEditComponent {
                 }
             });
         }
-        catch (error) {
+        catch {
             // Handle error appropriately
         }
     }
@@ -818,7 +819,7 @@ class CustomerAddEditComponent {
                 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 matIconSuffix\n                        [for]=\"birthDate\"\n                       />\n                      <mat-datepicker #birthDate />\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                        <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-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 });
+        ], 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                    <acp-button\n                      type=\"button\"\n                      matStyle=\"icon\"\n                      icon=\"refresh\"\n                      (handleClick)=\"onKeyDownGovernmentId($event)\"\n                    />\n                  </ng-container>\n                }\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Fiscal:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreFiscal\"\n                  id=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                />\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Comercial:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                  type=\"text\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>Direcci\u00F3n:</mat-label>\n              <input\n                matInput\n                formControlName=\"direccion\"\n                placeholder=\"AV. 09 DE OCTUBRE...\"\n                acpToUpperCase\n              />\n            </mat-form-field>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"emails\" [labelText]=\"'Correo'\" />\n            </div>\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"telephones\" [labelText]=\"'Tel\u00E9fono'\" />\n            </div>\n          </div>\n\n          @if (isUpdate()) {\n            <div class=\"vstack gap-2 mt-2\">\n              <span>Estado</span>\n              <mat-slide-toggle formControlName=\"estado\">\n                {{ customerForm.value.estado ? 'Activo' : 'Inactivo' }}\n              </mat-slide-toggle>\n            </div>\n          }\n        </div>\n      </mat-tab>\n      <mat-tab label=\"DATOS ADICIONALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n B\u00E1sica\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Contribuyente: </mat-label>\n                      <mat-select formControlName=\"idSubContribuyente\">\n                        @for (item of tipoContribuyentes(); track $index) {\n                          <mat-option [value]=\"item.idSubContribuyente\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n                      <mat-select formControlName=\"idTiempoCredito\">\n                        @for (item of tiemposCredito(); track $index) {\n                          <mat-option [value]=\"item.idTiempoCredito\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Ciudad</mat-label>\n                      <mat-select formControlName=\"idCiudad\">\n                        <mat-option [value]=\"0\">-- Ninguno --</mat-option>\n                        @for (group of ciudades(); track $index) {\n                          <mat-optgroup [label]=\"group.nombre\">\n                            @for (item of group.ciudades; track $index) {\n                              <mat-option [value]=\"item.idCiudad\">{{ item.nombre }}</mat-option>\n                            }\n                          </mat-optgroup>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Cliente: </mat-label>\n                      <mat-select formControlName=\"idTipoClienteProveedor\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                        @for (item of tiposCliente(); track $index) {\n                          <mat-option [value]=\"item.idTipoClienteProveedor\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empresa: </mat-label>\n                      <mat-select formControlName=\"idEmpresa\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of empresas(); track $index) {\n                          <mat-option [value]=\"item.idEmpresa\">\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 matIconSuffix [for]=\"birthDate\" />\n                      <mat-datepicker #birthDate />\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                        <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Laboral\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empleado: </mat-label>\n                      <mat-select formControlName=\"idEmpleado\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of employees(); track $index) {\n                          <mat-option [value]=\"item.idEmpleado\">\n                            {{ item.nombreCompleto }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Cargo: </mat-label>\n                      <mat-select formControlName=\"idCargo\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of cargos(); track $index) {\n                          <mat-option [value]=\"item.idCargo\">\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-dynamic-card>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Configuraci\u00F3n Financiera\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-1 row-cols-xl-1 row-cols-lg-1 row-cols-md-1 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Forma de pago: </mat-label>\n                      <mat-select formControlName=\"idFormaPagoSri\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of formasPagoSri(); track $index) {\n                          <mat-option [value]=\"item.idFormaPagoSri\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <acp-input-chip labelText=\"Placa\" [chips]=\"placas()\" />\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-checkbox formControlName=\"configValorBruto\"\n                      >Activar configuraci\u00F3n de valor bruto\n                      <mat-icon\n                        matTooltip=\"valor total de un bien o servicio sin incluir impuestos, deducciones o descuentos (uso dentro del reporte)\"\n                        >info</mat-icon\n                      ></mat-checkbox\n                    >\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\"></div>\n          </div>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"INFORMACI\u00D3N CREDITICIA\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Personal\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Estado Civil: </mat-label>\n                      <mat-select formControlName=\"maritalStatusId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of maritalStatuses(); track $index) {\n                          <mat-option [value]=\"item.id\">\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-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n de Vivienda\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo de Vivienda: </mat-label>\n                      <mat-select formControlName=\"housingTypeId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of housingTypes(); track $index) {\n                          <mat-option [value]=\"item.id\">\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-dynamic-card>\n            </div>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div class=\"hstack gap-2\">\n    <acp-button type=\"submit\" variant=\"success\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n    <acp-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n  </div>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: InputChipComponent, selector: "acp-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: i7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: ButtonComponent, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "component", type: DynamicCardComponent, selector: "acp-dynamic-card", inputs: ["cardTitle", "cardSubtitle", "avatarImageUrl", "isHeaderVisible", "contentPadding", "hasDivider", "areActionsVisible", "primaryButtonText", "secondaryButtonText", "primaryButtonIcon", "secondaryButtonIcon", "buttonsPosition"], outputs: ["primaryButtonClicked", "secondaryButtonClicked", "cardClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomerAddEditComponent, decorators: [{
             type: Component,
@@ -832,14 +833,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatInputModule,
                         MatSelectModule,
                         MatSlideToggleModule,
-                        MatInputChipComponent,
+                        InputChipComponent,
                         ToUpperCaseDirective,
                         MatCheckbox,
                         MatIcon,
                         MatTooltip,
                         MatDatepickerModule,
-                        MatThemeButtonComponent,
-                        MatDynamicCardComponent,
+                        ButtonComponent,
+                        DynamicCardComponent,
                     ], providers: [
                         provideNativeDateAdapter(),
                         {
@@ -850,7 +851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                             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 matIconSuffix\n                        [for]=\"birthDate\"\n                       />\n                      <mat-datepicker #birthDate />\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                        <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-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" }]
+                    ], 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                    <acp-button\n                      type=\"button\"\n                      matStyle=\"icon\"\n                      icon=\"refresh\"\n                      (handleClick)=\"onKeyDownGovernmentId($event)\"\n                    />\n                  </ng-container>\n                }\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Fiscal:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreFiscal\"\n                  id=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                />\n              </mat-form-field>\n            </div>\n            <div class=\"col\">\n              <mat-form-field class=\"w-100\">\n                <mat-label>Nombre Comercial:</mat-label>\n                <input\n                  matInput\n                  autocomplete=\"off\"\n                  formControlName=\"nombreComercial\"\n                  placeholder=\"Ej: TECNOMEGA\"\n                  acpToUpperCase\n                  type=\"text\"\n                />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div>\n            <mat-form-field class=\"w-100\">\n              <mat-label>Direcci\u00F3n:</mat-label>\n              <input\n                matInput\n                formControlName=\"direccion\"\n                placeholder=\"AV. 09 DE OCTUBRE...\"\n                acpToUpperCase\n              />\n            </mat-form-field>\n          </div>\n\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"emails\" [labelText]=\"'Correo'\" />\n            </div>\n            <div class=\"col\">\n              <acp-input-chip [chips]=\"telephones\" [labelText]=\"'Tel\u00E9fono'\" />\n            </div>\n          </div>\n\n          @if (isUpdate()) {\n            <div class=\"vstack gap-2 mt-2\">\n              <span>Estado</span>\n              <mat-slide-toggle formControlName=\"estado\">\n                {{ customerForm.value.estado ? 'Activo' : 'Inactivo' }}\n              </mat-slide-toggle>\n            </div>\n          }\n        </div>\n      </mat-tab>\n      <mat-tab label=\"DATOS ADICIONALES\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n B\u00E1sica\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Contribuyente: </mat-label>\n                      <mat-select formControlName=\"idSubContribuyente\">\n                        @for (item of tipoContribuyentes(); track $index) {\n                          <mat-option [value]=\"item.idSubContribuyente\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tiempo Cr\u00E9dito: </mat-label>\n                      <mat-select formControlName=\"idTiempoCredito\">\n                        @for (item of tiemposCredito(); track $index) {\n                          <mat-option [value]=\"item.idTiempoCredito\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Ciudad</mat-label>\n                      <mat-select formControlName=\"idCiudad\">\n                        <mat-option [value]=\"0\">-- Ninguno --</mat-option>\n                        @for (group of ciudades(); track $index) {\n                          <mat-optgroup [label]=\"group.nombre\">\n                            @for (item of group.ciudades; track $index) {\n                              <mat-option [value]=\"item.idCiudad\">{{ item.nombre }}</mat-option>\n                            }\n                          </mat-optgroup>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo Cliente: </mat-label>\n                      <mat-select formControlName=\"idTipoClienteProveedor\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n                        @for (item of tiposCliente(); track $index) {\n                          <mat-option [value]=\"item.idTipoClienteProveedor\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empresa: </mat-label>\n                      <mat-select formControlName=\"idEmpresa\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of empresas(); track $index) {\n                          <mat-option [value]=\"item.idEmpresa\">\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 matIconSuffix [for]=\"birthDate\" />\n                      <mat-datepicker #birthDate />\n                      @if (birthDateCtrl?.invalid && birthDateCtrl?.touched) {\n                        <mat-error> Fecha inv\u00E1lida </mat-error>\n                      }\n                    </mat-form-field>\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Laboral\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Empleado: </mat-label>\n                      <mat-select formControlName=\"idEmpleado\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of employees(); track $index) {\n                          <mat-option [value]=\"item.idEmpleado\">\n                            {{ item.nombreCompleto }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Cargo: </mat-label>\n                      <mat-select formControlName=\"idCargo\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of cargos(); track $index) {\n                          <mat-option [value]=\"item.idCargo\">\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-dynamic-card>\n            </div>\n          </div>\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Configuraci\u00F3n Financiera\" [isHeaderVisible]=\"true\">\n                <div\n                  class=\"row row-cols-xxl-1 row-cols-xl-1 row-cols-lg-1 row-cols-md-1 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Forma de pago: </mat-label>\n                      <mat-select formControlName=\"idFormaPagoSri\">\n                        <mat-option [value]=\"0\">--Ninguno--</mat-option>\n\n                        @for (item of formasPagoSri(); track $index) {\n                          <mat-option [value]=\"item.idFormaPagoSri\">\n                            {{ item.descripcion }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n\n                  <div class=\"col\">\n                    <acp-input-chip labelText=\"Placa\" [chips]=\"placas()\" />\n                  </div>\n\n                  <div class=\"col w-100\">\n                    <mat-checkbox formControlName=\"configValorBruto\"\n                      >Activar configuraci\u00F3n de valor bruto\n                      <mat-icon\n                        matTooltip=\"valor total de un bien o servicio sin incluir impuestos, deducciones o descuentos (uso dentro del reporte)\"\n                        >info</mat-icon\n                      ></mat-checkbox\n                    >\n                  </div>\n                </div>\n              </acp-dynamic-card>\n            </div>\n            <div class=\"col\"></div>\n          </div>\n        </div>\n      </mat-tab>\n      <mat-tab label=\"INFORMACI\u00D3N CREDITICIA\">\n        <div class=\"d-grid gap-2 mx-3 mt-2\">\n          <div\n            class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-2 row-cols-1 g-1\"\n          >\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n Personal\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Estado Civil: </mat-label>\n                      <mat-select formControlName=\"maritalStatusId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of maritalStatuses(); track $index) {\n                          <mat-option [value]=\"item.id\">\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-dynamic-card>\n            </div>\n            <div class=\"col\">\n              <acp-dynamic-card title=\"Informaci\u00F3n de Vivienda\" [isHeaderVisible]=\"true\">\n                <div\n                  formGroupName=\"dataInfoCred\"\n                  class=\"row row-cols-xxl-2 row-cols-xl-2 row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-2\"\n                >\n                  <div class=\"col\">\n                    <mat-form-field class=\"w-100\">\n                      <mat-label>Tipo de Vivienda: </mat-label>\n                      <mat-select formControlName=\"housingTypeId\">\n                        <mat-option [value]=\"0\">Seleccionar...</mat-option>\n\n                        @for (item of housingTypes(); track $index) {\n                          <mat-option [value]=\"item.id\">\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-dynamic-card>\n            </div>\n          </div>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div class=\"hstack gap-2\">\n    <acp-button type=\"submit\" variant=\"success\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n    <acp-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n  </div>\n</mat-dialog-actions>\n" }]
         }] });
 
 class CustomerCardComponent {
@@ -870,17 +871,11 @@ class CustomerCardComponent {
         this.deleteCustomer.emit(this.customer());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomerCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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: "<div class=\"acp-customer-card\">\n  <mat-card class=\"acp-customer-card-content\">\n    <!-- Header -->\n    <div class=\"acp-card-header\">\n      <div class=\"acp-avatar\" aria-label=\"Logo de cliente\">{{ getLogoSliceBusinessName() }}</div>\n      <h5 class=\"acp-business-name\">{{ customer().businessName }}</h5>\n      <p class=\"acp-trade-name\">{{ customer().tradeName }}</p>\n    </div>\n\n    <!-- Card content -->\n    <mat-card-content>\n      <div class=\"acp-info\">\n        <p><strong>ID:</strong> 1234567890 (RUC)</p>\n        <p><strong>Email:</strong> {{ customer().email }}</p>\n        <p><strong>Tel\u00E9fono:</strong> {{ customer().phone }}</p>\n        <p><strong>Direcci\u00F3n:</strong>{{ customer().address }}</p>\n\n        <div class=\"acp-chips\">\n          <mat-chip-set>\n            <mat-chip color=\"primary\">{{ customer().statusName }}</mat-chip>\n          </mat-chip-set>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <!-- Card actions -->\n    @if (!customer().isFinalConsumer) {\n      <mat-card-actions class=\"acp-actions gap-2\">\n        <acp-button matStyle=\"icon\" icon=\"edit\" (handleClick)=\"onEditClick()\" />\n        <acp-button\n          matStyle=\"icon\"\n          icon=\"delete\"\n          variant=\"danger\"\n          (handleClick)=\"onDeleteClick()\"\n        />\n      </mat-card-actions>\n    }\n  </mat-card>\n</div>\n", styles: [".acp-customer-card{display:block}.acp-customer-card .acp-customer-card-content{width:345px;border-radius:16px}.acp-customer-card .acp-card-header{display:flex;flex-direction:column;align-items:center;padding:16px;background-color:var(--mat-sys-primary-container, #e3f2fd);border-top-left-radius:16px;border-top-right-radius:16px}.acp-customer-card .acp-card-header .acp-business-name{text-align:center;font-size:14px;font-weight:500}.acp-customer-card .acp-card-header .acp-trade-name{text-align:center;font-size:12px;color:var(--mat-sys-on-surface-variant, #6c757d)}.acp-customer-card .acp-avatar{width:80px;height:80px;border-radius:50%;background-color:var(--mat-sys-primary, #1976d2);display:flex;justify-content:center;align-items:center;font-size:32px;color:var(--mat-sys-on-primary, white);margin-bottom:12px}.acp-customer-card .acp-info p{margin:4px 0}.acp-customer-card .acp-chips{margin-top:12px;display:flex;gap:8px}.acp-customer-card .acp-actions{justify-content:flex-end;padding:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$1.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i2$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ButtonComponent, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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"] }]
+            args: [{ selector: 'acp-customer-card', imports: [MatCardModule, MatDividerModule, MatChipsModule, MatButtonModule, ButtonComponent], template: "<div class=\"acp-customer-card\">\n  <mat-card class=\"acp-customer-card-content\">\n    <!-- Header -->\n    <div class=\"acp-card-header\">\n      <div class=\"acp-avatar\" aria-label=\"Logo de cliente\">{{ getLogoSliceBusinessName() }}</div>\n      <h5 class=\"acp-business-name\">{{ customer().businessName }}</h5>\n      <p class=\"acp-trade-name\">{{ customer().tradeName }}</p>\n    </div>\n\n    <!-- Card content -->\n    <mat-card-content>\n      <div class=\"acp-info\">\n        <p><strong>ID:</strong> 1234567890 (RUC)</p>\n        <p><strong>Email:</strong> {{ customer().email }}</p>\n        <p><strong>Tel\u00E9fono:</strong> {{ customer().phone }}</p>\n        <p><strong>Direcci\u00F3n:</strong>{{ customer().address }}</p>\n\n        <div class=\"acp-chips\">\n          <mat-chip-set>\n            <mat-chip color=\"primary\">{{ customer().statusName }}</mat-chip>\n          </mat-chip-set>\n        </div>\n      </div>\n    </mat-card-content>\n\n    <!-- Card actions -->\n    @if (!customer().isFinalConsumer) {\n      <mat-card-actions class=\"acp-actions gap-2\">\n        <acp-button matStyle=\"icon\" icon=\"edit\" (handleClick)=\"onEditClick()\" />\n        <acp-button\n          matStyle=\"icon\"\n          icon=\"delete\"\n          variant=\"danger\"\n          (handleClick)=\"onDeleteClick()\"\n        />\n      </mat-card-actions>\n    }\n  </mat-card>\n</div>\n", styles: [".acp-customer-card{display:block}.acp-customer-card .acp-customer-card-content{width:345px;border-radius:16px}.acp-customer-card .acp-card-header{display:flex;flex-direction:column;align-items:center;padding:16px;background-color:var(--mat-sys-primary-container, #e3f2fd);border-top-left-radius:16px;border-top-right-radius:16px}.acp-customer-card .acp-card-header .acp-business-name{text-align:center;font-size:14px;font-weight:500}.acp-customer-card .acp-card-header .acp-trade-name{text-align:center;font-size:12px;color:var(--mat-sys-on-surface-variant, #6c757d)}.acp-customer-card .acp-avatar{width:80px;height:80px;border-radius:50%;background-color:var(--mat-sys-primary, #1976d2);display:flex;justify-content:center;align-items:center;font-size:32px;color:var(--mat-sys-on-primary, white);margin-bottom:12px}.acp-customer-card .acp-info p{margin:4px 0}.acp-customer-card .acp-chips{margin-top:12px;display:flex;gap:8px}.acp-customer-card .acp-actions{justify-content:flex-end;padding:16px}\n"] }]
         }] });
 
 /**