iptdevs-design-system 3.1.669 → 3.1.671

package/fesm2020/iptdevs-design-system.mjs

@@ -38,7 +38,7 @@ import { InputTextareaModule } from 'primeng/inputtextarea';
 import * as i8 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i1$3 from '@angular/router';
-import * as i3$1 from 'primeng/steps';
+import * as i5$1 from 'primeng/steps';
 import { StepsModule } from 'primeng/steps';
 import * as i7$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
@@ -7457,6 +7457,7 @@ class CodSelfFormStepFourComponent extends CodSelfManagedSteps {
         this.fb = fb;
         this.messageService = messageService;
         this.completed = new EventEmitter();
+        this.action = new EventEmitter();
         this.controls = new CodSelfManagedControls().controls[3];
         this.messageInfo = "Datos de facturacion de acuerdo a tu eleccion";
         this.visible = false;
@@ -7549,9 +7550,11 @@ class CodSelfFormStepFourComponent extends CodSelfManagedSteps {
     // }
     sendForm() {
         // Aquí va la lógica para enviar el formulario
+        this.codSelfFormStepFour.markAllAsTouched();
+        // if (this.codSelfFormStepFour.invalid || this.termsCheckboxStatus === false) return;
+        this.action.emit('create');
         console.log('Ejecuta endpoint');
-        // Movernos al siguiente paso
-        this.completed.emit(4);
+        // this.completed.emit(4);
     }
     onReject() {
         this.messageService.clear('confirm');
@@ -7619,7 +7622,7 @@ class CodSelfFormStepFourComponent extends CodSelfManagedSteps {
     }
 }
 CodSelfFormStepFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepFourComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-CodSelfFormStepFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", inputs: { idTypes: "idTypes" }, outputs: { completed: "completed" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Datos de Facturacion</h2>\n    <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n      <ng-template let-message pTemplate=\"message\">\n        <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n          <div class=\"flex align-items-center gap-2\">\n            <img src=\"https://qa.iptdev.com.co/assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n            <span class=\"font-bold text-900\">Jacob</span>\n          </div>\n          <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n        </div>\n      </ng-template>\n    </p-toast>\n    <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n    <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\n      <div class=\"container__body__select flex justify-content-center flex-wrap\">\n        <div class=\"container__type__payments\" *ngIf=\"isSelectionOptionPayments\">\n          <div class=\"flex flex-column gap-3\">\n            <h3>\u00BFComo quieres pagar?</h3>\n            <div *ngFor=\"let category of OptionPayments; index as ind\" class=\"field-checkbox\">\n              <p-radioButton\n                [inputId]=\"category.key\"\n                name=\"category\"\n                [value]=\"category\"\n                [(ngModel)]=\"selectedOptionPayments\"\n                [disabled]=\"disableweekdays[ind]\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"selectOpcionsPayments($event)\"\n              ></p-radioButton>\n              <label [for]=\"category.key\" class=\"ml-2\">\n                {{ category.name }}\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"container__opstion__instalations\" *ngIf=\"!isSelectionOptionPayments\">\n          <!-- Vista para la opci\u00F3n de pago \"Instalaciones\" -->\n          <div *ngIf=\"getViewBasedOnPaymentOption() === 'in'\">\n            <div class=\"container__info flex flex-column align-items-center justify-content-center mt-1 mb-4\" *ngIf=\"isEditBillingData\">\n\n              <img\n              src=\"https://qa.iptdev.com.co/assets/logos/lobo-web.png\"\n              alt=\"Receipt Icon\"\n              shape=\"circle\"\n              class=\"circular-image\"\n            />\n              <strong>{{ codSelfFormStepFour.get('invoicing_name')?.value }} {{ codSelfFormStepFour.get('invoicing_Apellido')?.value }}</strong>\n              <span>{{ getIdTypeDescription(codSelfFormStepFour.get('invoicing_idType')?.value) }} {{ codSelfFormStepFour.get('invoicing_document')?.value }}</span>\n\n              <div class=\"container-button\">\n                <ipt-button\n                  [label]=\"'Modificar Datos'\"\n                  (onClick)=\"editBillingData()\"\n                  [primary]=\"false\">\n                </ipt-button>\n              </div>\n            </div>\n            <div class=\"m-3\" *ngIf=\"!isEditBillingData\">\n              <h3>Completa los nuevos datos para la emision de tu factura</h3>\n              <div class=\"flex gap-1 md:gap-4 xl:gap-8 m-1 p-2 border-round bg-blue-500 text-white\">\n                <div class=\"container_icon flex mr-4 justify-content-center align-items-start mt-1\">\n                  <i class=\"pi pi-info-circle cursor-pointer w-auto mb-4\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n                </div>\n                <div class=\"flex flex-column container_info_span flex align-items-center justify-content-center\">\n                  <span>Si proporcionas datos de un tercero, confirmas que los datos son correctos y que tienes su consentimiento para el uso de la informacion. Estos datos se trataran de acuerdo a nuestra <a href=\"\">Declaracion de Privacidad</a></span>\n                </div>\n              </div>\n              <div>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Nombres'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_name']\"\n                ></ipt-input>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Apellido'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_Apellido']\"\n                ></ipt-input>\n                <ipt-select\n                  [initialValue]=\"codSelfFormStepFour.controls['invoicing_idType'].value\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_idType']\"\n                  [selectCode]=\"codSelfFormStepFour.controls['invoicing_idType'].value === null ? 'Tipo de documento' : codSelfFormStepFour.controls['invoicing_idType'].value\"\n                  [isRequired]=\"true\"\n                  [data]=\"idTypes\"\n                  (eventSelect)=\"selectIdType($event)\"\n                  [defaultText]=\"'Tipo de documento'\"\n                ></ipt-select>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Documento'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_document']\"\n                ></ipt-input>\n              </div>\n              <div class=\"flex justify-content-end mt-3 align-items-center gap-3\">\n                <button\n                  pButton\n                  [disabled]=\"!codSelfFormStepFour.valid\"\n                  label=\"Continuar\"\n                  type=\"button\"\n                  (click)=\"updateDatosBillingData()\"\n                ></button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Vista para la opci\u00F3n de pago \"Transferencia\" -->\n          <div *ngIf=\"getViewBasedOnPaymentOption() === 'tr'\">\n            <h3>Completa los datos para Transferencia</h3>\n            <!-- Aqu\u00ED puedes agregar el formulario espec\u00EDfico para Transferencia -->\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <button\n        pButton\n        icon=\"pi pi-arrow-left\"\n        type=\"button\"\n        (click)=\"back()\"\n      ></button>\n      <button\n        *ngIf=\"!isSelectionOptionPayments && isEditBillingData && codSelfFormStepFour.valid\"\n        pButton\n        label=\"Guardar\"\n        type=\"button\"\n        (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n<div>\n  <pre>{{ codSelfFormStepFour.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepFour.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}.error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.circular-image{width:50px;height:50px;border-radius:50%;object-fit:cover;border:none}.container-button{width:10rem;margin-top:3%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal", "disabledSel"], outputs: ["dateSelected"] }, { kind: "component", type: SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "initialValue", "control"], outputs: ["eventSelect"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i14.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+CodSelfFormStepFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", inputs: { idTypes: "idTypes" }, outputs: { completed: "completed", action: "action" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Datos de Facturacion</h2>\n    <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n      <ng-template let-message pTemplate=\"message\">\n        <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n          <div class=\"flex align-items-center gap-2\">\n            <img src=\"https://qa.iptdev.com.co/assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n            <span class=\"font-bold text-900\">Jacob</span>\n          </div>\n          <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n        </div>\n      </ng-template>\n    </p-toast>\n    <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n    <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\n      <div class=\"container__body__select flex justify-content-center flex-wrap\">\n        <div class=\"container__type__payments\" *ngIf=\"isSelectionOptionPayments\">\n          <div class=\"flex flex-column gap-3\">\n            <h3>\u00BFComo quieres pagar?</h3>\n            <div *ngFor=\"let category of OptionPayments; index as ind\" class=\"field-checkbox\">\n              <p-radioButton\n                [inputId]=\"category.key\"\n                name=\"category\"\n                [value]=\"category\"\n                [(ngModel)]=\"selectedOptionPayments\"\n                [disabled]=\"disableweekdays[ind]\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"selectOpcionsPayments($event)\"\n              ></p-radioButton>\n              <label [for]=\"category.key\" class=\"ml-2\">\n                {{ category.name }}\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"container__opstion__instalations\" *ngIf=\"!isSelectionOptionPayments\">\n          <!-- Vista para la opci\u00F3n de pago \"Instalaciones\" -->\n          <div *ngIf=\"getViewBasedOnPaymentOption() === 'in'\">\n            <div class=\"container__info flex flex-column align-items-center justify-content-center mt-1 mb-4\" *ngIf=\"isEditBillingData\">\n\n              <img\n              src=\"https://qa.iptdev.com.co/assets/logos/lobo-web.png\"\n              alt=\"Receipt Icon\"\n              shape=\"circle\"\n              class=\"circular-image\"\n            />\n              <strong>{{ codSelfFormStepFour.get('invoicing_name')?.value }} {{ codSelfFormStepFour.get('invoicing_Apellido')?.value }}</strong>\n              <span>{{ getIdTypeDescription(codSelfFormStepFour.get('invoicing_idType')?.value) }} {{ codSelfFormStepFour.get('invoicing_document')?.value }}</span>\n\n              <div class=\"container-button\">\n                <ipt-button\n                  [label]=\"'Modificar Datos'\"\n                  (onClick)=\"editBillingData()\"\n                  [primary]=\"false\">\n                </ipt-button>\n              </div>\n            </div>\n            <div class=\"m-3\" *ngIf=\"!isEditBillingData\">\n              <h3>Completa los nuevos datos para la emision de tu factura</h3>\n              <div class=\"flex gap-1 md:gap-4 xl:gap-8 m-1 p-2 border-round bg-blue-500 text-white\">\n                <div class=\"container_icon flex mr-4 justify-content-center align-items-start mt-1\">\n                  <i class=\"pi pi-info-circle cursor-pointer w-auto mb-4\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n                </div>\n                <div class=\"flex flex-column container_info_span flex align-items-center justify-content-center\">\n                  <span>Si proporcionas datos de un tercero, confirmas que los datos son correctos y que tienes su consentimiento para el uso de la informacion. Estos datos se trataran de acuerdo a nuestra <a href=\"\">Declaracion de Privacidad</a></span>\n                </div>\n              </div>\n              <div>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Nombres'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_name']\"\n                ></ipt-input>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Apellido'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_Apellido']\"\n                ></ipt-input>\n                <ipt-select\n                  [initialValue]=\"codSelfFormStepFour.controls['invoicing_idType'].value\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_idType']\"\n                  [selectCode]=\"codSelfFormStepFour.controls['invoicing_idType'].value === null ? 'Tipo de documento' : codSelfFormStepFour.controls['invoicing_idType'].value\"\n                  [isRequired]=\"true\"\n                  [data]=\"idTypes\"\n                  (eventSelect)=\"selectIdType($event)\"\n                  [defaultText]=\"'Tipo de documento'\"\n                ></ipt-select>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Documento'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_document']\"\n                ></ipt-input>\n              </div>\n              <div class=\"flex justify-content-end mt-3 align-items-center gap-3\">\n                <button\n                  pButton\n                  [disabled]=\"!codSelfFormStepFour.valid\"\n                  label=\"Continuar\"\n                  type=\"button\"\n                  (click)=\"updateDatosBillingData()\"\n                ></button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Vista para la opci\u00F3n de pago \"Transferencia\" -->\n          <div *ngIf=\"getViewBasedOnPaymentOption() === 'tr'\">\n            <h3>Completa los datos para Transferencia</h3>\n            <!-- Aqu\u00ED puedes agregar el formulario espec\u00EDfico para Transferencia -->\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <button\n        pButton\n        icon=\"pi pi-arrow-left\"\n        type=\"button\"\n        (click)=\"back()\"\n      ></button>\n      <button\n        *ngIf=\"!isSelectionOptionPayments && isEditBillingData && codSelfFormStepFour.valid\"\n        pButton\n        label=\"Guardar\"\n        type=\"button\"\n        (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n<div>\n  <pre>{{ codSelfFormStepFour.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepFour.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}.error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.circular-image{width:50px;height:50px;border-radius:50%;object-fit:cover;border:none}.container-button{width:10rem;margin-top:3%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal", "disabledSel"], outputs: ["dateSelected"] }, { kind: "component", type: SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "initialValue", "control"], outputs: ["eventSelect"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i14.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepFourComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-cod-self-form-step-four', template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Datos de Facturacion</h2>\n    <p-toast position=\"top-center\" key=\"confirm\" (onClose)=\"onReject()\" [baseZIndex]=\"10\">\n      <ng-template let-message pTemplate=\"message\">\n        <div class=\"flex flex-column align-items-start\" style=\"flex: 1\">\n          <div class=\"flex align-items-center gap-2\">\n            <img src=\"https://qa.iptdev.com.co/assets/logos/reading.png\" style=\"width: 65px;\" shape=\"circle\" />\n            <span class=\"font-bold text-900\">Jacob</span>\n          </div>\n          <div class=\"font-medium text-lg my-3 text-900\">{{ messageInfo }}</div>\n        </div>\n      </ng-template>\n    </p-toast>\n    <i class=\"pi pi-exclamation-circle cursor-pointer w-auto mb-4\" (click)=\"showConfirm()\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n    <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\n      <div class=\"container__body__select flex justify-content-center flex-wrap\">\n        <div class=\"container__type__payments\" *ngIf=\"isSelectionOptionPayments\">\n          <div class=\"flex flex-column gap-3\">\n            <h3>\u00BFComo quieres pagar?</h3>\n            <div *ngFor=\"let category of OptionPayments; index as ind\" class=\"field-checkbox\">\n              <p-radioButton\n                [inputId]=\"category.key\"\n                name=\"category\"\n                [value]=\"category\"\n                [(ngModel)]=\"selectedOptionPayments\"\n                [disabled]=\"disableweekdays[ind]\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"selectOpcionsPayments($event)\"\n              ></p-radioButton>\n              <label [for]=\"category.key\" class=\"ml-2\">\n                {{ category.name }}\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"container__opstion__instalations\" *ngIf=\"!isSelectionOptionPayments\">\n          <!-- Vista para la opci\u00F3n de pago \"Instalaciones\" -->\n          <div *ngIf=\"getViewBasedOnPaymentOption() === 'in'\">\n            <div class=\"container__info flex flex-column align-items-center justify-content-center mt-1 mb-4\" *ngIf=\"isEditBillingData\">\n\n              <img\n              src=\"https://qa.iptdev.com.co/assets/logos/lobo-web.png\"\n              alt=\"Receipt Icon\"\n              shape=\"circle\"\n              class=\"circular-image\"\n            />\n              <strong>{{ codSelfFormStepFour.get('invoicing_name')?.value }} {{ codSelfFormStepFour.get('invoicing_Apellido')?.value }}</strong>\n              <span>{{ getIdTypeDescription(codSelfFormStepFour.get('invoicing_idType')?.value) }} {{ codSelfFormStepFour.get('invoicing_document')?.value }}</span>\n\n              <div class=\"container-button\">\n                <ipt-button\n                  [label]=\"'Modificar Datos'\"\n                  (onClick)=\"editBillingData()\"\n                  [primary]=\"false\">\n                </ipt-button>\n              </div>\n            </div>\n            <div class=\"m-3\" *ngIf=\"!isEditBillingData\">\n              <h3>Completa los nuevos datos para la emision de tu factura</h3>\n              <div class=\"flex gap-1 md:gap-4 xl:gap-8 m-1 p-2 border-round bg-blue-500 text-white\">\n                <div class=\"container_icon flex mr-4 justify-content-center align-items-start mt-1\">\n                  <i class=\"pi pi-info-circle cursor-pointer w-auto mb-4\" pTooltip=\"Mas info.\" tooltipPosition=\"bottom\"></i>\n                </div>\n                <div class=\"flex flex-column container_info_span flex align-items-center justify-content-center\">\n                  <span>Si proporcionas datos de un tercero, confirmas que los datos son correctos y que tienes su consentimiento para el uso de la informacion. Estos datos se trataran de acuerdo a nuestra <a href=\"\">Declaracion de Privacidad</a></span>\n                </div>\n              </div>\n              <div>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Nombres'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_name']\"\n                ></ipt-input>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Apellido'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_Apellido']\"\n                ></ipt-input>\n                <ipt-select\n                  [initialValue]=\"codSelfFormStepFour.controls['invoicing_idType'].value\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_idType']\"\n                  [selectCode]=\"codSelfFormStepFour.controls['invoicing_idType'].value === null ? 'Tipo de documento' : codSelfFormStepFour.controls['invoicing_idType'].value\"\n                  [isRequired]=\"true\"\n                  [data]=\"idTypes\"\n                  (eventSelect)=\"selectIdType($event)\"\n                  [defaultText]=\"'Tipo de documento'\"\n                ></ipt-select>\n                <ipt-input\n                  [inputType]=\"'text'\"\n                  [placeHolder]=\"'Documento'\"\n                  [control]=\"codSelfFormStepFour.controls['invoicing_document']\"\n                ></ipt-input>\n              </div>\n              <div class=\"flex justify-content-end mt-3 align-items-center gap-3\">\n                <button\n                  pButton\n                  [disabled]=\"!codSelfFormStepFour.valid\"\n                  label=\"Continuar\"\n                  type=\"button\"\n                  (click)=\"updateDatosBillingData()\"\n                ></button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Vista para la opci\u00F3n de pago \"Transferencia\" -->\n          <div *ngIf=\"getViewBasedOnPaymentOption() === 'tr'\">\n            <h3>Completa los datos para Transferencia</h3>\n            <!-- Aqu\u00ED puedes agregar el formulario espec\u00EDfico para Transferencia -->\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <button\n        pButton\n        icon=\"pi pi-arrow-left\"\n        type=\"button\"\n        (click)=\"back()\"\n      ></button>\n      <button\n        *ngIf=\"!isSelectionOptionPayments && isEditBillingData && codSelfFormStepFour.valid\"\n        pButton\n        label=\"Guardar\"\n        type=\"button\"\n        (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n<div>\n  <pre>{{ codSelfFormStepFour.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepFour.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}.error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.circular-image{width:50px;height:50px;border-radius:50%;object-fit:cover;border:none}.container-button{width:10rem;margin-top:3%}\n"] }]
@@ -7627,13 +7630,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], completed: [{
                 type: Output
+            }], action: [{
+                type: Output
             }] } });
 
 class CodSelfManagedComponent {
-    constructor(baseService, commercialService) {
+    constructor(baseService, commercialService, codSelfManagedFormControls, localStorageCodSelfManaged) {
         this.baseService = baseService;
         this.commercialService = commercialService;
+        this.codSelfManagedFormControls = codSelfManagedFormControls;
+        this.localStorageCodSelfManaged = localStorageCodSelfManaged;
+        this.okCreatedCOD = new EventEmitter();
         this.currentStep = 0;
+        this.loaderMessage = '';
+        this.isLoading = false;
+        this.formSteps = 4;
+        this.codCreationSubscription = null;
         this.countInitialStep = 0;
         this.items = [
             { label: 'Datos', id: '1' },
@@ -7677,18 +7689,142 @@ class CodSelfManagedComponent {
         this.idTypes = idTypes;
         console.log(this.idTypes);
     }
+    getFormAction(action) {
+        if (!this.financingData && this.localStorageCodSelfManaged.getCodFormData(4, 'payment_method') === '1') {
+            Swal.fire({
+                title: 'Querido asesor',
+                text: 'Debe hacer el cálculo de las cuotas en el paso 4',
+                icon: 'error'
+            });
+            return;
+        }
+        const totalData = [];
+        this.subscription = this.codSelfManagedFormControls.getControlValues().subscribe((controls) => {
+            for (let i = 1; i <= this.formSteps; i++) {
+                let controlsByStep = controls[i - 1];
+                controlsByStep.forEach(control => {
+                    let value = this.localStorageCodSelfManaged.getCodFormData(i, control.name);
+                    totalData.push({
+                        control: control.name,
+                        isRequired: control.required,
+                        value,
+                        description: control.description
+                    });
+                });
+            }
+            // Validar errores
+            for (let i = 0; i < totalData.length; i++) {
+                const element = totalData[i];
+                if (!element.value && element.isRequired) {
+                    Swal.fire({
+                        title: 'Error Form Action Validate Error',
+                        text: `Revisar el campo: "${element.description}"`,
+                        icon: 'error'
+                    });
+                    break;
+                }
+            }
+            if (action === 'create')
+                this.createCOD(totalData);
+        });
+        this.subscription?.unsubscribe();
+    }
+    createCOD(totalData) {
+        if (this.codCreationSubscription && !this.codCreationSubscription.closed) {
+            return;
+        }
+        this.isLoading = true;
+        this.loaderMessage = 'Creando COD, espere un momento';
+        let request = this.getCreateCOD(totalData);
+        console.log(request);
+        // this.commercialService.createCOD(request).subscribe({
+        //   next: (response: any) => {
+        //     if (response.message.code === 1) {
+        //       this.isLoading = false;
+        //       this.loaderMessage = '';
+        //       Swal.fire({
+        //         title: 'Perfecto!',
+        //         text: 'El COD ha sido creado exitosamente.',
+        //         icon: 'success'
+        //       })
+        //       this.localStorageCodSelfManaged.clearData();
+        //       this.okCreatedCOD.emit(true);
+        //     }else{
+        //       this.isLoading = false;
+        //       this.loaderMessage = '';
+        //       Swal.fire({
+        //         title: 'Warning!',
+        //         text: response.message.message,
+        //         icon: 'error'
+        //       })
+        //     }
+        //   },
+        //   error: (err: any) => {
+        //     this.isLoading = false;
+        //     this.loaderMessage = '';
+        //     Swal.fire({
+        //       title: 'Error in cod creation',
+        //       text: err.message,
+        //       icon: 'error'
+        //     })
+        //   },
+        //   complete: () => {
+        //     this.codCreationSubscription = null;
+        //   }
+        // })
+    }
+    getCreateCOD(data) {
+        let request = {
+            token: this.baseService.getUserToken(),
+            student_name: data.filter(data => data.control === 'student_name')[0].value,
+            student_last_name: data.filter(data => data.control === 'student_last_name')[0].value,
+            student_id_card_type: data.filter(data => data.control === 'student_id_card_type')[0].value,
+            student_id_card: data.filter(data => data.control === 'student_id_card')[0].value,
+            gender: data.filter(data => data.control === 'gender')[0].value,
+            birthdate: data.filter(data => data.control === 'birthdate')[0].value,
+            age: data.filter(data => data.control === 'age')[0].value,
+            country: data.filter(data => data.control === 'country')[0].value,
+            state: data.filter(data => data.control === 'state')[0].value,
+            city: data.filter(data => data.control === 'city')[0].value,
+            student_email: data.filter(data => data.control === 'student_email')[0].value,
+            student_phone_indicative: data.filter(data => data.control === 'student_phone_indicative')[0].value,
+            student_phone_number: data.filter(data => data.control === 'student_phone_number')[0].value,
+            educational_level: data.filter(data => data.control === 'grade')[0].value,
+            agreement_by_category: data.filter(data => data.control === 'agreement_by_category')[0].value,
+            academic_plan: data.filter(data => data.control === 'academic_plan')[0].value,
+            course_type: data.filter(data => data.control === 'course_type')[0].value,
+            english_level: data.filter(data => data.control === 'english_level')[0].value,
+            availible_courses: data.filter(data => data.control === 'availible_courses')[0].value,
+            course_modality: data.filter(data => data.control === 'course_modality')[0].value,
+            program_price: data.filter(data => data.control === 'program_price')[0].value,
+            payment_date: data.filter(data => data.control === 'payment_date')[0].value,
+            payment_method: data.filter(data => data.control === 'payment_method')[0].value,
+            quota_times: data.filter(data => data.control === 'quota_times')[0].value,
+            total_price: data.filter(data => data.control === 'total_price')[0].value,
+            paid_level: data.filter(data => data.control === 'paid_level')[0].value,
+            payment_dates: this.financingData,
+            optionsPayments: data.filter(data => data.control === 'optionsPayments')[0].value,
+            invoicing_name: data.filter(data => data.control === 'invoicing_name')[0].value,
+            invoicing_Apellido: data.filter(data => data.control === 'invoicing_Apellido')[0].value,
+            invoicing_idType: data.filter(data => data.control === 'invoicing_idType')[0].value,
+            invoicing_document: data.filter(data => data.control === 'invoicing_document')[0].value,
+        };
+        return request;
+    }
 }
-CodSelfManagedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, deps: [{ token: BaseService }, { token: CommercialService }], target: i0.ɵɵFactoryTarget.Component });
-CodSelfManagedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfManagedComponent, selector: "ipt-cod-self-managed", inputs: { user: "user", scorePlacementTest: "scorePlacementTest", codPrevious: "codPrevious" }, ngImport: i0, template: "<p-steps [model]=\"items\" [(activeIndex)]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\" ></p-steps>\n\n<p-tabView [activeIndex]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\">\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-one (completed)=\"changeStep($event)\" [userStudent]=\"user\" (idTypesChanged)=\"handleIdTypesChanged($event)\"></app-cod-self-form-step-one>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-two (completed)=\"changeStep($event)\" [codPrevious]=\"codPrevious\" [scorePlacementTest]=\"scorePlacementTest\"></app-cod-self-form-step-two>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-three (completed)=\"changeStep($event)\" (financingData)=\"saveFinancingData($event)\"></app-cod-self-form-step-three>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-four (completed)=\"changeStep($event)\" [idTypes]=\"idTypes\"></app-cod-self-form-step-four>\n  </p-tabPanel>\n</p-tabView>\n", styles: [":host ::ng-deep .p-tabview-nav{display:none!important}\n"], dependencies: [{ kind: "component", type: i3$1.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass"], outputs: ["activeIndexChange"] }, { kind: "component", type: i6$2.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i6$2.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: CodSelfFormStepOneComponent, selector: "app-cod-self-form-step-one", inputs: ["userStudent"], outputs: ["completed", "idTypesChanged"] }, { kind: "component", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two", inputs: ["scorePlacementTest", "codPrevious"], outputs: ["completed"] }, { kind: "component", type: CodSelfFormStepThreeComponent, selector: "app-cod-self-form-step-three", outputs: ["completed", "financingData"] }, { kind: "component", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", inputs: ["idTypes"], outputs: ["completed"] }] });
+CodSelfManagedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, deps: [{ token: BaseService }, { token: CommercialService }, { token: CodSelfManagedControls }, { token: LocalStorageCodSelfMaganedService }], target: i0.ɵɵFactoryTarget.Component });
+CodSelfManagedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfManagedComponent, selector: "ipt-cod-self-managed", inputs: { user: "user", scorePlacementTest: "scorePlacementTest", codPrevious: "codPrevious" }, outputs: { okCreatedCOD: "okCreatedCOD" }, ngImport: i0, template: "<p-steps [model]=\"items\" [(activeIndex)]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\" ></p-steps>\n\n<p-tabView [activeIndex]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\">\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-one (completed)=\"changeStep($event)\" [userStudent]=\"user\" (idTypesChanged)=\"handleIdTypesChanged($event)\"></app-cod-self-form-step-one>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-two (completed)=\"changeStep($event)\" [codPrevious]=\"codPrevious\" [scorePlacementTest]=\"scorePlacementTest\"></app-cod-self-form-step-two>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-three (completed)=\"changeStep($event)\" (financingData)=\"saveFinancingData($event)\"></app-cod-self-form-step-three>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-four (completed)=\"changeStep($event)\" [idTypes]=\"idTypes\" (action)=\"getFormAction($event)\"></app-cod-self-form-step-four>\n  </p-tabPanel>\n</p-tabView>\n", styles: [":host ::ng-deep .p-tabview-nav{display:none!important}\n"], dependencies: [{ kind: "component", type: i5$1.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass"], outputs: ["activeIndexChange"] }, { kind: "component", type: i6$2.TabView, selector: "p-tabView", inputs: ["orientation", "style", "styleClass", "controlClose", "scrollable", "activeIndex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i6$2.TabPanel, selector: "p-tabPanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: CodSelfFormStepOneComponent, selector: "app-cod-self-form-step-one", inputs: ["userStudent"], outputs: ["completed", "idTypesChanged"] }, { kind: "component", type: CodSelfFormStepTwoComponent, selector: "app-cod-self-form-step-two", inputs: ["scorePlacementTest", "codPrevious"], outputs: ["completed"] }, { kind: "component", type: CodSelfFormStepThreeComponent, selector: "app-cod-self-form-step-three", outputs: ["completed", "financingData"] }, { kind: "component", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", inputs: ["idTypes"], outputs: ["completed", "action"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfManagedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ipt-cod-self-managed', template: "<p-steps [model]=\"items\" [(activeIndex)]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\" ></p-steps>\n\n<p-tabView [activeIndex]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\">\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-one (completed)=\"changeStep($event)\" [userStudent]=\"user\" (idTypesChanged)=\"handleIdTypesChanged($event)\"></app-cod-self-form-step-one>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-two (completed)=\"changeStep($event)\" [codPrevious]=\"codPrevious\" [scorePlacementTest]=\"scorePlacementTest\"></app-cod-self-form-step-two>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-three (completed)=\"changeStep($event)\" (financingData)=\"saveFinancingData($event)\"></app-cod-self-form-step-three>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-four (completed)=\"changeStep($event)\" [idTypes]=\"idTypes\"></app-cod-self-form-step-four>\n  </p-tabPanel>\n</p-tabView>\n", styles: [":host ::ng-deep .p-tabview-nav{display:none!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: BaseService }, { type: CommercialService }]; }, propDecorators: { user: [{
+            args: [{ selector: 'ipt-cod-self-managed', template: "<p-steps [model]=\"items\" [(activeIndex)]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\" ></p-steps>\n\n<p-tabView [activeIndex]=\"currentStep\" (activeIndexChange)=\"currentStep = $event\">\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-one (completed)=\"changeStep($event)\" [userStudent]=\"user\" (idTypesChanged)=\"handleIdTypesChanged($event)\"></app-cod-self-form-step-one>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-two (completed)=\"changeStep($event)\" [codPrevious]=\"codPrevious\" [scorePlacementTest]=\"scorePlacementTest\"></app-cod-self-form-step-two>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-three (completed)=\"changeStep($event)\" (financingData)=\"saveFinancingData($event)\"></app-cod-self-form-step-three>\n  </p-tabPanel>\n  <p-tabPanel [disabled]=\"true\">\n    <app-cod-self-form-step-four (completed)=\"changeStep($event)\" [idTypes]=\"idTypes\" (action)=\"getFormAction($event)\"></app-cod-self-form-step-four>\n  </p-tabPanel>\n</p-tabView>\n", styles: [":host ::ng-deep .p-tabview-nav{display:none!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: BaseService }, { type: CommercialService }, { type: CodSelfManagedControls }, { type: LocalStorageCodSelfMaganedService }]; }, propDecorators: { user: [{
                 type: Input
             }], scorePlacementTest: [{
                 type: Input
             }], codPrevious: [{
                 type: Input
+            }], okCreatedCOD: [{
+                type: Output
             }] } });
 
 class codSelfManagedModule {