simpo-component-library 3.6.78 → 3.6.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/sections/registration-form/registration-form.component.mjs +4 -5
- package/fesm2022/simpo-component-library.mjs +3 -4
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.80.tgz +0 -0
- package/simpo-component-library-3.6.78.tgz +0 -0
@@ -11302,7 +11302,7 @@ class RegistrationFormComponent extends BaseSection {
|
|
11302
11302
|
}
|
11303
11303
|
};
|
11304
11304
|
this.fieldData = {};
|
11305
|
-
this.businessId = '
|
11305
|
+
this.businessId = '1efdd3f0-fc93-668f-b6d0-fd60a2542463';
|
11306
11306
|
this.documentList = [];
|
11307
11307
|
this.formStatus = '';
|
11308
11308
|
this.studentLiveWith = '';
|
@@ -11512,7 +11512,6 @@ class RegistrationFormComponent extends BaseSection {
|
|
11512
11512
|
});
|
11513
11513
|
this.fieldData = this.restService.getFieldsToDisplay(res.data.data);
|
11514
11514
|
this.selectedKey = this.Object.keys(this.fieldData)[0];
|
11515
|
-
console.log(this.fieldData);
|
11516
11515
|
});
|
11517
11516
|
}
|
11518
11517
|
getALLDocumentList() {
|
@@ -12035,7 +12034,7 @@ class RegistrationFormComponent extends BaseSection {
|
|
12035
12034
|
});
|
12036
12035
|
}
|
12037
12036
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$2.MatSnackBar }, { token: EventsService }, { token: i2$4.ActivatedRoute }, { token: i1$1.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
|
12038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\n [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container\n *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <!-- <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div> -->\n <div class=\"row mt-1\"\n *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div\n [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\n *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\n || info.fieldLabel)}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end\"\n *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\n <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\n style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\n }}</button>\n </div>\n </div>\n <div class=\"\" *ngIf=\"group === 'Past school Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\n *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\n <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\">+ Add Past School {{\n nextPastSchoolNumber}}</button>\n </div>\n </div>\n </div>\n\n <div class=\"body\"\n *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span\n style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\n [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\n [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\n style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\n\n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\n [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\n (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n\n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
12037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\n [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container\n *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <!-- <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div> -->\n <div class=\"row mt-1\"\n *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div\n [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\n *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\n || info.fieldLabel)}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end\"\n *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\n <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\n style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\n }}</button>\n </div>\n </div>\n <div class=\"\" *ngIf=\"group === 'Past school Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\n *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\n <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\"\n style=\"width:max-content !important\">+ Add Past School {{\n nextPastSchoolNumber}}</button>\n </div>\n </div>\n </div>\n\n <div class=\"body\"\n *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span\n style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\n [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\n [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\n style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\n\n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\n [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\n (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n\n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:left;margin-bottom:8px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 2rem}.dummy-image-1{margin-bottom:0}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}.add_sibling{background-color:var(--primary-button-color);color:#fff;font-family:var(--primary-font-family);font-weight:500;border:none;padding:10px;border-radius:8px;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
12039
12038
|
//directive
|
12040
12039
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
|
12041
12040
|
}
|
@@ -12060,7 +12059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
12060
12059
|
FormsModule,
|
12061
12060
|
MatIconModule,
|
12062
12061
|
MatRadioModule
|
12063
|
-
], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\n [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container\n *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <!-- <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div> -->\n <div class=\"row mt-1\"\n *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div\n [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\n *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\n || info.fieldLabel)}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end\"\n *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\n <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\n style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\n }}</button>\n </div>\n </div>\n <div class=\"\" *ngIf=\"group === 'Past school Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\n *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\n <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\">+ Add Past School {{\n nextPastSchoolNumber}}</button>\n </div>\n </div>\n </div>\n\n <div class=\"body\"\n *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span\n style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\n [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\n [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\n style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\n\n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\n [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\n (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n\n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}\n"] }]
|
12062
|
+
], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\n [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container\n *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <!-- <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div> -->\n <div class=\"row mt-1\"\n *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div\n [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\n *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\n || info.fieldLabel)}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end\"\n *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\n <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\n style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\n }}</button>\n </div>\n </div>\n <div class=\"\" *ngIf=\"group === 'Past school Details'\">\n <ng-container\n *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\n <div class=\"row mt-2\">\n <ng-container\n *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <div class=\"d-flex\">\n <label for=\"\" class=\"label-text\"\n *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n </div>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\n *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\n <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\"\n style=\"width:max-content !important\">+ Add Past School {{\n nextPastSchoolNumber}}</button>\n </div>\n </div>\n </div>\n\n <div class=\"body\"\n *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span\n style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\n [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\n [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\n style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\n\n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\n [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\n (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n\n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:left;margin-bottom:8px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 2rem}.dummy-image-1{margin-bottom:0}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}.add_sibling{background-color:var(--primary-button-color);color:#fff;font-family:var(--primary-font-family);font-weight:500;border:none;padding:10px;border-radius:8px;font-size:13px}\n"] }]
|
12064
12063
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.MatSnackBar }, { type: EventsService }, { type: i2$4.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
|
12065
12064
|
type: Input
|
12066
12065
|
}], index: [{
|