simpo-component-library 3.3.0 → 3.3.1
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 +3 -4
- package/fesm2022/simpo-component-library.mjs +2 -3
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.3.1.tgz +0 -0
- package/simpo-component-library-3.3.0.tgz +0 -0
|
@@ -10744,7 +10744,6 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10744
10744
|
}
|
|
10745
10745
|
};
|
|
10746
10746
|
this.fieldData = {};
|
|
10747
|
-
this.businessId = '1efa3510-9986-6a31-bb2e-49c660e0ac3d';
|
|
10748
10747
|
this.documentList = [];
|
|
10749
10748
|
this.formStatus = '';
|
|
10750
10749
|
this.studentLiveWith = '';
|
|
@@ -11161,7 +11160,7 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
11161
11160
|
});
|
|
11162
11161
|
}
|
|
11163
11162
|
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 }); }
|
|
11164
|
-
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\" [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'\" *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 *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>\n\n <div class=\"body\" *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 style=\"color: red;\"\n *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\"\n 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\"\n [subscriptionsData]=\"subscriptionsData\" [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\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\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\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\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>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\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\" [max]=\"getMaxDate(field)\">\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (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>\n", 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}}\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:
|
|
11163
|
+
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\" [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'\" *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 *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>\n\n <div class=\"body\" *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 style=\"color: red;\"\n *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\"\n 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\"\n [subscriptionsData]=\"subscriptionsData\" [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\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\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\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\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>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\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\" [max]=\"getMaxDate(field)\">\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\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (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>\n", 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}\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:
|
|
11165
11164
|
//directive
|
|
11166
11165
|
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: i5.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"] }] }); }
|
|
11167
11166
|
}
|
|
@@ -11186,7 +11185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
11186
11185
|
FormsModule,
|
|
11187
11186
|
MatIconModule,
|
|
11188
11187
|
MatRadioModule
|
|
11189
|
-
], 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\" [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'\" *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 *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>\n\n <div class=\"body\" *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 style=\"color: red;\"\n *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\"\n 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\"\n [subscriptionsData]=\"subscriptionsData\" [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\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\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\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\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>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\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\" [max]=\"getMaxDate(field)\">\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (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>\n", 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}}\n"] }]
|
|
11188
|
+
], 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\" [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'\" *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 *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>\n\n <div class=\"body\" *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 style=\"color: red;\"\n *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\"\n 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\"\n [subscriptionsData]=\"subscriptionsData\" [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\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\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\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\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>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\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\" [max]=\"getMaxDate(field)\">\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\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (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>\n", 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}\n"] }]
|
|
11190
11189
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.MatSnackBar }, { type: EventsService }, { type: i2$4.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
|
|
11191
11190
|
type: Input
|
|
11192
11191
|
}], index: [{
|