simpo-component-library 3.4.9 → 3.5.0
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 +157 -8
- package/fesm2022/simpo-component-library.mjs +156 -7
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/components/input-fields/input-fields.component.d.ts +1 -1
- package/lib/directive/background-directive.d.ts +1 -1
- package/lib/directive/button-directive.directive.d.ts +1 -1
- package/lib/directive/color.directive.d.ts +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/sections/registration-form/registration-form.component.d.ts +12 -0
- package/package.json +1 -1
- package/simpo-component-library-3.5.0.tgz +0 -0
- package/simpo-component-library-3.4.9.tgz +0 -0
|
@@ -10771,6 +10771,8 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10771
10771
|
this.subscriptionsData = [];
|
|
10772
10772
|
this.termPaymentList = [];
|
|
10773
10773
|
this.showRelativeFields = false;
|
|
10774
|
+
this.nextSiblingNumber = null;
|
|
10775
|
+
this.objectKeys = Object.keys;
|
|
10774
10776
|
}
|
|
10775
10777
|
ngOnInit() {
|
|
10776
10778
|
this.router.queryParams.subscribe((param) => {
|
|
@@ -10824,7 +10826,10 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10824
10826
|
if (fieldItem.fieldName === 'Academic Year') {
|
|
10825
10827
|
this.selectedAcademicYear = fieldItem.fieldValue;
|
|
10826
10828
|
}
|
|
10827
|
-
if (fieldItem.type
|
|
10829
|
+
if (fieldItem.type === 'FATHER_IMAGE' || fieldItem.type === 'MOTHER_IMAGE' || fieldItem.type === 'GUARDIAN_IMAGE') {
|
|
10830
|
+
admissionData['fieldMap'][fieldItem.type] = fieldItem.fieldImageUrl;
|
|
10831
|
+
}
|
|
10832
|
+
if (fieldItem.type != null && fieldItem.type !== 'FATHER_IMAGE' && fieldItem.type !== 'MOTHER_IMAGE' && fieldItem.type !== 'GUARDIAN_IMAGE') {
|
|
10828
10833
|
admissionData['fieldMap'][fieldItem.type] = fieldItem.fieldValue;
|
|
10829
10834
|
}
|
|
10830
10835
|
let id = fieldItem.fieldName + fieldItem.fieldGroupName;
|
|
@@ -10835,14 +10840,19 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10835
10840
|
for (let step of this.Object.keys(this.fieldData)) {
|
|
10836
10841
|
for (let group of Object.keys(this.fieldData[step])) {
|
|
10837
10842
|
for (let field of this.fieldData[step][group]) {
|
|
10838
|
-
if (field.type != null) {
|
|
10843
|
+
if (field.type != null && field.type !== 'FATHER_IMAGE' && field.type !== 'MOTHER_IMAGE' && field.type !== 'GUARDIAN_IMAGE') {
|
|
10839
10844
|
field.fieldValue = admissionData['fieldMap'][field.type];
|
|
10840
10845
|
}
|
|
10846
|
+
if (field.type === 'FATHER_IMAGE' || field.type === 'MOTHER_IMAGE' || field.type === 'GUARDIAN_IMAGE') {
|
|
10847
|
+
field.fieldImageUrl = admissionData['fieldMap'][field.type];
|
|
10848
|
+
}
|
|
10841
10849
|
else {
|
|
10842
10850
|
field.fieldValue = admissionData['fieldMap'][field.fieldLabel + group];
|
|
10843
10851
|
}
|
|
10844
10852
|
if (field?.type === 'GRADE')
|
|
10845
10853
|
this.updateGrade(field.sourceData[field.dataSourceType], field.fieldValue);
|
|
10854
|
+
if (field.type === 'ACADEMIC_YEAR')
|
|
10855
|
+
this.updateAcademicYear(field.sourceData[field.dataSourceType], field.fieldValue);
|
|
10846
10856
|
if (field.dataType === 'CHECKBOX') {
|
|
10847
10857
|
this.formatCheckBoxValue(field);
|
|
10848
10858
|
}
|
|
@@ -10856,6 +10866,16 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10856
10866
|
for (let grade of gradeList) {
|
|
10857
10867
|
if (grade.name === gradeName) {
|
|
10858
10868
|
this.selectedGradeId = grade.id;
|
|
10869
|
+
this.inputFieldChange({}, grade);
|
|
10870
|
+
break;
|
|
10871
|
+
}
|
|
10872
|
+
}
|
|
10873
|
+
}
|
|
10874
|
+
updateAcademicYear(acYearList, acyName) {
|
|
10875
|
+
for (let ay of acYearList) {
|
|
10876
|
+
if (ay.name === acyName) {
|
|
10877
|
+
this.selectedAcademicYear = ay;
|
|
10878
|
+
this.inputFieldChange({}, ay);
|
|
10859
10879
|
break;
|
|
10860
10880
|
}
|
|
10861
10881
|
}
|
|
@@ -10886,6 +10906,11 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10886
10906
|
element.isDisplay = true;
|
|
10887
10907
|
}
|
|
10888
10908
|
});
|
|
10909
|
+
res.data.data.forEach((element) => {
|
|
10910
|
+
if (element.dataSourceType === 'COUNTRY') {
|
|
10911
|
+
element.isDisplay = false;
|
|
10912
|
+
}
|
|
10913
|
+
});
|
|
10889
10914
|
const currentYear = new Date().getFullYear();
|
|
10890
10915
|
const nextYear = currentYear + 1;
|
|
10891
10916
|
res.data.data.forEach((element) => {
|
|
@@ -10909,6 +10934,14 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10909
10934
|
}
|
|
10910
10935
|
}
|
|
10911
10936
|
});
|
|
10937
|
+
res.data.data.forEach((element) => {
|
|
10938
|
+
const hasSiblingsGroup = Array.isArray(element.fieldGroup) && element.fieldGroup.some((group) => group.fieldGroupName?.toLowerCase().includes("siblings details"));
|
|
10939
|
+
if (hasSiblingsGroup) {
|
|
10940
|
+
const labelCheck = element.fieldLabel?.includes('1');
|
|
10941
|
+
const valueCheck = !!element.fieldValue;
|
|
10942
|
+
element.isDisplay = labelCheck || valueCheck;
|
|
10943
|
+
}
|
|
10944
|
+
});
|
|
10912
10945
|
this.fieldData = this.restService.getFieldsToDisplay(res.data.data);
|
|
10913
10946
|
this.selectedKey = this.Object.keys(this.fieldData)[0];
|
|
10914
10947
|
});
|
|
@@ -11139,6 +11172,22 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
11139
11172
|
if (field.fieldLabel === 'Student live with') {
|
|
11140
11173
|
this.studentLiveWith = item.value;
|
|
11141
11174
|
}
|
|
11175
|
+
if (field.type === 'NATIONALITY') {
|
|
11176
|
+
if (field.fieldValue === 'NRI') {
|
|
11177
|
+
this.fieldData['Student Details']['Identity information'].forEach((element) => {
|
|
11178
|
+
if (element.dataSourceType === 'COUNTRY') {
|
|
11179
|
+
element.isDisplay = true;
|
|
11180
|
+
}
|
|
11181
|
+
});
|
|
11182
|
+
}
|
|
11183
|
+
if (field.fieldValue.toLowerCase().includes('indian')) {
|
|
11184
|
+
this.fieldData['Student Details']['Identity information'].forEach((element) => {
|
|
11185
|
+
if (element.dataSourceType === 'COUNTRY') {
|
|
11186
|
+
element.isDisplay = false;
|
|
11187
|
+
}
|
|
11188
|
+
});
|
|
11189
|
+
}
|
|
11190
|
+
}
|
|
11142
11191
|
}
|
|
11143
11192
|
uploadBackUpDocument(ev) {
|
|
11144
11193
|
this.backupDocFile = ev.srcElement.files[0];
|
|
@@ -11189,6 +11238,25 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
11189
11238
|
if (item.type === 'PASSPORT_AVAILABLE') {
|
|
11190
11239
|
this.showOrHideFields(item.fieldValue, selectedKey, group);
|
|
11191
11240
|
}
|
|
11241
|
+
else if (item.type === 'PRIMARY_CONTACT') {
|
|
11242
|
+
this.convertOthersAsSecondary(item.fieldValue, selectedKey, group);
|
|
11243
|
+
}
|
|
11244
|
+
}
|
|
11245
|
+
convertOthersAsSecondary(value, selectedKey, group) {
|
|
11246
|
+
const formattedGroup = group.toLowerCase().split(' ').join('_');
|
|
11247
|
+
const groups = [{ name: 'father_details', aValue: 'Father details' }, { name: 'mother_details', aValue: 'Mother details' }, { name: 'guardian_details', aValue: 'Guardian Details' }];
|
|
11248
|
+
const otherGroups = groups.filter(g => g.name !== formattedGroup);
|
|
11249
|
+
const [secondaryGroup1, secondaryGroup2] = otherGroups;
|
|
11250
|
+
this.fieldData[selectedKey][secondaryGroup1.aValue].forEach((element) => {
|
|
11251
|
+
if (element.type === 'PRIMARY_CONTACT') {
|
|
11252
|
+
element.fieldValue = 'No';
|
|
11253
|
+
}
|
|
11254
|
+
});
|
|
11255
|
+
this.fieldData[selectedKey][secondaryGroup2.aValue].forEach((element) => {
|
|
11256
|
+
if (element.type === 'PRIMARY_CONTACT') {
|
|
11257
|
+
element.fieldValue = 'No';
|
|
11258
|
+
}
|
|
11259
|
+
});
|
|
11192
11260
|
}
|
|
11193
11261
|
showOrHideFields(value, selectedKey, group) {
|
|
11194
11262
|
const shouldShow = value.toLowerCase().includes('yes');
|
|
@@ -11226,21 +11294,102 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
11226
11294
|
const isPhone = label.includes('phone number');
|
|
11227
11295
|
const isEmail = label.includes('email');
|
|
11228
11296
|
const valueStr = item.fieldValue?.toString() || '';
|
|
11229
|
-
// Phone validation
|
|
11230
11297
|
if (isPhone) {
|
|
11231
11298
|
const mobilePattern = /^[6-9]\d{9}$/;
|
|
11232
11299
|
return mobilePattern.test(valueStr) && valueStr.length === 10;
|
|
11233
11300
|
}
|
|
11234
|
-
// Email validation
|
|
11235
11301
|
if (isEmail) {
|
|
11236
11302
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
11237
11303
|
return emailPattern.test(valueStr);
|
|
11238
11304
|
}
|
|
11239
|
-
// For other fields, no validation
|
|
11240
11305
|
return true;
|
|
11241
11306
|
}
|
|
11307
|
+
checkDob(item) {
|
|
11308
|
+
const formattedLabel = (item.fieldLabel || '').trim().toLowerCase();
|
|
11309
|
+
const fieldGroupName = (item.fieldGroup || []).flatMap((g) => [
|
|
11310
|
+
(g.fieldGroupName || '').toLowerCase(),
|
|
11311
|
+
(g.fieldStepName || '').toLowerCase()
|
|
11312
|
+
]);
|
|
11313
|
+
if (formattedLabel.includes('dob') && item.fieldValue) {
|
|
11314
|
+
const enteredDate = new Date(item.fieldValue);
|
|
11315
|
+
const today = new Date();
|
|
11316
|
+
if (fieldGroupName.some((name) => name.includes('student'))) {
|
|
11317
|
+
const age = today.getFullYear() - enteredDate.getFullYear();
|
|
11318
|
+
const hasBirthdayPassed = today.getMonth() > enteredDate.getMonth() ||
|
|
11319
|
+
(today.getMonth() === enteredDate.getMonth() && today.getDate() >= enteredDate.getDate());
|
|
11320
|
+
const exactAge = hasBirthdayPassed ? age : age - 1;
|
|
11321
|
+
if (exactAge < 3) {
|
|
11322
|
+
this.snackBar.open('Student must be at least 3 years old.', 'Ok', {
|
|
11323
|
+
duration: 3500
|
|
11324
|
+
});
|
|
11325
|
+
item.fieldValue = '';
|
|
11326
|
+
}
|
|
11327
|
+
}
|
|
11328
|
+
if (fieldGroupName.some((name) => name.includes('mother'))) {
|
|
11329
|
+
const age = today.getFullYear() - enteredDate.getFullYear();
|
|
11330
|
+
const hasBirthdayPassed = today.getMonth() > enteredDate.getMonth() ||
|
|
11331
|
+
(today.getMonth() === enteredDate.getMonth() && today.getDate() >= enteredDate.getDate());
|
|
11332
|
+
const exactAge = hasBirthdayPassed ? age : age - 1;
|
|
11333
|
+
if (exactAge < 18) {
|
|
11334
|
+
this.snackBar.open('Mother must be at least 18 years old.', 'Ok', {
|
|
11335
|
+
duration: 3500
|
|
11336
|
+
});
|
|
11337
|
+
item.fieldValue = '';
|
|
11338
|
+
}
|
|
11339
|
+
}
|
|
11340
|
+
if (fieldGroupName.some((name) => name.includes('father') || name.includes('guardian'))) {
|
|
11341
|
+
const age = today.getFullYear() - enteredDate.getFullYear();
|
|
11342
|
+
const hasBirthdayPassed = today.getMonth() > enteredDate.getMonth() ||
|
|
11343
|
+
(today.getMonth() === enteredDate.getMonth() && today.getDate() >= enteredDate.getDate());
|
|
11344
|
+
const exactAge = hasBirthdayPassed ? age : age - 1;
|
|
11345
|
+
if (exactAge < 21) {
|
|
11346
|
+
this.snackBar.open('Father must be at least 21 years old.', 'Ok', {
|
|
11347
|
+
duration: 3500
|
|
11348
|
+
});
|
|
11349
|
+
item.fieldValue = '';
|
|
11350
|
+
}
|
|
11351
|
+
}
|
|
11352
|
+
}
|
|
11353
|
+
}
|
|
11354
|
+
showAddSiblingsButton() {
|
|
11355
|
+
const siblings = this.fieldData['Family Details']['Siblings Details'];
|
|
11356
|
+
for (let i = 1; i <= 5; i++) {
|
|
11357
|
+
const sibling = siblings.find((el) => el.fieldLabel?.includes(i.toString()));
|
|
11358
|
+
if (!sibling || !sibling.isDisplay) {
|
|
11359
|
+
this.nextSiblingNumber = i;
|
|
11360
|
+
return true;
|
|
11361
|
+
}
|
|
11362
|
+
}
|
|
11363
|
+
this.nextSiblingNumber = null;
|
|
11364
|
+
return false;
|
|
11365
|
+
}
|
|
11366
|
+
addSibling(siblingNumber) {
|
|
11367
|
+
const siblings = this.fieldData['Family Details']['Siblings Details'];
|
|
11368
|
+
siblings.forEach((element) => {
|
|
11369
|
+
if (element.fieldLabel?.includes(siblingNumber)) {
|
|
11370
|
+
element.isDisplay = true;
|
|
11371
|
+
}
|
|
11372
|
+
});
|
|
11373
|
+
}
|
|
11374
|
+
groupOfSiblings(item) {
|
|
11375
|
+
const groupedFields = {};
|
|
11376
|
+
item.forEach((field) => {
|
|
11377
|
+
const match = field.fieldLabel.match(/\d+$/); // Extract trailing number from fieldLabel
|
|
11378
|
+
if (match) {
|
|
11379
|
+
const siblingNumber = match[0];
|
|
11380
|
+
if (!groupedFields[siblingNumber]) {
|
|
11381
|
+
groupedFields[siblingNumber] = [];
|
|
11382
|
+
}
|
|
11383
|
+
groupedFields[siblingNumber].push(field);
|
|
11384
|
+
}
|
|
11385
|
+
});
|
|
11386
|
+
return groupedFields;
|
|
11387
|
+
}
|
|
11388
|
+
returnDisplayText(item) {
|
|
11389
|
+
return item;
|
|
11390
|
+
}
|
|
11242
11391
|
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 }); }
|
|
11243
|
-
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\" *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\" [max]=\"getMaxDate(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\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *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\" [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:
|
|
11392
|
+
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 class=\"row mt-1\" *ngIf=\"group != 'Siblings 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 || 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 *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\">+ Add Sibling {{ nextSiblingNumber\n }}</button>\n </div>\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\" *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\" [max]=\"getMaxDate(field)\"\n (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\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *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\" [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}.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:
|
|
11244
11393
|
//directive
|
|
11245
11394
|
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"] }] }); }
|
|
11246
11395
|
}
|
|
@@ -11265,7 +11414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
11265
11414
|
FormsModule,
|
|
11266
11415
|
MatIconModule,
|
|
11267
11416
|
MatRadioModule
|
|
11268
|
-
], 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\" *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\" [max]=\"getMaxDate(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\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *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\" [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"] }]
|
|
11417
|
+
], 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 class=\"row mt-1\" *ngIf=\"group != 'Siblings 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 || 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 *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\">+ Add Sibling {{ nextSiblingNumber\n }}</button>\n </div>\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\" *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\" [max]=\"getMaxDate(field)\"\n (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\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *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\" [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}.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"] }]
|
|
11269
11418
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.MatSnackBar }, { type: EventsService }, { type: i2$4.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
|
|
11270
11419
|
type: Input
|
|
11271
11420
|
}], index: [{
|