iptdevs-design-system 3.1.83 → 3.1.90

package/fesm2020/iptdevs-design-system.mjs

@@ -696,7 +696,7 @@ TextLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         {{text}}
       </p>
     </a>
-  `, isInline: true, styles: [".text-link{font-family:Poppins,sans-serif;font-size:1.1rem;color:gray;display:flex;flex-direction:row}.text-link__image{height:1rem;background-position:center;fill:#0ff;-webkit-print-color-adjust:aqua;color-adjust:aqua}.text-link__paragraph{margin:0;text-align:end}a:hover,a:focus,.text-link:hover,.text-link:focus{color:#1c77f7;cursor:pointer}@media (max-width: 1200px){.text-link{font-size:.9rem;width:160px}}@media (max-width: 450px){.text-link{font-size:.9rem;width:150px}}\n"] });
+  `, isInline: true, styles: [".text-link{font-family:Poppins,sans-serif;font-size:1.1rem;color:gray;display:flex;flex-direction:row}.text-link__image{height:1rem;background-position:center;fill:#0ff}.text-link__paragraph{margin:0;text-align:end}a:hover,a:focus,.text-link:hover,.text-link:focus{color:#1c77f7;cursor:pointer}@media (max-width: 1200px){.text-link{font-size:.9rem;width:160px}}@media (max-width: 450px){.text-link{font-size:.9rem;width:150px}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TextLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ipt-text-link', template: `
@@ -706,7 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
         {{text}}
       </p>
     </a>
-  `, styles: [".text-link{font-family:Poppins,sans-serif;font-size:1.1rem;color:gray;display:flex;flex-direction:row}.text-link__image{height:1rem;background-position:center;fill:#0ff;-webkit-print-color-adjust:aqua;color-adjust:aqua}.text-link__paragraph{margin:0;text-align:end}a:hover,a:focus,.text-link:hover,.text-link:focus{color:#1c77f7;cursor:pointer}@media (max-width: 1200px){.text-link{font-size:.9rem;width:160px}}@media (max-width: 450px){.text-link{font-size:.9rem;width:150px}}\n"] }]
+  `, styles: [".text-link{font-family:Poppins,sans-serif;font-size:1.1rem;color:gray;display:flex;flex-direction:row}.text-link__image{height:1rem;background-position:center;fill:#0ff}.text-link__paragraph{margin:0;text-align:end}a:hover,a:focus,.text-link:hover,.text-link:focus{color:#1c77f7;cursor:pointer}@media (max-width: 1200px){.text-link{font-size:.9rem;width:160px}}@media (max-width: 450px){.text-link{font-size:.9rem;width:150px}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { text: [{
                 type: Input
             }], blank: [{
@@ -867,6 +867,11 @@ class UserService extends IPTGeneralService {
         this.generateRequestParams(params);
         return this.http.post(serviceUrl, this.httpOptions);
     }
+    obtainDataByUserLoged(params) {
+        let serviceUrl = this.SERVICE_URL + 'post/obtain/user/commercial/loged';
+        this.generateRequestParams(params);
+        return this.http.post(serviceUrl, this.httpOptions);
+    }
 }
 UserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: UserService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
 UserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: UserService, providedIn: 'root' });
@@ -4038,6 +4043,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }] } });
 
+class ModalReferredComponent {
+    constructor(fb, baseService, userService) {
+        this.fb = fb;
+        this.baseService = baseService;
+        this.userService = userService;
+        this.visibility = false;
+        this.userSelect = new EventEmitter();
+        this.modalClose = new EventEmitter(false);
+        this.userExists = false;
+        this.loading = [false, false, false, false];
+    }
+    ngOnInit() {
+        this.initForm();
+    }
+    closeModal() {
+        this.visibility = false;
+        this.modalClose.emit(false);
+    }
+    initForm() {
+        this.searchUserForm = this.fb.group({
+            searchUser: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(30)],],
+        });
+        const searchUserControl = this.searchUserForm.get('searchUser');
+        if (searchUserControl) {
+            searchUserControl.valueChanges.subscribe((value) => {
+                // this.modalClose.emit(false);
+            });
+        }
+    }
+    selectUser(data) {
+        this.userSelect.emit(data);
+    }
+    load(index, form) {
+        this.loading[index] = true;
+        setTimeout(() => (this.loading[index] = false), 1000);
+        this.search(form);
+    }
+    search(form) {
+        let request = {
+            token: this.baseService.getUserToken(),
+            param: form.value.searchUser,
+        };
+        this.userService.getStudent(request).subscribe((response) => {
+            if (response.data == null) {
+                Swal.fire({
+                    title: 'Oops...',
+                    text: 'No hay usuarios con los parámetros ingresados',
+                    icon: 'error',
+                });
+            }
+            else {
+                this.allUsers = response.data;
+                console.log(response.data);
+            }
+        });
+    }
+}
+ModalReferredComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ModalReferredComponent, deps: [{ token: i1$1.FormBuilder }, { token: BaseService }, { token: UserService }], target: i0.ɵɵFactoryTarget.Component });
+ModalReferredComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: ModalReferredComponent, selector: "cod-modal-referred", inputs: { visibility: "visibility" }, outputs: { userSelect: "userSelect", modalClose: "modalClose" }, ngImport: i0, template: "<main *ngIf=\"visibility\">\n  <div @fade class=\"modal_container\">\n    <div class=\"header_modal\">\n      <h1>Datos de quien lo refiere</h1>\n      <button (click)=\"closeModal()\">x</button>\n    </div>\n    <div class=\"grid_container\">\n      <div>\n          <section\n          id=\"container\"\n          class=\"flex flex-column bg-white border-round-2xl animate__animated animate__fadeInUp\"\n        >\n          <form\n            autocomplete=\"off\"\n            (ngSubmit)=\"search(searchUserForm)\"\n            class=\"form\"\n            [formGroup]=\"searchUserForm\"\n          >\n            <input\n              placeholder=\"Buscar por nombre, documento o tel\u00E9fono\"\n              [formControl]=\"$any(searchUserForm.controls['searchUser'])\"\n              type=\"text\"\n              pInputText\n            />\n            <p-button\n              type=\"submit\"\n              label=\"Buscar\"\n              icon=\"pi pi-search\"\n              [loading]=\"loading[0]\"\n              (onClick)=\"load(0, searchUserForm)\"\n            ></p-button>\n          </form>\n        </section>\n\n          <div *ngIf=\"userExists\" class=\"referrerInformation\">\n            <section class=\"userList\">\n              <div class=\"row1 table\">\n                  <table>\n                      <thead>\n                          <tr>\n                              <th>Documento</th>\n                              <th>Nombres</th>\n                              <th>Apellidos</th>\n                              <th>Email</th>\n                              <th>Telefono</th>\n                              <th>Rol</th>\n                          </tr>\n                      </thead>\n                      <tbody>\n                          <tr  *ngFor=\"let user of allUsers\" class=\"card1 animate__animated animate__zoomIn\" (click)=\"selectUser(user)\">\n                              <td>{{user['id_card']}}</td>\n                              <td>{{user['name']}}</td>\n                              <td>{{user['last_name']}}</td>\n                              <td>{{user['email']}}</td>\n                              <td>{{user['phone_number']}}</td>\n                              <td>{{user['role']}}</td>\n                          </tr>\n                      </tbody>\n                  </table>\n              </div>\n          </section>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</main>\n", styles: [""], 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: ModalReferredComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cod-modal-referred', template: "<main *ngIf=\"visibility\">\n  <div @fade class=\"modal_container\">\n    <div class=\"header_modal\">\n      <h1>Datos de quien lo refiere</h1>\n      <button (click)=\"closeModal()\">x</button>\n    </div>\n    <div class=\"grid_container\">\n      <div>\n          <section\n          id=\"container\"\n          class=\"flex flex-column bg-white border-round-2xl animate__animated animate__fadeInUp\"\n        >\n          <form\n            autocomplete=\"off\"\n            (ngSubmit)=\"search(searchUserForm)\"\n            class=\"form\"\n            [formGroup]=\"searchUserForm\"\n          >\n            <input\n              placeholder=\"Buscar por nombre, documento o tel\u00E9fono\"\n              [formControl]=\"$any(searchUserForm.controls['searchUser'])\"\n              type=\"text\"\n              pInputText\n            />\n            <p-button\n              type=\"submit\"\n              label=\"Buscar\"\n              icon=\"pi pi-search\"\n              [loading]=\"loading[0]\"\n              (onClick)=\"load(0, searchUserForm)\"\n            ></p-button>\n          </form>\n        </section>\n\n          <div *ngIf=\"userExists\" class=\"referrerInformation\">\n            <section class=\"userList\">\n              <div class=\"row1 table\">\n                  <table>\n                      <thead>\n                          <tr>\n                              <th>Documento</th>\n                              <th>Nombres</th>\n                              <th>Apellidos</th>\n                              <th>Email</th>\n                              <th>Telefono</th>\n                              <th>Rol</th>\n                          </tr>\n                      </thead>\n                      <tbody>\n                          <tr  *ngFor=\"let user of allUsers\" class=\"card1 animate__animated animate__zoomIn\" (click)=\"selectUser(user)\">\n                              <td>{{user['id_card']}}</td>\n                              <td>{{user['name']}}</td>\n                              <td>{{user['last_name']}}</td>\n                              <td>{{user['email']}}</td>\n                              <td>{{user['phone_number']}}</td>\n                              <td>{{user['role']}}</td>\n                          </tr>\n                      </tbody>\n                  </table>\n              </div>\n          </section>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</main>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: BaseService }, { type: UserService }]; }, propDecorators: { visibility: [{
+                type: Input
+            }], userSelect: [{
+                type: Output
+            }], modalClose: [{
+                type: Output
+            }] } });
+
 class CodFormStepFiveComponent extends CodFormSteps {
     constructor(fb, parameterService) {
         super();
@@ -4047,6 +4122,8 @@ class CodFormStepFiveComponent extends CodFormSteps {
         this.action = new EventEmitter();
         this.errorMessage = 'Faltan campos por llenar.';
         this.termsCheckboxStatus = false;
+        this.modalVisible = false;
+        this.visbleReferred = false;
         // Controls del formulario
         this.controls = new CodFormControls().controls[4];
     }
@@ -4097,6 +4174,9 @@ class CodFormStepFiveComponent extends CodFormSteps {
             multiculturalism_6: [false, []],
             multiculturalism_7: [false, []],
             health_regimen: ['', [Validators.required]],
+            document_refers: [{ value: '', disabled: true }],
+            name_refers: [{ value: '', disabled: true }],
+            phone_refers: [{ value: '', disabled: true }],
         });
         this.codFormStepFive.controls['marketing_reasons'].valueChanges.subscribe(change => {
             if (change === '4') {
@@ -4156,6 +4236,9 @@ class CodFormStepFiveComponent extends CodFormSteps {
     selectMarketingReasons(marketingReasons) {
         if (marketingReasons !== '¿Cómo se enteró del programa?') {
             this.codFormStepFive.controls['marketing_reasons'].setValue(marketingReasons);
+            if (marketingReasons == 1) {
+                this.modalVisible = true;
+            }
         }
         else {
             this.codFormStepFive.controls['marketing_reasons'].setValue(null);
@@ -4175,17 +4258,32 @@ class CodFormStepFiveComponent extends CodFormSteps {
         this.codFormStepFive.controls['disability'].setValue(this.initialData.aditional_information.disability);
         this.codFormStepFive.controls['health_regimen'].setValue(this.initialData.aditional_information.health_regimen);
         this.codFormStepFive.controls['observation'].setValue(this.initialData.aditional_information.observation);
+        this.codFormStepFive.controls['referred_user'].setValue(this.initialData.aditional_information.referred_user);
     }
     cleanComponent() {
         this.resetLocalStorage(this.controls);
         this.codFormStepFive.reset();
     }
+    closeModal(respons) {
+        this.modalVisible = respons;
+    }
+    referredUser(data) {
+        this.codFormStepFive.controls['document_refers'].setValue(data['id_card']);
+        this.codFormStepFive.controls['name_refers'].setValue(data['name']);
+        this.codFormStepFive.controls['phone_refers'].setValue(data['phone_number ']);
+        if (data) {
+            this.visbleReferred = true;
+        }
+        else {
+            this.visbleReferred = false;
+        }
+    }
 }
 CodFormStepFiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodFormStepFiveComponent, deps: [{ token: i1$1.FormBuilder }, { token: ParameterService }], target: i0.ɵɵFactoryTarget.Component });
-CodFormStepFiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodFormStepFiveComponent, selector: "app-cod-form-step-five", inputs: { userRole: "userRole", initialData: "initialData" }, outputs: { changeStepEvent: "changeStepEvent", action: "action" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"codFormStepFive\" class=\"grid\">\n  <div class=\"col-12 md:col-6\">\n    <ipt-select\n      [control]=\"codFormStepFive.controls['marketing_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['marketing_reasons'].value\"\n      (eventSelect)=\"selectMarketingReasons($event)\"\n      [data]=\"marketingReasons\"\n      [defaultText]=\"'\u00BFC\u00F3mo se enter\u00F3 del programa?'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'Discapacidad'\"\n      [control]=\"codFormStepFive.controls['disability']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 md:col-6\">\n    <ipt-select\n      [control]=\"codFormStepFive.controls['study_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['study_reasons'].value\"\n      (eventSelect)=\"selectStudyReasons($event)\"\n      [data]=\"studyReasons\"\n      [defaultText]=\"'Motivo'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'R\u00E9gimen de salud'\"\n      [control]=\"codFormStepFive.controls['health_regimen']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 mt-4\">\n    <span class=\"p-float-label\">\n      <textarea\n        id=\"float-input\"\n        rows=\"4\"\n        cols=\"30\"\n        pInputTextarea\n        formControlName=\"observation\"\n      ></textarea>\n      <label for=\"float-input\">Observaciones</label>\n    </span>\n    <div class=\"flex flex-wrap justify-content-between gap-2\">\n      <div *ngFor=\"let option of multiculturalities; index as i\" class=\"field-checkbox mt-4 flex align-items-center\">\n        <mat-checkbox [formControlName]=\"'multiculturalism' + '_' + (i+1)\" class=\"example-margin\"></mat-checkbox>\n        <label [for]=\"option.code\">{{ option.name }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-12 p-4 font-bold\">\n    <p>\n      * El estudiante o titular se comprometen a cancelar las cuotas establecidas en este contrato, los\n      primeros 5 (cinco) d\u00EDas del mes. En caso de querer retirarse, deber\u00E1 informar por escrito 30\n      (treinta) d\u00EDas antes y cancelar lo correspondiente hasta la fecha definida de retiro, para poder\n      obtener su paz y salvo.\n    </p>\n    <br><br>\n    <div class=\"flex gap-2\">\n      <mat-checkbox formControlName=\"terms\" class=\"example-margin\"></mat-checkbox>\n      <!-- <p-checkbox [formControl]=\"getCheckboxControl()\"></p-checkbox> -->\n      <!-- <ipt-checkbox [control]=\"codFormStepFive.controls['terms']\" [checkboxOption]=\"termsCheckboxStatus\"></ipt-checkbox> -->\n      <p>\n        DECLARO HABER LE\u00CDDO Y ACEPTO LOS T\u00C9RMINOS Y CONDICIONES DE LAS POL\u00CDTICAS ESTABLECIDAS EN LA\n        INSTITUCI\u00D3N.\n      </p>\n    </div>\n  </div>\n</form>\n\n<div class=\"flex mt-3 align-items-center gap-3\">\n  <span *ngIf=\"(codFormStepFive.invalid && codFormStepFive.touched) || (!termsCheckboxStatus && codFormStepFive.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 type=\"submit\" class=\"ml-auto p-button-success p-button-sm\" (click)=\"sendForm()\" pButton [label]=\"sendFormMsg\" icon=\"pi pi-check\"></button>\n</div>\n\n", styles: [""], 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: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal"], outputs: ["dateSelected"] }, { kind: "component", type: SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "initialValue", "control"], outputs: ["eventSelect"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i8$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }] });
+CodFormStepFiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: CodFormStepFiveComponent, selector: "app-cod-form-step-five", inputs: { userRole: "userRole", initialData: "initialData" }, outputs: { changeStepEvent: "changeStepEvent", action: "action" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form autocomplete=\"off\" [formGroup]=\"codFormStepFive\" class=\"grid\">\n  <div class=\"col-12 md:col-6\">\n    <cod-modal-referred\n    *ngIf=\"modalVisible\"\n    [visibility]=\"modalVisible\"\n    (modalClose)=\"closeModal($event)\"\n    (userSelect)=\"referredUser($event)\"\n    ></cod-modal-referred>\n\n    <ipt-select\n      [control]=\"codFormStepFive.controls['marketing_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['marketing_reasons'].value\"\n      (eventSelect)=\"selectMarketingReasons($event)\"\n      [data]=\"marketingReasons\"\n      [defaultText]=\"'\u00BFC\u00F3mo se enter\u00F3 del programa?'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'Discapacidad'\"\n      [control]=\"codFormStepFive.controls['disability']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 md:col-6\">\n    <ipt-select\n      [control]=\"codFormStepFive.controls['study_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['study_reasons'].value\"\n      (eventSelect)=\"selectStudyReasons($event)\"\n      [data]=\"studyReasons\"\n      [defaultText]=\"'Motivo'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'R\u00E9gimen de salud'\"\n      [control]=\"codFormStepFive.controls['health_regimen']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 mt-4\">\n    <div *ngIf=\"visbleReferred\" class=\"referred_user_data\">\n      <ipt-input\n        [inputType]=\"'text'\"\n        [placeHolder]=\"'Documento'\"\n        [control]=\"codFormStepFive.controls['document_refers']\"\n      ></ipt-input>\n      <ipt-input\n        [inputType]=\"'text'\"\n        [placeHolder]=\"'Nombres'\"\n        [control]=\"codFormStepFive.controls['name_refers']\"\n      ></ipt-input>\n      <ipt-input\n        [inputType]=\"'text'\"\n        [placeHolder]=\"'Tel\u00E9fono'\"\n        [control]=\"codFormStepFive.controls['phone_refers']\"\n      ></ipt-input>\n    </div>\n    <span class=\"p-float-label\">\n      <textarea\n        id=\"float-input\"\n        rows=\"4\"\n        cols=\"30\"\n        pInputTextarea\n        formControlName=\"observation\"\n      ></textarea>\n      <label for=\"float-input\">Observaciones</label>\n    </span>\n    <div class=\"flex flex-wrap justify-content-between gap-2\">\n      <div\n        *ngFor=\"let option of multiculturalities; index as i\"\n        class=\"field-checkbox mt-4 flex align-items-center\"\n      >\n        <mat-checkbox\n          [formControlName]=\"'multiculturalism' + '_' + (i + 1)\"\n          class=\"example-margin\"\n        ></mat-checkbox>\n        <label [for]=\"option.code\">{{ option.name }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-12 p-4 font-bold\">\n    <p>\n      * El estudiante o titular se comprometen a cancelar las cuotas\n      establecidas en este contrato, los primeros 5 (cinco) d\u00EDas del mes. En\n      caso de querer retirarse, deber\u00E1 informar por escrito 30 (treinta) d\u00EDas\n      antes y cancelar lo correspondiente hasta la fecha definida de retiro,\n      para poder obtener su paz y salvo.\n    </p>\n    <br /><br />\n    <div class=\"flex gap-2\">\n      <mat-checkbox\n        formControlName=\"terms\"\n        class=\"example-margin\"\n      ></mat-checkbox>\n      <!-- <p-checkbox [formControl]=\"getCheckboxControl()\"></p-checkbox> -->\n      <!-- <ipt-checkbox [control]=\"codFormStepFive.controls['terms']\" [checkboxOption]=\"termsCheckboxStatus\"></ipt-checkbox> -->\n      <p>\n        DECLARO HABER LE\u00CDDO Y ACEPTO LOS T\u00C9RMINOS Y CONDICIONES DE LAS POL\u00CDTICAS\n        ESTABLECIDAS EN LA INSTITUCI\u00D3N.\n      </p>\n    </div>\n  </div>\n</form>\n\n<div class=\"flex mt-3 align-items-center gap-3\">\n  <span\n    *ngIf=\"\n      (codFormStepFive.invalid && codFormStepFive.touched) ||\n      (!termsCheckboxStatus && codFormStepFive.touched)\n    \"\n    class=\"\n      text-red-500\n      font-bold\n      text-center\n      mt-1\n      py-2\n      bg-red-100\n      w-full\n      border-round-xl\n    \"\n    >{{ errorMessage }}</span\n  >\n  <button\n    type=\"submit\"\n    class=\"ml-auto p-button-success p-button-sm\"\n    (click)=\"sendForm()\"\n    pButton\n    [label]=\"sendFormMsg\"\n    icon=\"pi pi-check\"\n  ></button>\n</div>\n", styles: [""], 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: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal"], outputs: ["dateSelected"] }, { kind: "component", type: SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "initialValue", "control"], outputs: ["eventSelect"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: i8$1.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize"], outputs: ["onResize"] }, { kind: "component", type: ModalReferredComponent, selector: "cod-modal-referred", inputs: ["visibility"], outputs: ["userSelect", "modalClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: CodFormStepFiveComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-cod-form-step-five', template: "<form autocomplete=\"off\" [formGroup]=\"codFormStepFive\" class=\"grid\">\n  <div class=\"col-12 md:col-6\">\n    <ipt-select\n      [control]=\"codFormStepFive.controls['marketing_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['marketing_reasons'].value\"\n      (eventSelect)=\"selectMarketingReasons($event)\"\n      [data]=\"marketingReasons\"\n      [defaultText]=\"'\u00BFC\u00F3mo se enter\u00F3 del programa?'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'Discapacidad'\"\n      [control]=\"codFormStepFive.controls['disability']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 md:col-6\">\n    <ipt-select\n      [control]=\"codFormStepFive.controls['study_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['study_reasons'].value\"\n      (eventSelect)=\"selectStudyReasons($event)\"\n      [data]=\"studyReasons\"\n      [defaultText]=\"'Motivo'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'R\u00E9gimen de salud'\"\n      [control]=\"codFormStepFive.controls['health_regimen']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 mt-4\">\n    <span class=\"p-float-label\">\n      <textarea\n        id=\"float-input\"\n        rows=\"4\"\n        cols=\"30\"\n        pInputTextarea\n        formControlName=\"observation\"\n      ></textarea>\n      <label for=\"float-input\">Observaciones</label>\n    </span>\n    <div class=\"flex flex-wrap justify-content-between gap-2\">\n      <div *ngFor=\"let option of multiculturalities; index as i\" class=\"field-checkbox mt-4 flex align-items-center\">\n        <mat-checkbox [formControlName]=\"'multiculturalism' + '_' + (i+1)\" class=\"example-margin\"></mat-checkbox>\n        <label [for]=\"option.code\">{{ option.name }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-12 p-4 font-bold\">\n    <p>\n      * El estudiante o titular se comprometen a cancelar las cuotas establecidas en este contrato, los\n      primeros 5 (cinco) d\u00EDas del mes. En caso de querer retirarse, deber\u00E1 informar por escrito 30\n      (treinta) d\u00EDas antes y cancelar lo correspondiente hasta la fecha definida de retiro, para poder\n      obtener su paz y salvo.\n    </p>\n    <br><br>\n    <div class=\"flex gap-2\">\n      <mat-checkbox formControlName=\"terms\" class=\"example-margin\"></mat-checkbox>\n      <!-- <p-checkbox [formControl]=\"getCheckboxControl()\"></p-checkbox> -->\n      <!-- <ipt-checkbox [control]=\"codFormStepFive.controls['terms']\" [checkboxOption]=\"termsCheckboxStatus\"></ipt-checkbox> -->\n      <p>\n        DECLARO HABER LE\u00CDDO Y ACEPTO LOS T\u00C9RMINOS Y CONDICIONES DE LAS POL\u00CDTICAS ESTABLECIDAS EN LA\n        INSTITUCI\u00D3N.\n      </p>\n    </div>\n  </div>\n</form>\n\n<div class=\"flex mt-3 align-items-center gap-3\">\n  <span *ngIf=\"(codFormStepFive.invalid && codFormStepFive.touched) || (!termsCheckboxStatus && codFormStepFive.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 type=\"submit\" class=\"ml-auto p-button-success p-button-sm\" (click)=\"sendForm()\" pButton [label]=\"sendFormMsg\" icon=\"pi pi-check\"></button>\n</div>\n\n" }]
+            args: [{ selector: 'app-cod-form-step-five', template: "<form autocomplete=\"off\" [formGroup]=\"codFormStepFive\" class=\"grid\">\n  <div class=\"col-12 md:col-6\">\n    <cod-modal-referred\n    *ngIf=\"modalVisible\"\n    [visibility]=\"modalVisible\"\n    (modalClose)=\"closeModal($event)\"\n    (userSelect)=\"referredUser($event)\"\n    ></cod-modal-referred>\n\n    <ipt-select\n      [control]=\"codFormStepFive.controls['marketing_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['marketing_reasons'].value\"\n      (eventSelect)=\"selectMarketingReasons($event)\"\n      [data]=\"marketingReasons\"\n      [defaultText]=\"'\u00BFC\u00F3mo se enter\u00F3 del programa?'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'Discapacidad'\"\n      [control]=\"codFormStepFive.controls['disability']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 md:col-6\">\n    <ipt-select\n      [control]=\"codFormStepFive.controls['study_reasons']\"\n      [initialValue]=\"codFormStepFive.controls['study_reasons'].value\"\n      (eventSelect)=\"selectStudyReasons($event)\"\n      [data]=\"studyReasons\"\n      [defaultText]=\"'Motivo'\"\n    ></ipt-select>\n    <ipt-input\n      [inputType]=\"'text'\"\n      [placeHolder]=\"'R\u00E9gimen de salud'\"\n      [control]=\"codFormStepFive.controls['health_regimen']\"\n    ></ipt-input>\n  </div>\n  <div class=\"col-12 mt-4\">\n    <div *ngIf=\"visbleReferred\" class=\"referred_user_data\">\n      <ipt-input\n        [inputType]=\"'text'\"\n        [placeHolder]=\"'Documento'\"\n        [control]=\"codFormStepFive.controls['document_refers']\"\n      ></ipt-input>\n      <ipt-input\n        [inputType]=\"'text'\"\n        [placeHolder]=\"'Nombres'\"\n        [control]=\"codFormStepFive.controls['name_refers']\"\n      ></ipt-input>\n      <ipt-input\n        [inputType]=\"'text'\"\n        [placeHolder]=\"'Tel\u00E9fono'\"\n        [control]=\"codFormStepFive.controls['phone_refers']\"\n      ></ipt-input>\n    </div>\n    <span class=\"p-float-label\">\n      <textarea\n        id=\"float-input\"\n        rows=\"4\"\n        cols=\"30\"\n        pInputTextarea\n        formControlName=\"observation\"\n      ></textarea>\n      <label for=\"float-input\">Observaciones</label>\n    </span>\n    <div class=\"flex flex-wrap justify-content-between gap-2\">\n      <div\n        *ngFor=\"let option of multiculturalities; index as i\"\n        class=\"field-checkbox mt-4 flex align-items-center\"\n      >\n        <mat-checkbox\n          [formControlName]=\"'multiculturalism' + '_' + (i + 1)\"\n          class=\"example-margin\"\n        ></mat-checkbox>\n        <label [for]=\"option.code\">{{ option.name }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"col-12 p-4 font-bold\">\n    <p>\n      * El estudiante o titular se comprometen a cancelar las cuotas\n      establecidas en este contrato, los primeros 5 (cinco) d\u00EDas del mes. En\n      caso de querer retirarse, deber\u00E1 informar por escrito 30 (treinta) d\u00EDas\n      antes y cancelar lo correspondiente hasta la fecha definida de retiro,\n      para poder obtener su paz y salvo.\n    </p>\n    <br /><br />\n    <div class=\"flex gap-2\">\n      <mat-checkbox\n        formControlName=\"terms\"\n        class=\"example-margin\"\n      ></mat-checkbox>\n      <!-- <p-checkbox [formControl]=\"getCheckboxControl()\"></p-checkbox> -->\n      <!-- <ipt-checkbox [control]=\"codFormStepFive.controls['terms']\" [checkboxOption]=\"termsCheckboxStatus\"></ipt-checkbox> -->\n      <p>\n        DECLARO HABER LE\u00CDDO Y ACEPTO LOS T\u00C9RMINOS Y CONDICIONES DE LAS POL\u00CDTICAS\n        ESTABLECIDAS EN LA INSTITUCI\u00D3N.\n      </p>\n    </div>\n  </div>\n</form>\n\n<div class=\"flex mt-3 align-items-center gap-3\">\n  <span\n    *ngIf=\"\n      (codFormStepFive.invalid && codFormStepFive.touched) ||\n      (!termsCheckboxStatus && codFormStepFive.touched)\n    \"\n    class=\"\n      text-red-500\n      font-bold\n      text-center\n      mt-1\n      py-2\n      bg-red-100\n      w-full\n      border-round-xl\n    \"\n    >{{ errorMessage }}</span\n  >\n  <button\n    type=\"submit\"\n    class=\"ml-auto p-button-success p-button-sm\"\n    (click)=\"sendForm()\"\n    pButton\n    [label]=\"sendFormMsg\"\n    icon=\"pi pi-check\"\n  ></button>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: ParameterService }]; }, propDecorators: { userRole: [{
                 type: Input
             }], initialData: [{
@@ -4421,7 +4519,8 @@ CodModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         CodFormStepTwoComponent,
         CodFormStepThreeComponent,
         CodFormStepFourComponent,
-        CodFormStepFiveComponent], imports: [CommonModule,
+        CodFormStepFiveComponent,
+        ModalReferredComponent], imports: [CommonModule,
         TabViewModule,
         ComponentsModule,
         MatCheckboxModule,
@@ -4465,7 +4564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         CodFormStepTwoComponent,
                         CodFormStepThreeComponent,
                         CodFormStepFourComponent,
-                        CodFormStepFiveComponent
+                        CodFormStepFiveComponent,
                     ],
                     declarations: [
                         CodFormComponent,
@@ -4474,7 +4573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         CodFormStepTwoComponent,
                         CodFormStepThreeComponent,
                         CodFormStepFourComponent,
-                        CodFormStepFiveComponent
+                        CodFormStepFiveComponent,
+                        ModalReferredComponent,
                     ],
                     providers: [
                         MessageService