iptdevs-design-system 3.1.640 → 3.1.641

package/fesm2020/iptdevs-design-system.mjs

@@ -7441,10 +7441,10 @@ class CodSelfFormStepThreeComponent extends CodSelfManagedSteps {
     }
 }
 CodSelfFormStepThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepThreeComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MessageService }, { token: CommercialService }, { token: BaseService }, { token: CodSelfManagedControls }, { token: CalculateQuotesService }], target: i0.ɵɵFactoryTarget.Component });
-CodSelfFormStepThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepThreeComponent, selector: "app-cod-self-form-step-three", outputs: { completed: "completed", financingData: "financingData" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Pagos</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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n\n      <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepThree\" class=\"grid mt-2 flex flex-column align-items-center\">\n\n        <div class=\"container_selects col-12\">\n          <ipt-select\n            [initialValue]=\"codSelfFormStepThree.controls['payment_method'].value\"\n            [control]=\"codSelfFormStepThree.controls['payment_method']\"\n            (eventSelect)=\"selectPaymentMethod($event)\"\n            [data]=\"paymentMethods\"\n            [defaultText]=\"'M\u00E9todo de pago'\"\n          ></ipt-select>\n          <ipt-loader *ngIf=\"feeResponse\"></ipt-loader>\n\n          <div class=\"col-12\" *ngIf=\"thereArePlans\">\n            <p-table\n              [value]=\"dataPrices\"\n              [tableStyle]=\"{'min-width': '100%'}\"\n              [rowHover]=\"true\"\n            >\n              <ng-template pTemplate=\"caption\">\n                <div class=\"flex align-items-center\">\n                  Click en niveles a cancelar\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\"></th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cancelar</th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cuotas</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\" let-data let-rowIndex=\"rowIndex\">\n                <tr [class.selected-row]=\"selectedRow === rowIndex\" (click)=\"selectLevels(data, rowIndex)\">\n                  <td class=\"pt-0 pb-0 text-center\">\n                    <p-radioButton [value]=\"rowIndex\" formControlName=\"selectedRow\"></p-radioButton>\n                  </td>\n                  <td class=\"pt-1 pb-1\">{{ data.paid_level }} Nivel(es)</td>\n                  <td class=\"pt-1 pb-1 text-center\">{{ data.fee_number }}</td>\n                </tr>\n              </ng-template>\n            </p-table>\n          </div>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [inputType]=\"'text'\"\n            [placeHolder]=\"'Monto total de la matr\u00EDcula'\"\n            [control]=\"codSelfFormStepThree.controls['total_price']\"\n            [withPipe]=\"true\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [withPipe]=\"true\"\n            [inputType]=\"'text'\"\n            [control]=\"codSelfFormStepThree.controls['program_price']\"\n            [placeHolder]=\"'Valor total del programa'\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"flex justify-content-center flex-wrap m-2\">\n          <!-- <button *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && !isFinancing\" [disabled]=\"isFinancing || codSelfFormStepThree.controls['payment_method'].value !== '1'\"type=\"submit\" class=\"ml-auto p-button-sm p-button-secondary\" (click)=\"showTable()\" pButton label=\"Calcular cuotas\" icon=\"pi pi-sliders-h\"></button> -->\n          <!-- <div *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\" class=\"flex align-items-center\">\n            <button pButton class=\"p-button-sm ml-auto\" label=\"Nuevo c\u00E1lculo\" (click)=\"calculateNewQuotes()\" lab icon=\"pi pi-replay\"></button>\n          </div> -->\n          <!-- <button [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\" type=\"submit\" (click)=\"sendForm()\" pButton label=\"Siguiente\" icon=\"pi pi-arrow-right\"></button> -->\n        </div>\n\n        <!-- Tabla de financiaci\u00F3n -->\n        <div class=\"col-12\" *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\">\n          <!-- <span>NOTA: Deber\u00E1 pagar la matr\u00EDcula y la primera cuota para completar el proceso de inscripci\u00F3n.</span> -->\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><strong>NOTA:</strong> Deber\u00E1 pagar la matr\u00EDcula y la primera cuota <strong>(total: {{ totalInitialPaymentSpan | currency:'USD':'symbol' }})</strong> para completar el proceso de inscripci\u00F3n.</span><br>\n              <span>Recuerda que las fechas cambian de acuerdo a la fecha que comienza el plan</span>\n            </div>\n\n          </div>\n          <p-table\n            *ngIf=\"!isLoadingSelectLevels\"\n            [value]=\"dataFinancing\"\n            [tableStyle]=\"{'min-width': '100%'}\"\n            [rowHover]=\"true\"\n          >\n            <ng-template pTemplate=\"caption\">\n              <div class=\"flex align-items-center\">\n                C\u00E1lculo de cuotas\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n              <tr>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">#</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Valor</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Fecha</th>\n              </tr>\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-data>\n              <tr>\n                <td class=\"p-0 text-center text-sm\">{{ data[0] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[1] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[2] }}</td>\n              </tr>\n            </ng-template>\n          </p-table>\n          <ipt-loader *ngIf=\"isLoadingSelectLevels\"></ipt-loader>\n        </div>\n\n        <!-- ---------------------- -->\n\n      </form>\n    </div>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\n      <button\n      pButton\n      icon=\"pi pi-arrow-left\"\n      type=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\"\n      (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n\n\n\n<div>\n  <pre>{{ codSelfFormStepThree.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepThree.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):hover{color:#1c77f7!important}.selected-row{background-color:#bfdbfe!important;color:#1c77f7!important}tr{cursor:pointer}td,.header-reports-advisers{font-family:Poppins,sans-serif}:host ::ng-deep .p-datatable .p-datatable-header{background:#f8f9fa;color:#f8f9fa;border:none;padding:1rem;font-weight:700;background-color:#1c77f7;border-radius:10px 10px 0 0}:host ::ng-deep .p-datatable{position:relative;border-radius:10px;border:1px solid #1c77f7}:host ::ng-deep .p-datatable>.p-datatable-wrapper{border-radius:0 0 10px 10px}.container_selects{width:16rem}.p-datatable .p-datatable-tbody>tr>td{padding:.1rem .5rem}.p-datatable .p-datatable-tbody>tr>td{padding:1rem 0rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal", "disabledSel"], outputs: ["dateSelected"] }, { kind: "component", type: LoaderComponent, selector: "ipt-loader", inputs: ["message", "isDialog"] }, { 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: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: 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: "component", type: i13.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+CodSelfFormStepThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepThreeComponent, selector: "app-cod-self-form-step-three", outputs: { completed: "completed", financingData: "financingData" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Pagos</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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n\n      <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepThree\" class=\"grid mt-2 flex flex-column align-items-center\">\n\n        <div class=\"container_selects col-12\">\n          <ipt-select\n            [initialValue]=\"codSelfFormStepThree.controls['payment_method'].value\"\n            [control]=\"codSelfFormStepThree.controls['payment_method']\"\n            (eventSelect)=\"selectPaymentMethod($event)\"\n            [data]=\"paymentMethods\"\n            [defaultText]=\"'M\u00E9todo de pago'\"\n          ></ipt-select>\n          <ipt-loader *ngIf=\"feeResponse\"></ipt-loader>\n\n          <div class=\"col-12\" *ngIf=\"thereArePlans\">\n            <p-table\n              [value]=\"dataPrices\"\n              [tableStyle]=\"{'min-width': '100%'}\"\n              [rowHover]=\"true\"\n            >\n              <ng-template pTemplate=\"caption\">\n                <div class=\"flex align-items-center\">\n                  Click en niveles a cancelar\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\"></th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cancelar</th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cuotas</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\" let-data let-rowIndex=\"rowIndex\">\n                <tr [class.selected-row]=\"selectedRow === rowIndex\" (click)=\"selectLevels(data, rowIndex)\">\n                  <td class=\"pt-0 pb-0 text-center\">\n                    <p-radioButton [value]=\"rowIndex\" formControlName=\"selectedRow\"></p-radioButton>\n                  </td>\n                  <td class=\"pt-1 pb-1\">{{ data.paid_level }} Nivel(es)</td>\n                  <td class=\"pt-1 pb-1 text-center\">{{ data.fee_number }}</td>\n                </tr>\n              </ng-template>\n            </p-table>\n          </div>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [inputType]=\"'text'\"\n            [placeHolder]=\"'Monto total de la matr\u00EDcula'\"\n            [control]=\"codSelfFormStepThree.controls['total_price']\"\n            [withPipe]=\"true\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [withPipe]=\"true\"\n            [inputType]=\"'text'\"\n            [control]=\"codSelfFormStepThree.controls['program_price']\"\n            [placeHolder]=\"'Valor total del programa'\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"flex justify-content-center flex-wrap m-2\">\n          <!-- <button *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && !isFinancing\" [disabled]=\"isFinancing || codSelfFormStepThree.controls['payment_method'].value !== '1'\"type=\"submit\" class=\"ml-auto p-button-sm p-button-secondary\" (click)=\"showTable()\" pButton label=\"Calcular cuotas\" icon=\"pi pi-sliders-h\"></button> -->\n          <!-- <div *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\" class=\"flex align-items-center\">\n            <button pButton class=\"p-button-sm ml-auto\" label=\"Nuevo c\u00E1lculo\" (click)=\"calculateNewQuotes()\" lab icon=\"pi pi-replay\"></button>\n          </div> -->\n          <!-- <button [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\" type=\"submit\" (click)=\"sendForm()\" pButton label=\"Siguiente\" icon=\"pi pi-arrow-right\"></button> -->\n        </div>\n\n        <!-- Tabla de financiaci\u00F3n -->\n        <div class=\"col-12\" *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\">\n          <!-- <span>NOTA: Deber\u00E1 pagar la matr\u00EDcula y la primera cuota para completar el proceso de inscripci\u00F3n.</span> -->\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><strong>NOTA:</strong> Deber\u00E1 pagar la matr\u00EDcula y la primera cuota <strong>(total: ${{ totalInitialPaymentSpan }})</strong> para completar el proceso de inscripci\u00F3n.</span><br>\n              <span>Recuerda que las fechas cambian de acuerdo a la fecha que comienza el plan</span>\n            </div>\n\n          </div>\n          <p-table\n            *ngIf=\"!isLoadingSelectLevels\"\n            [value]=\"dataFinancing\"\n            [tableStyle]=\"{'min-width': '100%'}\"\n            [rowHover]=\"true\"\n          >\n            <ng-template pTemplate=\"caption\">\n              <div class=\"flex align-items-center\">\n                C\u00E1lculo de cuotas\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n              <tr>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">#</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Valor</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Fecha</th>\n              </tr>\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-data>\n              <tr>\n                <td class=\"p-0 text-center text-sm\">{{ data[0] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[1] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[2] }}</td>\n              </tr>\n            </ng-template>\n          </p-table>\n          <ipt-loader *ngIf=\"isLoadingSelectLevels\"></ipt-loader>\n        </div>\n\n        <!-- ---------------------- -->\n\n      </form>\n    </div>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\n      <button\n      pButton\n      icon=\"pi pi-arrow-left\"\n      type=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\"\n      (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n\n\n\n<div>\n  <pre>{{ codSelfFormStepThree.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepThree.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):hover{color:#1c77f7!important}.selected-row{background-color:#bfdbfe!important;color:#1c77f7!important}tr{cursor:pointer}td,.header-reports-advisers{font-family:Poppins,sans-serif}:host ::ng-deep .p-datatable .p-datatable-header{background:#f8f9fa;color:#f8f9fa;border:none;padding:1rem;font-weight:700;background-color:#1c77f7;border-radius:10px 10px 0 0}:host ::ng-deep .p-datatable{position:relative;border-radius:10px;border:1px solid #1c77f7}:host ::ng-deep .p-datatable>.p-datatable-wrapper{border-radius:0 0 10px 10px}.container_selects{width:16rem}.p-datatable .p-datatable-tbody>tr>td{padding:.1rem .5rem}.p-datatable .p-datatable-tbody>tr>td{padding:1rem 0rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal", "disabledSel"], outputs: ["dateSelected"] }, { kind: "component", type: LoaderComponent, selector: "ipt-loader", inputs: ["message", "isDialog"] }, { 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: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: 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: "component", type: i13.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodSelfFormStepThreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cod-self-form-step-three', template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Pagos</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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n\n      <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepThree\" class=\"grid mt-2 flex flex-column align-items-center\">\n\n        <div class=\"container_selects col-12\">\n          <ipt-select\n            [initialValue]=\"codSelfFormStepThree.controls['payment_method'].value\"\n            [control]=\"codSelfFormStepThree.controls['payment_method']\"\n            (eventSelect)=\"selectPaymentMethod($event)\"\n            [data]=\"paymentMethods\"\n            [defaultText]=\"'M\u00E9todo de pago'\"\n          ></ipt-select>\n          <ipt-loader *ngIf=\"feeResponse\"></ipt-loader>\n\n          <div class=\"col-12\" *ngIf=\"thereArePlans\">\n            <p-table\n              [value]=\"dataPrices\"\n              [tableStyle]=\"{'min-width': '100%'}\"\n              [rowHover]=\"true\"\n            >\n              <ng-template pTemplate=\"caption\">\n                <div class=\"flex align-items-center\">\n                  Click en niveles a cancelar\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\"></th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cancelar</th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cuotas</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\" let-data let-rowIndex=\"rowIndex\">\n                <tr [class.selected-row]=\"selectedRow === rowIndex\" (click)=\"selectLevels(data, rowIndex)\">\n                  <td class=\"pt-0 pb-0 text-center\">\n                    <p-radioButton [value]=\"rowIndex\" formControlName=\"selectedRow\"></p-radioButton>\n                  </td>\n                  <td class=\"pt-1 pb-1\">{{ data.paid_level }} Nivel(es)</td>\n                  <td class=\"pt-1 pb-1 text-center\">{{ data.fee_number }}</td>\n                </tr>\n              </ng-template>\n            </p-table>\n          </div>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [inputType]=\"'text'\"\n            [placeHolder]=\"'Monto total de la matr\u00EDcula'\"\n            [control]=\"codSelfFormStepThree.controls['total_price']\"\n            [withPipe]=\"true\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [withPipe]=\"true\"\n            [inputType]=\"'text'\"\n            [control]=\"codSelfFormStepThree.controls['program_price']\"\n            [placeHolder]=\"'Valor total del programa'\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"flex justify-content-center flex-wrap m-2\">\n          <!-- <button *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && !isFinancing\" [disabled]=\"isFinancing || codSelfFormStepThree.controls['payment_method'].value !== '1'\"type=\"submit\" class=\"ml-auto p-button-sm p-button-secondary\" (click)=\"showTable()\" pButton label=\"Calcular cuotas\" icon=\"pi pi-sliders-h\"></button> -->\n          <!-- <div *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\" class=\"flex align-items-center\">\n            <button pButton class=\"p-button-sm ml-auto\" label=\"Nuevo c\u00E1lculo\" (click)=\"calculateNewQuotes()\" lab icon=\"pi pi-replay\"></button>\n          </div> -->\n          <!-- <button [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\" type=\"submit\" (click)=\"sendForm()\" pButton label=\"Siguiente\" icon=\"pi pi-arrow-right\"></button> -->\n        </div>\n\n        <!-- Tabla de financiaci\u00F3n -->\n        <div class=\"col-12\" *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\">\n          <!-- <span>NOTA: Deber\u00E1 pagar la matr\u00EDcula y la primera cuota para completar el proceso de inscripci\u00F3n.</span> -->\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><strong>NOTA:</strong> Deber\u00E1 pagar la matr\u00EDcula y la primera cuota <strong>(total: {{ totalInitialPaymentSpan | currency:'USD':'symbol' }})</strong> para completar el proceso de inscripci\u00F3n.</span><br>\n              <span>Recuerda que las fechas cambian de acuerdo a la fecha que comienza el plan</span>\n            </div>\n\n          </div>\n          <p-table\n            *ngIf=\"!isLoadingSelectLevels\"\n            [value]=\"dataFinancing\"\n            [tableStyle]=\"{'min-width': '100%'}\"\n            [rowHover]=\"true\"\n          >\n            <ng-template pTemplate=\"caption\">\n              <div class=\"flex align-items-center\">\n                C\u00E1lculo de cuotas\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n              <tr>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">#</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Valor</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Fecha</th>\n              </tr>\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-data>\n              <tr>\n                <td class=\"p-0 text-center text-sm\">{{ data[0] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[1] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[2] }}</td>\n              </tr>\n            </ng-template>\n          </p-table>\n          <ipt-loader *ngIf=\"isLoadingSelectLevels\"></ipt-loader>\n        </div>\n\n        <!-- ---------------------- -->\n\n      </form>\n    </div>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\n      <button\n      pButton\n      icon=\"pi pi-arrow-left\"\n      type=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\"\n      (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n\n\n\n<div>\n  <pre>{{ codSelfFormStepThree.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepThree.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):hover{color:#1c77f7!important}.selected-row{background-color:#bfdbfe!important;color:#1c77f7!important}tr{cursor:pointer}td,.header-reports-advisers{font-family:Poppins,sans-serif}:host ::ng-deep .p-datatable .p-datatable-header{background:#f8f9fa;color:#f8f9fa;border:none;padding:1rem;font-weight:700;background-color:#1c77f7;border-radius:10px 10px 0 0}:host ::ng-deep .p-datatable{position:relative;border-radius:10px;border:1px solid #1c77f7}:host ::ng-deep .p-datatable>.p-datatable-wrapper{border-radius:0 0 10px 10px}.container_selects{width:16rem}.p-datatable .p-datatable-tbody>tr>td{padding:.1rem .5rem}.p-datatable .p-datatable-tbody>tr>td{padding:1rem 0rem!important}\n"] }]
+            args: [{ selector: 'app-cod-self-form-step-three', template: "<div class=\"container-main\">\n  <div class=\"container-form\">\n    <h2>Pagos</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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n\n      <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepThree\" class=\"grid mt-2 flex flex-column align-items-center\">\n\n        <div class=\"container_selects col-12\">\n          <ipt-select\n            [initialValue]=\"codSelfFormStepThree.controls['payment_method'].value\"\n            [control]=\"codSelfFormStepThree.controls['payment_method']\"\n            (eventSelect)=\"selectPaymentMethod($event)\"\n            [data]=\"paymentMethods\"\n            [defaultText]=\"'M\u00E9todo de pago'\"\n          ></ipt-select>\n          <ipt-loader *ngIf=\"feeResponse\"></ipt-loader>\n\n          <div class=\"col-12\" *ngIf=\"thereArePlans\">\n            <p-table\n              [value]=\"dataPrices\"\n              [tableStyle]=\"{'min-width': '100%'}\"\n              [rowHover]=\"true\"\n            >\n              <ng-template pTemplate=\"caption\">\n                <div class=\"flex align-items-center\">\n                  Click en niveles a cancelar\n                </div>\n              </ng-template>\n              <ng-template pTemplate=\"header\">\n                <tr>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\"></th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cancelar</th>\n                  <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Cuotas</th>\n                </tr>\n              </ng-template>\n              <ng-template pTemplate=\"body\" let-data let-rowIndex=\"rowIndex\">\n                <tr [class.selected-row]=\"selectedRow === rowIndex\" (click)=\"selectLevels(data, rowIndex)\">\n                  <td class=\"pt-0 pb-0 text-center\">\n                    <p-radioButton [value]=\"rowIndex\" formControlName=\"selectedRow\"></p-radioButton>\n                  </td>\n                  <td class=\"pt-1 pb-1\">{{ data.paid_level }} Nivel(es)</td>\n                  <td class=\"pt-1 pb-1 text-center\">{{ data.fee_number }}</td>\n                </tr>\n              </ng-template>\n            </p-table>\n          </div>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [inputType]=\"'text'\"\n            [placeHolder]=\"'Monto total de la matr\u00EDcula'\"\n            [control]=\"codSelfFormStepThree.controls['total_price']\"\n            [withPipe]=\"true\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"container_selects col-12\">\n          <ipt-input\n            [withPipe]=\"true\"\n            [inputType]=\"'text'\"\n            [control]=\"codSelfFormStepThree.controls['program_price']\"\n            [placeHolder]=\"'Valor total del programa'\"\n          ></ipt-input>\n        </div>\n\n        <div class=\"flex justify-content-center flex-wrap m-2\">\n          <!-- <button *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && !isFinancing\" [disabled]=\"isFinancing || codSelfFormStepThree.controls['payment_method'].value !== '1'\"type=\"submit\" class=\"ml-auto p-button-sm p-button-secondary\" (click)=\"showTable()\" pButton label=\"Calcular cuotas\" icon=\"pi pi-sliders-h\"></button> -->\n          <!-- <div *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\" class=\"flex align-items-center\">\n            <button pButton class=\"p-button-sm ml-auto\" label=\"Nuevo c\u00E1lculo\" (click)=\"calculateNewQuotes()\" lab icon=\"pi pi-replay\"></button>\n          </div> -->\n          <!-- <button [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\" type=\"submit\" (click)=\"sendForm()\" pButton label=\"Siguiente\" icon=\"pi pi-arrow-right\"></button> -->\n        </div>\n\n        <!-- Tabla de financiaci\u00F3n -->\n        <div class=\"col-12\" *ngIf=\"codSelfFormStepThree.controls['payment_method'].value === '1' && isFinancing\">\n          <!-- <span>NOTA: Deber\u00E1 pagar la matr\u00EDcula y la primera cuota para completar el proceso de inscripci\u00F3n.</span> -->\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><strong>NOTA:</strong> Deber\u00E1 pagar la matr\u00EDcula y la primera cuota <strong>(total: ${{ totalInitialPaymentSpan }})</strong> para completar el proceso de inscripci\u00F3n.</span><br>\n              <span>Recuerda que las fechas cambian de acuerdo a la fecha que comienza el plan</span>\n            </div>\n\n          </div>\n          <p-table\n            *ngIf=\"!isLoadingSelectLevels\"\n            [value]=\"dataFinancing\"\n            [tableStyle]=\"{'min-width': '100%'}\"\n            [rowHover]=\"true\"\n          >\n            <ng-template pTemplate=\"caption\">\n              <div class=\"flex align-items-center\">\n                C\u00E1lculo de cuotas\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"header\">\n              <tr>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">#</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Valor</th>\n                <th class=\"bg-blue-200 text-center font-medium pt-2 pb-2\">Fecha</th>\n              </tr>\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-data>\n              <tr>\n                <td class=\"p-0 text-center text-sm\">{{ data[0] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[1] }}</td>\n                <td class=\"p-0 text-center text-sm\">{{ data[2] }}</td>\n              </tr>\n            </ng-template>\n          </p-table>\n          <ipt-loader *ngIf=\"isLoadingSelectLevels\"></ipt-loader>\n        </div>\n\n        <!-- ---------------------- -->\n\n      </form>\n    </div>\n\n    <div class=\"flex justify-content-between mt-3 align-items-center gap-3\">\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\n      <button\n      pButton\n      icon=\"pi pi-arrow-left\"\n      type=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      [disabled]=\"!isFinancing && codSelfFormStepThree.controls['payment_method'].value === '1'\"\n      (click)=\"sendForm()\"\n      ></button>\n    </div>\n  </div>\n</div>\n\n\n\n\n<div>\n  <pre>{{ codSelfFormStepThree.value | json }}</pre>\n  <div>\n    <pre>{{ codSelfFormStepThree.valid | json }}</pre>\n  </div>\n</div>\n", styles: [".error-message{font-size:x-small;color:red}:host ::ng-deep .p-toast{width:20rem!important}.container-form{margin:5%;border-radius:6px;border:1px solid #2563eb;box-shadow:#3c40434d 0 1px 2px,#3c404326 0 2px 6px 2px;padding:1rem}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):hover{color:#1c77f7!important}.selected-row{background-color:#bfdbfe!important;color:#1c77f7!important}tr{cursor:pointer}td,.header-reports-advisers{font-family:Poppins,sans-serif}:host ::ng-deep .p-datatable .p-datatable-header{background:#f8f9fa;color:#f8f9fa;border:none;padding:1rem;font-weight:700;background-color:#1c77f7;border-radius:10px 10px 0 0}:host ::ng-deep .p-datatable{position:relative;border-radius:10px;border:1px solid #1c77f7}:host ::ng-deep .p-datatable>.p-datatable-wrapper{border-radius:0 0 10px 10px}.container_selects{width:16rem}.p-datatable .p-datatable-tbody>tr>td{padding:.1rem .5rem}.p-datatable .p-datatable-tbody>tr>td{padding:1rem 0rem!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i2$1.MessageService }, { type: CommercialService }, { type: BaseService }, { type: CodSelfManagedControls }, { type: CalculateQuotesService }]; }, propDecorators: { completed: [{
                 type: Output
             }], financingData: [{
@@ -7462,18 +7462,25 @@ class CodSelfFormStepFourComponent {
         this.messageAlertPlacementTest = false;
         this.OptionPayments = [
             { code: 1, key: 'si', name: 'Instalaciones' },
-            { code: 2, key: 'pa', name: 'Pago en Linea' },
-            { code: 3, key: 'ps', name: 'Transferencia' },
+            // {code: 2, key: 'pa',  name: 'Pago en Linea'},
+            // {code: 3, key: 'ps',  name: 'Transferencia'},
             // {code: 4, key: 'ef',  name: 'Efecty'},
         ];
         this.disableweekdays = [];
+        this.isSelectionOptionPayments = true;
+        this.initForm();
     }
     initForm() {
         this.codSelfFormStepFour = this.fb.group({});
     }
     back() {
         // Movernos al paso anterior
-        this.completed.emit(2);
+        if (!this.isSelectionOptionPayments) {
+            this.isSelectionOptionPayments = true;
+        }
+        else {
+            this.completed.emit(2);
+        }
     }
     sendForm() {
         // this.codSelfFormStepTwo.markAllAsTouched();
@@ -7493,22 +7500,29 @@ class CodSelfFormStepFourComponent {
     }
     selectOpcionsPayments(eve) {
         this.selectedOptionPayments = eve;
+        this.isSelectionOptionPayments = false;
         console.log(this.selectedOptionPayments);
-        if (this.selectedOptionPayments.length === 0) {
-            this.messageAlertPlacementTest = true;
+        if (this.selectedOptionPayments !== null) {
+            this.codSelfFormStepFour.controls['optionsPayments'].setValue(this.selectedOptionPayments[0].code);
         }
         else {
-            this.messageAlertPlacementTest = false;
+            this.codSelfFormStepFour.controls['optionsPayments'].setValue(null);
         }
+        // if (this.selectedOptionPayments.length === 0) {
+        //   this.messageAlertPlacementTest = true;
+        // }else{
+        //   this.messageAlertPlacementTest = false
+        // }
     }
     next() {
+        console.log(this.selectedOptionPayments);
     }
 }
 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", outputs: { completed: "completed" }, 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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n      <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\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      </form>\n    </div>\n\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-left\"\n      type=\"submit\"\n      (click)=\"next()\"\n      ></button>\n      <!-- <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      (click)=\"sendForm()\"\n      ></button> -->\n    </div>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
+CodSelfFormStepFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodSelfFormStepFourComponent, selector: "app-cod-self-form-step-four", outputs: { completed: "completed" }, 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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n      <div class=\"container__type__payments\" *ngIf=\"isSelectionOptionPayments\">\n        <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\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        </form>\n      </div>\n      <div class=\"container__opstion__instalations\" *ngIf=\"selectedOptionPayments[0].code === 1 && !isSelectionOptionPayments\">\n        <span>llegue aqui</span>\n      </div>\n      <div class=\"container__opstion__instalations\" *ngIf=\"selectedOptionPayments[0].code === 2 && !isSelectionOptionPayments\">\n      </div>\n      <div class=\"container__opstion__instalations\" *ngIf=\"selectedOptionPayments[0].code === 3 && !isSelectionOptionPayments\">\n      </div>\n    </div>\n\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      type=\"submit\"\n      (click)=\"next()\"\n      ></button>\n      <!-- <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      (click)=\"sendForm()\"\n      ></button> -->\n    </div>\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}\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: "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"] }] });
 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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n      <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\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      </form>\n    </div>\n\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-left\"\n      type=\"submit\"\n      (click)=\"next()\"\n      ></button>\n      <!-- <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      (click)=\"sendForm()\"\n      ></button> -->\n    </div>\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}\n"] }]
+            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    <div class=\"container__body__select flex justify-content-center flex-wrap\">\n      <div class=\"container__type__payments\" *ngIf=\"isSelectionOptionPayments\">\n        <form autocomplete=\"off\" [formGroup]=\"codSelfFormStepFour\" class=\"grid mt-2 flex flex-column align-items-center\">\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        </form>\n      </div>\n      <div class=\"container__opstion__instalations\" *ngIf=\"selectedOptionPayments[0].code === 1 && !isSelectionOptionPayments\">\n        <span>llegue aqui</span>\n      </div>\n      <div class=\"container__opstion__instalations\" *ngIf=\"selectedOptionPayments[0].code === 2 && !isSelectionOptionPayments\">\n      </div>\n      <div class=\"container__opstion__instalations\" *ngIf=\"selectedOptionPayments[0].code === 3 && !isSelectionOptionPayments\">\n      </div>\n    </div>\n\n      <!-- <span *ngIf=\"codSelfFormStepOne.invalid && codSelfFormStepOne.touched\" class=\"text-red-500 font-bold text-center mt-1 py-2 bg-red-100 w-full border-round-xl\">{{ errorMessage }}</span> -->\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=\"submit\"\n      (click)=\"back()\"\n      ></button>\n\n\n      <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      type=\"submit\"\n      (click)=\"next()\"\n      ></button>\n      <!-- <button\n      pButton\n      icon=\"pi pi-arrow-right\"\n      (click)=\"sendForm()\"\n      ></button> -->\n    </div>\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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i2$1.MessageService }]; }, propDecorators: { completed: [{
                 type: Output
             }] } });