simpo-component-library 2.0.94 → 2.0.96

package/fesm2022/simpo-component-library.mjs

@@ -1277,16 +1277,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class PaymentDetailsComponent {
+    constructor() {
+        this.subscriptionsData = [];
+        this.Object = Object;
+        this.feeStructure = {
+            "id": '1234',
+            "businessDetails": {
+                "id": '1234'
+            },
+            "grades": [
+                {
+                    "_id": "1234",
+                    "name": "Grade II"
+                },
+                {
+                    "_id": "1234",
+                    "name": "Grade IV"
+                }
+            ],
+            "board": "STATE",
+            "academicYearStart": 2024,
+            "academicYearEnd": 2025,
+            "feeConfigs": [
+                {
+                    "feeTypeId": '12324',
+                    "feeHeadId": '1234',
+                    "feeType": "Tution fee",
+                    "feeHead": "exam fee",
+                    "amount": 300,
+                    "discountAmount": 0,
+                    "isFixed": false
+                }
+            ],
+            "subscriptionPlans": [],
+            "totalAmount": 300,
+            "createdTimestamp": {
+                "$date": "2024-12-15T07:10:54.889Z"
+            },
+            "updatedTimestamp": {
+                "$date": "2024-12-15T07:10:54.889Z"
+            },
+            "active": true,
+        };
+        this.defaultImage = 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/917067c1734337280303cancel.png';
+        this.subscriptions = {
+            "Food Fee": [
+                {
+                    subscriptionTitle: 'Breakfast',
+                    pricing: {
+                        "WEEKLY": 2000,
+                        "MONTHLY": 3000,
+                        "YEARLY": 4000
+                    }
+                },
+                {
+                    subscriptionTitle: 'Lunch',
+                    pricing: {
+                        "WEEKLY": 2000,
+                        "MONTHLY": 3000,
+                        "YEARLY": 4000
+                    }
+                },
+                {
+                    subscriptionTitle: 'Snacks',
+                    pricing: {
+                        "WEEKLY": 2000,
+                        "MONTHLY": 3000,
+                        "YEARLY": 4000
+                    }
+                }
+            ]
+        };
+    }
+    ngOnInit() {
+        this.feeStructure = this.admissionData.studentFeeStructure;
+        this.subscriptions = this.arrangeSubscriptionForAdmission(this.subscriptionsData);
+        this.feeConfig = this.arrangeFeeConfig(this.feeStructure.feeConfigs);
+        this.calculateTotalAmount();
+    }
+    toggleSelection(subscription, frequency) {
+        if (!this.feeStructure.subscriptionPlans)
+            this.feeStructure.subscriptionPlans = [];
+        let removeIndex = -1;
+        for (let i = 0; i < this.feeStructure.subscriptionPlans.length; i++) {
+            let sub = this.feeStructure.subscriptionPlans[i];
+            if (sub.subId === subscription.subId) {
+                removeIndex = i;
+                break;
+            }
+        }
+        if (removeIndex == -1) {
+            this.feeStructure.subscriptionPlans.push({ ...subscription, frequency: frequency });
+            this.calculateTotalAmount();
+            return;
+        }
+        this.feeStructure.subscriptionPlans.splice(removeIndex, 1);
+        if (subscription.selectedOption === frequency) {
+            subscription.selectedOption = null;
+        }
+        else {
+            subscription.selectedOption = frequency;
+            this.feeStructure.subscriptionPlans.push({ ...subscription, frequency: frequency });
+        }
+        this.calculateTotalAmount();
+    }
+    calculateTotalAmount() {
+        this.feeStructure.totalAmount = 0;
+        for (let config of this.feeStructure.feeConfigs) {
+            this.feeStructure.totalAmount += config.amount;
+        }
+        for (let subscription of this.feeStructure.subscriptionPlans) {
+            this.feeStructure.totalAmount += subscription.pricing[subscription.frequency];
+        }
+    }
+    arrangeSubscriptionForAdmission(subscriptionList) {
+        let response = {};
+        for (let subscription of subscriptionList) {
+            if (!response[subscription.subscriptionType]) {
+                response[subscription.subscriptionType] = [];
+            }
+            response[subscription.subscriptionType].push(subscription);
+        }
+        return response;
+    }
+    arrangeFeeConfig(feeConfigList) {
+        let response = {};
+        for (let config of feeConfigList) {
+            if (!response[config.feeType])
+                response[config.feeType] = [];
+            response[config.feeType].push(config);
+        }
+        return response;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PaymentDetailsComponent, isStandalone: true, selector: "simpo-payment-details", inputs: { admissionData: "admissionData", subscriptionsData: "subscriptionsData" }, ngImport: i0, template: "<section class=\"main-section\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-6\">\r\n      <div class=\"heading left-side\">\r\n        Admission Fee\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n        <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n        <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n          <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n          <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n        <p class=\"heading\">{{type}}</p>\r\n\r\n        <table class=\"subscription-table w-100\">\r\n          <thead>\r\n            <th>Subscription Title</th>\r\n            <th>Monthly</th>\r\n            <th>Quaterly</th>\r\n            <th>Yearly</th>\r\n            <th>On Demand</th>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n              <td>{{data.subName}}</td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\"  [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\"  [checked]=\"data.selectedOption === 'MONTHLY'\"  [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['MONTHLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n            </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\"  [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['QUARTERLY']}}\r\n                  </label>\r\n                  <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\"  [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ANNUALLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\"  [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ONDEMAND']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6 right-side\">\r\n      <div class=\"heading mb-20\">\r\n        Fee Calculation\r\n      </div>\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n        <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n        <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n      </div>\r\n\r\n      <div class=\"total-fee\">\r\n        <div class=\"heading mb-5\">\r\n          Total Fee\r\n        </div>\r\n        <div class=\"amount\">\r\n          \u20B9 {{feeStructure.totalAmount}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".heading{font-size:18px;font-weight:500}.left-side{background:#fafcff99;padding:2rem}.mt-10{margin-top:10px}.justify-space{justify-content:space-between}.sub-heading,.amount{font-size:16px;font-weight:500}.mb-0{margin-bottom:0}.mb-20{margin-bottom:20px}.mb-15{margin-bottom:15px}.subscription-table{width:50%}.subscription-table th{color:#434443;font-weight:400;font-size:16px;font-family:DM SANS}.subscription-table td{font-weight:500;color:#000;font-size:16px;margin-top:67px;padding-top:10px}.right-side{background-color:#fdfbfa;padding:2rem;position:relative}.right-side .sub-heading{font-size:18px}.right-side .amount{font-size:16px}.right-side .heading{font-weight:400}.mb-5{margin-bottom:5px}.total-fee{position:absolute;bottom:20px;width:90%}.total-fee .amount{background:#fff;height:87px;display:flex;align-items:center;justify-content:center;font-size:32px;border-radius:8px}.defaultImage{height:15px;width:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-payment-details', standalone: true, imports: [CommonModule, FormsModule], template: "<section class=\"main-section\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-6\">\r\n      <div class=\"heading left-side\">\r\n        Admission Fee\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n        <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n        <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n          <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n          <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n        <p class=\"heading\">{{type}}</p>\r\n\r\n        <table class=\"subscription-table w-100\">\r\n          <thead>\r\n            <th>Subscription Title</th>\r\n            <th>Monthly</th>\r\n            <th>Quaterly</th>\r\n            <th>Yearly</th>\r\n            <th>On Demand</th>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n              <td>{{data.subName}}</td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\"  [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\"  [checked]=\"data.selectedOption === 'MONTHLY'\"  [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['MONTHLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n            </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\"  [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['QUARTERLY']}}\r\n                  </label>\r\n                  <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\"  [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ANNUALLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\"  [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ONDEMAND']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6 right-side\">\r\n      <div class=\"heading mb-20\">\r\n        Fee Calculation\r\n      </div>\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n        <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n        <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n      </div>\r\n\r\n      <div class=\"total-fee\">\r\n        <div class=\"heading mb-5\">\r\n          Total Fee\r\n        </div>\r\n        <div class=\"amount\">\r\n          \u20B9 {{feeStructure.totalAmount}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".heading{font-size:18px;font-weight:500}.left-side{background:#fafcff99;padding:2rem}.mt-10{margin-top:10px}.justify-space{justify-content:space-between}.sub-heading,.amount{font-size:16px;font-weight:500}.mb-0{margin-bottom:0}.mb-20{margin-bottom:20px}.mb-15{margin-bottom:15px}.subscription-table{width:50%}.subscription-table th{color:#434443;font-weight:400;font-size:16px;font-family:DM SANS}.subscription-table td{font-weight:500;color:#000;font-size:16px;margin-top:67px;padding-top:10px}.right-side{background-color:#fdfbfa;padding:2rem;position:relative}.right-side .sub-heading{font-size:18px}.right-side .amount{font-size:16px}.right-side .heading{font-weight:400}.mb-5{margin-bottom:5px}.total-fee{position:absolute;bottom:20px;width:90%}.total-fee .amount{background:#fff;height:87px;display:flex;align-items:center;justify-content:center;font-size:32px;border-radius:8px}.defaultImage{height:15px;width:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { admissionData: [{
+                type: Input
+            }], subscriptionsData: [{
+                type: Input
+            }] } });
+
 class SimpoComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule], exports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule, NgxSkeletonLoaderModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule, PaymentDetailsComponent], exports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule, PaymentDetailsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule, PaymentDetailsComponent, NgxSkeletonLoaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule],
-                    exports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule],
+                    imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule, PaymentDetailsComponent],
+                    exports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent, NgxSkeletonLoaderModule, PaymentDetailsComponent],
                 }]
         }] });
 
@@ -3683,6 +3828,13 @@ class RestService {
     createAdmission(payload) {
         return this.http.post(this.BASE_URL + `crm/registration/admission?registrationId=${payload?.registrationId || ''}`, payload);
     }
+    getSubscriptionForFeeStructure(gradeId) {
+        const businessId = localStorage.getItem('businessId');
+        return this.http.get(this.BASE_URL + `crm/subscription/plan/list?businessId=${businessId}&gradeId=${gradeId}`);
+    }
+    getFeeStructure(payload) {
+        return this.http.put(this.BASE_URL + `crm/fee/structure`, payload);
+    }
     getFieldsToDisplay(fieldsList) {
         let map = {};
         for (let field of fieldsList) {
@@ -7805,6 +7957,7 @@ class RegistrationFormComponent extends BaseSection {
             "fieldItems": [],
         };
         this.fieldData = {};
+        this.subscriptionsData = [];
     }
     ngOnInit() {
         this.businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
@@ -7828,6 +7981,8 @@ class RegistrationFormComponent extends BaseSection {
     }
     submitForm() {
         this.payload.fieldItems = this.convertToListOfFields();
+        if (this.payload.fieldItems.length == 0)
+            return;
         this.data?.sectionType === 'registrationForm' ? this.createRegistration() : this.createAdmission();
     }
     createRegistration() {
@@ -7845,6 +8000,10 @@ class RegistrationFormComponent extends BaseSection {
         for (let step of this.Object.keys(this.fieldData)) {
             for (let group of Object.keys(this.fieldData[step])) {
                 for (let field of this.fieldData[step][group]) {
+                    if (field.required && !field.fieldValue) {
+                        this.snackBar.open(`Please enter ${field.fieldLabel}`, 'close', { duration: 2000 });
+                        return [];
+                    }
                     fieldList.push({
                         fieldId: field.fieldId,
                         fieldName: field.fieldLabel,
@@ -7861,8 +8020,75 @@ class RegistrationFormComponent extends BaseSection {
     }
     updateAdmissionImage(ev) {
     }
+    redirectToPayment() {
+        if (!(this.selectedAcademicYear && this.selectedGradeId)) {
+            this.snackBar.open('Selected Grade and Academic Year first', 'close', { duration: 2000 });
+            return;
+        }
+        this.selectedKey = 'Payment';
+    }
+    continueAdmission() {
+        let steps = Object.keys(this.fieldData);
+        let index = steps.indexOf(this.selectedKey);
+        if (this.data?.sectionType === 'admissionForm' && index === steps.length - 1 && !(this.selectedAcademicYear && this.selectedGradeId)) {
+            this.snackBar.open('Selected Grade and Academic Year first', 'close', { duration: 2000 });
+            return;
+        }
+        if (this.data?.sectionType === 'admissionForm')
+            this.selectedKey = index === steps.length - 1 ? 'Payment' : steps[index + 1];
+        else
+            this.selectedKey = steps[index + 1];
+    }
+    getFeeStructure() {
+        if (!this.selectedAcademicYear || !this.selectedGradeId)
+            return;
+        let year = this.selectedAcademicYear.split("-");
+        let payload = {
+            "businessId": this.businessId,
+            "startYear": Number(year[0]),
+            "endYear": Number(year[1]),
+            "pageNo": 0,
+            "size": 1,
+            "gradeIds": [this.selectedGradeId],
+            "searchText": ""
+        };
+        this.restService.getFeeStructure(payload).subscribe((res) => {
+            this.payload.studentFeeStructure = res.data.data[0];
+            this.subscriptionsData = JSON.parse(JSON.stringify(this.payload.studentFeeStructure.subscriptionPlans));
+            this.payload.studentFeeStructure.subscriptionPlans = [];
+        });
+    }
+    inputFieldChange(item, field) {
+        if (field.fieldLabel === 'Academic Year') {
+            this.selectedAcademicYear = item.name;
+            this.getFeeStructure();
+        }
+        if (field.fieldLabel === 'Grade') {
+            this.selectedGradeId = item.id;
+            this.getFeeStructure();
+        }
+    }
+    arrangeSubscriptionForAdmission(subscriptionList) {
+        let response = {};
+        for (let subscription of subscriptionList) {
+            if (!response[subscription.subscriptionType]) {
+                response[subscription.subscriptionType] = [];
+            }
+            response[subscription.subscriptionType].push(subscription);
+        }
+        return response;
+    }
+    arrangeFeeConfig(feeConfigList) {
+        let response = {};
+        for (let config of feeConfigList) {
+            if (!response[config.feeType])
+                response[config.feeType] = [];
+            response[config.feeType].push(config);
+        }
+        return response;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n            [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div>\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button.styles\" [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n            (click)=\"submitForm()\" [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\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}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\"\r\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div>\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\"\r\n            [subscriptionsData]=\"subscriptionsData\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\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}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.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"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
                 //directive
                 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"] }, { 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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11$1.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.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"] }] }); }
 }
@@ -7895,7 +8121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatOptionModule,
                         MatSelectModule,
                         FormsModule
-                    ], template: "<section  simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n            [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div>\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button.styles\" [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n            (click)=\"submitForm()\" [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\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}.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}.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}\n"] }]
+                    ], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\"\r\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div>\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\"\r\n            [subscriptionsData]=\"subscriptionsData\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\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}.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}.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}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.MatSnackBar }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{