@acontplus/ng-customer 1.0.7 → 1.0.8

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

@@ -283,7 +283,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 +413,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 +464,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 +531,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 +692,7 @@ class CustomerAddEditComponent {
                 }
             });
         }
-        catch (error) {
+        catch {
             // Handle error appropriately
         }
     }
@@ -818,7 +820,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                    <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 [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-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  <div class=\"hstack gap-2\">\n    <acp-mat-theme-button type=\"submit\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n    <acp-mat-theme-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: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatInputChipComponent, selector: "acp-mat-input-chip", inputs: ["chips", "labelText", "placelholder"] }, { kind: "directive", type: ToUpperCaseDirective, selector: "[acpToUpperCase]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatThemeButtonComponent, selector: "acp-mat-theme-button", inputs: ["variant", "text", "icon", "outlined", "disabled", "useThemeColor", "type", "matStyle", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }, { kind: "component", type: MatDynamicCardComponent, selector: "acp-mat-dynamic-card", inputs: ["cardTitle", "cardSubtitle", "avatarImageUrl", "isHeaderVisible", "contentPadding", "hasDivider", "areActionsVisible", "primaryButtonText", "secondaryButtonText", "primaryButtonIcon", "secondaryButtonIcon", "buttonsPosition"], outputs: ["primaryButtonClicked", "secondaryButtonClicked", "cardClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CustomerAddEditComponent, decorators: [{
             type: Component,
@@ -850,7 +852,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                    <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 [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-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  <div class=\"hstack gap-2\">\n    <acp-mat-theme-button type=\"submit\" form=\"formCompanyCustomer\" [text]=\"btnText()\" />\n    <acp-mat-theme-button type=\"button\" variant=\"dark\" text=\"Cerrar\" (handleClick)=\"close()\" />\n  </div>\n</mat-dialog-actions>\n" }]
         }] });
 
 class CustomerCardComponent {