simpo-component-library 3.5.46 → 3.6.51

package/fesm2022/simpo-component-library.mjs

@@ -732,6 +732,9 @@ class ElementServiceService {
     getAllVehicleTypes(data) {
         return this.http.put(this.CMIS_URL + `crm/get/vehicle-type`, data);
     }
+    getAllCombos(data) {
+        return this.http.put(this.CMIS_URL + `crm/combo/filter`, data);
+    }
     getAllStops(bId) {
         return this.http.get(this.CMIS_URL + `crm/stops/${bId}?pageNo=0&size=10&isPagination=false`);
     }
@@ -2061,6 +2064,7 @@ class HoverAnimationDirective {
         const animationType = this.animationData?.contentAnimation;
         const parentElement = this.el.nativeElement.parentElement;
         if (animationType === 'hover') {
+            this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
             this.renderer.setStyle(this.el.nativeElement, 'opacity', '0');
             this.renderer.setStyle(this.el.nativeElement, 'transition', 'opacity 1s ease');
             if (parentElement) {
@@ -2073,6 +2077,7 @@ class HoverAnimationDirective {
             }
         }
         else if (animationType === 'grow-shadow') {
+            this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
             this.renderer.setStyle(this.el.nativeElement, 'transition', 'box-shadow 0.3s ease');
             if (parentElement) {
                 this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
@@ -2084,6 +2089,7 @@ class HoverAnimationDirective {
             }
         }
         else if (animationType === 'pop-bounce') {
+            this.renderer.setStyle(this.el.nativeElement, 'opacity', '1');
             this.renderer.setStyle(this.el.nativeElement, 'transition', 'transform 0.3s ease');
             if (parentElement) {
                 this.mouseEnterListener = this.renderer.listen(parentElement, 'mouseenter', () => {
@@ -2714,6 +2720,7 @@ class PaymentDetailsComponent {
         this.routeValues = [];
         this.vehicleTypeSearchText = '';
         this.defaultImage = 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/917067c1734337280303cancel.png';
+        this.listAllKits = [];
     }
     ngOnInit() {
         // this.admissionData.subscriptionPlans =[]
@@ -2757,6 +2764,7 @@ class PaymentDetailsComponent {
         }
         this.getAllStops();
         this.getVehicleTypes();
+        this.getAllKits();
     }
     getAllStops() {
         this.restService.getAllStops(this.admissionData?.businessDetails?.id).subscribe({
@@ -3050,8 +3058,67 @@ class PaymentDetailsComponent {
             this.feeStructure.totalFee += amount;
         }
     }
+    getAllKits() {
+        let data = {
+            "businessId": this.admissionData ? this.admissionData.businessDetails.id : '',
+            "target": "GRADE",
+            "gradeId": localStorage.getItem('gId') || '',
+            "pageNo": 0,
+            "size": 100000
+        };
+        this.restService.getAllCombos(data).subscribe((res) => {
+            res.data.data.forEach((element) => {
+                this.listAllKits.push({
+                    id: element.id,
+                    img: element.imageUrl,
+                    name: element.name,
+                    description: element.description,
+                    amount: (element.discountedPrice != 0 || element.discountedPrice != null) ? element.discountedPrice : element.totalPrice,
+                    originalAmount: element.totalPrice,
+                    discountedAmount: element.discountedPrice,
+                    paid: false,
+                    kitPaymentSelected: true,
+                    selected: false
+                });
+            });
+            if (this.admissionData.selectedComboKits.length > 0) {
+                this.listAllKits = this.listAllKits.map((kit) => {
+                    const selected = this.admissionData.selectedComboKits.find((sk) => sk.id === kit.id);
+                    return selected ? selected : kit;
+                });
+            }
+        }, (err) => {
+            this.snackBar.open(err.error ? err.error.message : err.statusText, 'Close', {
+                duration: 1500
+            });
+        });
+    }
+    addRemoveKit(item, ev) {
+        if (ev.target.checked) {
+            const exists = this.admissionData.selectedComboKits.some((kit) => kit.id === item.id);
+            if (!exists) {
+                this.admissionData.selectedComboKits.push(item);
+                this.calculateTotalAmountV2(1, item);
+            }
+        }
+        else {
+            this.calculateTotalAmountV2(-1, item);
+            this.admissionData.selectedComboKits = this.admissionData.selectedComboKits.filter((kit) => kit.id !== item.id);
+        }
+    }
+    changePaymentStatus(item) {
+        if (!item.kitPaymentSelected) {
+            this.calculateTotalAmountV2(-1, item);
+        }
+        else {
+            this.calculateTotalAmountV2(1, item);
+        }
+    }
+    hasActiveKits() {
+        return this.admissionData.selectedComboKits.length > 0;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentDetailsComponent, deps: [{ token: ElementServiceService }, { token: i2$2.MatSnackBar }], 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", termPaymentList: "termPaymentList" }, 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\r\n      <div class=\"left-side mt-10\">\r\n        <p class=\"heading\">Payment Plan</p>\r\n\r\n        <div class=\"d-flex g-2\">\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Annually\r\n            </label>\r\n          </div>\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Term\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\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\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n  <div class=\"left_payment_details h-100 p-2\">\r\n    <div class=\"fees_section\">\r\n      <div class=\"sec_title\">\r\n        Fees\r\n      </div>\r\n      <div class=\"mt-2 all_fee_configs\">\r\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n          <div class=\"single_fee_config p-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n            </div>\r\n            <div *ngIf=\"item.termsList.length > 0\">\r\n              <div class=\"change_selection\">\r\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n                name=\"termOption_{{ item.feeHead.id}}\"\r\n                  (change)=\"changeTermValue(item)\">\r\n                  <mat-radio-button value=\"SINGLE\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n                  <mat-radio-button value=\"TERM\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n                </mat-radio-group>\r\n              </div>\r\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n                <div class=\"check_data\">\r\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"title\">Transport Fee</div>\r\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.stopName | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.vehicleType | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of routeValues\">\r\n            <div class=\"single_fee_config p-3\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n                  <div class=\"fee_title\">\r\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      -\r\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      )</span>\r\n                  </div>\r\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n                </div>\r\n              </div>\r\n\r\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n                    <mat-radio-button value=\"SINGLE\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n                    <mat-radio-button value=\"TERM\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n                  </mat-radio-group>\r\n                </div>\r\n\r\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n        <div class=\"title\">Subscriptions</div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of subscriptionsData\">\r\n            <div class=\"top_1\">\r\n              <div class=\"d-flex align-items-center gap-3\">\r\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n                <div class=\"subscription_title\">\r\n                  {{item.subscriptionTitle}}\r\n                </div>\r\n              </div>\r\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\r\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n                    </div>\r\n                    <div class=\"single_value\">\r\n                      {{subV.amount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"right_payment_details h-100\">\r\n    <div class=\"total_payment_details h-100 w-100 p-3\">\r\n      <div class=\"mt-2 calculation_table\">\r\n        <div class=\"calculation_single_part\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Total Academic Fee Breakdown\r\n          </div>\r\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n                  \u20B9 {{item.amount}}\r\n                </span>\r\n                <span\r\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of item.termsList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Transport Fee\r\n          </div>\r\n          <ng-container>\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\"\r\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n                \u20B9\r\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n                    *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Subscriptions\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n              <ng-container>\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"key\">\r\n                    {{item.frequency | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.pricing[item.frequency]}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer_section total_container\">\r\n        <div class=\"footer_title\">Grand Total Fee</div>\r\n        <div class=\"d-flex justify-content-center align-items-center\">\r\n          \u20B9 {{feeStructure?.totalFee}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}\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: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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.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: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], 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"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    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", termPaymentList: "termPaymentList" }, 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\r\n      <div class=\"left-side mt-10\">\r\n        <p class=\"heading\">Payment Plan</p>\r\n\r\n        <div class=\"d-flex g-2\">\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Annually\r\n            </label>\r\n          </div>\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Term\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\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\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n  <div class=\"left_payment_details h-100 p-2\">\r\n    <div class=\"fees_section\">\r\n      <div class=\"sec_title\">\r\n        Fees\r\n      </div>\r\n      <div class=\"mt-2 all_fee_configs\">\r\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n          <div class=\"single_fee_config p-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n            </div>\r\n            <div *ngIf=\"item.termsList.length > 0\">\r\n              <div class=\"change_selection\">\r\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n                name=\"termOption_{{ item.feeHead.id}}\"\r\n                  (change)=\"changeTermValue(item)\">\r\n                  <mat-radio-button value=\"SINGLE\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n                  <mat-radio-button value=\"TERM\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n                </mat-radio-group>\r\n              </div>\r\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n                <div class=\"check_data\">\r\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"title\">Transport Fee</div>\r\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.stopName | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.vehicleType | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of routeValues\">\r\n            <div class=\"single_fee_config p-3\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n                  <div class=\"fee_title\">\r\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      -\r\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      )</span>\r\n                  </div>\r\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n                </div>\r\n              </div>\r\n\r\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n                    <mat-radio-button value=\"SINGLE\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n                    <mat-radio-button value=\"TERM\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n                  </mat-radio-group>\r\n                </div>\r\n\r\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n        <div class=\"title\">Subscriptions</div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of subscriptionsData\">\r\n            <div class=\"top_1\">\r\n              <div class=\"d-flex align-items-center gap-3\">\r\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n                <div class=\"subscription_title\">\r\n                  {{item.subscriptionTitle}}\r\n                </div>\r\n              </div>\r\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\r\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n                    </div>\r\n                    <div class=\"single_value\">\r\n                      {{subV.amount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"listAllKits.length > 0\">\r\n        <div class=\"title\">Student Kit</div>\r\n        <div class=\"list_all_subscriptions mt-2 d-flex gap-2 flex-wrap\">\r\n          <ng-container *ngFor=\"let item of listAllKits;let i = index\">\r\n            <div class=\"single_kit\">\r\n              <div class=\"top_layer d-flex justify-content-between align-items-center\">\r\n                <div class=\"selection\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selected\" class=\"cursor-pointer\"\r\n                  (change)=\"addRemoveKit(item,$event)\">\r\n                </div>\r\n                <div class=\"amount_section\">\r\n                  <div class=\"original_amount\" *ngIf=\"item.discountedAmount === 0\">\u20B9 {{item.amount}}</div>\r\n                  <div class=\"discounted_amount\" *ngIf=\"item.discountedAmount != 0\">\r\n                    \u20B9\r\n                    <span class=\"strikethrough\">{{item.originalAmount}}</span> &nbsp;\r\n                    <span style=\"font-family:var(--primary-semi-bold-font-family)\">{{item.discountedAmount}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_bottom_layer\">\r\n                <div class=\"image_section d-flex justify-content-center align-items-center\">\r\n                  <div class=\"img_sec\" *ngIf=\"item.img != null\"><img [src]=\"item.img\" alt=\"\"></div>\r\n                  <div class=\"img_sec d-flex justify-content-center align-items-center\" *ngIf=\"item.img === null\">\r\n                    {{item.name.split('')[0] | uppercase}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"mt-2 kit_title text-center\">\r\n                  {{item.name}}\r\n                </div>\r\n                <div class=\"kit_description text-center\" style=\"margin-top:4px\">\r\n                  {{item.description}}\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_footer_layer mt-2\" *ngIf=\"item.selected\">\r\n                <div class=\"d-flex align-items-center justify-content-center gap-3 paying_options\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.kitPaymentSelected\"\r\n                  (ngModelChange)=\"changePaymentStatus(item)\">\r\n                    <mat-radio-button [value]=\"true\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Now</span></mat-radio-button>\r\n                    <mat-radio-button [value]=\"false\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Later</span></mat-radio-button>\r\n                  </mat-radio-group>                  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"right_payment_details h-100\">\r\n    <div class=\"total_payment_details h-100 w-100 p-3\">\r\n      <div class=\"mt-2 calculation_table\">\r\n        <div class=\"calculation_single_part\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Total Academic Fee Breakdown\r\n          </div>\r\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n                  \u20B9 {{item.amount}}\r\n                </span>\r\n                <span\r\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of item.termsList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Transport Fee\r\n          </div>\r\n          <ng-container>\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\"\r\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n                \u20B9\r\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n                    *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Subscriptions\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n              <ng-container>\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"key\">\r\n                    {{item.frequency | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.pricing[item.frequency]}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveKits()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Student Kits\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.selectedComboKits\">\r\n              <ng-container *ngIf=\"item?.kitPaymentSelected\">\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"fee_title\">\r\n                    {{item.name | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.amount}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer_section total_container\">\r\n        <div class=\"footer_title\">Grand Total Fee</div>\r\n        <div class=\"d-flex justify-content-center align-items-center\">\r\n          \u20B9 {{feeStructure?.totalFee}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.discounted_amount span,.original_amount{font-family:var(--primary-font-family);font-weight:500;font-size:13px}.img_sec{width:60px;height:60px;border-radius:50%;border:2px solid #0f9af1;font-size:18px;font-family:var(--primary-semi-bold-font-family);font-weight:500}.img_sec img{width:100%;height:100%;border-radius:50%}.selection input{width:16px;height:16px}.kit_title{font-size:14px;font-family:var(--primary-font-family);font-weight:500;color:#000}.kit_description{color:#434443;font-size:13px;font-family:var(--primary-font-family);font-weight:500}.paying_options label{font-size:14px;font-family:var(--primary-font-family);font-weight:500}.paying_options label input{width:16px;height:16px}.kit_bottom_layer{height:150px;overflow-y:scroll}.single_kit{background-color:#f2f2f9;padding:10px;border-radius:6px;width:32%}\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: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][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"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], 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"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentDetailsComponent, decorators: [{
             type: Component,
@@ -3066,7 +3133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatDialogModule,
                         MatAutocompleteModule,
                         MatInputModule
-                    ], 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\r\n      <div class=\"left-side mt-10\">\r\n        <p class=\"heading\">Payment Plan</p>\r\n\r\n        <div class=\"d-flex g-2\">\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Annually\r\n            </label>\r\n          </div>\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Term\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\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\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n  <div class=\"left_payment_details h-100 p-2\">\r\n    <div class=\"fees_section\">\r\n      <div class=\"sec_title\">\r\n        Fees\r\n      </div>\r\n      <div class=\"mt-2 all_fee_configs\">\r\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n          <div class=\"single_fee_config p-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n            </div>\r\n            <div *ngIf=\"item.termsList.length > 0\">\r\n              <div class=\"change_selection\">\r\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n                name=\"termOption_{{ item.feeHead.id}}\"\r\n                  (change)=\"changeTermValue(item)\">\r\n                  <mat-radio-button value=\"SINGLE\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n                  <mat-radio-button value=\"TERM\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n                </mat-radio-group>\r\n              </div>\r\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n                <div class=\"check_data\">\r\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"title\">Transport Fee</div>\r\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.stopName | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.vehicleType | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of routeValues\">\r\n            <div class=\"single_fee_config p-3\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n                  <div class=\"fee_title\">\r\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      -\r\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      )</span>\r\n                  </div>\r\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n                </div>\r\n              </div>\r\n\r\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n                    <mat-radio-button value=\"SINGLE\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n                    <mat-radio-button value=\"TERM\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n                  </mat-radio-group>\r\n                </div>\r\n\r\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n        <div class=\"title\">Subscriptions</div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of subscriptionsData\">\r\n            <div class=\"top_1\">\r\n              <div class=\"d-flex align-items-center gap-3\">\r\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n                <div class=\"subscription_title\">\r\n                  {{item.subscriptionTitle}}\r\n                </div>\r\n              </div>\r\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\r\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n                    </div>\r\n                    <div class=\"single_value\">\r\n                      {{subV.amount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"right_payment_details h-100\">\r\n    <div class=\"total_payment_details h-100 w-100 p-3\">\r\n      <div class=\"mt-2 calculation_table\">\r\n        <div class=\"calculation_single_part\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Total Academic Fee Breakdown\r\n          </div>\r\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n                  \u20B9 {{item.amount}}\r\n                </span>\r\n                <span\r\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of item.termsList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Transport Fee\r\n          </div>\r\n          <ng-container>\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\"\r\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n                \u20B9\r\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n                    *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Subscriptions\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n              <ng-container>\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"key\">\r\n                    {{item.frequency | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.pricing[item.frequency]}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer_section total_container\">\r\n        <div class=\"footer_title\">Grand Total Fee</div>\r\n        <div class=\"d-flex justify-content-center align-items-center\">\r\n          \u20B9 {{feeStructure?.totalFee}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}\n"] }]
+                    ], 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\r\n      <div class=\"left-side mt-10\">\r\n        <p class=\"heading\">Payment Plan</p>\r\n\r\n        <div class=\"d-flex g-2\">\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Annually\r\n            </label>\r\n          </div>\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Term\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\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\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n  <div class=\"left_payment_details h-100 p-2\">\r\n    <div class=\"fees_section\">\r\n      <div class=\"sec_title\">\r\n        Fees\r\n      </div>\r\n      <div class=\"mt-2 all_fee_configs\">\r\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n          <div class=\"single_fee_config p-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n            </div>\r\n            <div *ngIf=\"item.termsList.length > 0\">\r\n              <div class=\"change_selection\">\r\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n                name=\"termOption_{{ item.feeHead.id}}\"\r\n                  (change)=\"changeTermValue(item)\">\r\n                  <mat-radio-button value=\"SINGLE\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n                  <mat-radio-button value=\"TERM\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n                </mat-radio-group>\r\n              </div>\r\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n                <div class=\"check_data\">\r\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"title\">Transport Fee</div>\r\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.stopName | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.vehicleType | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of routeValues\">\r\n            <div class=\"single_fee_config p-3\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n                  <div class=\"fee_title\">\r\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      -\r\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      )</span>\r\n                  </div>\r\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n                </div>\r\n              </div>\r\n\r\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n                    <mat-radio-button value=\"SINGLE\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n                    <mat-radio-button value=\"TERM\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n                  </mat-radio-group>\r\n                </div>\r\n\r\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n        <div class=\"title\">Subscriptions</div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of subscriptionsData\">\r\n            <div class=\"top_1\">\r\n              <div class=\"d-flex align-items-center gap-3\">\r\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n                <div class=\"subscription_title\">\r\n                  {{item.subscriptionTitle}}\r\n                </div>\r\n              </div>\r\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\r\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n                    </div>\r\n                    <div class=\"single_value\">\r\n                      {{subV.amount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"listAllKits.length > 0\">\r\n        <div class=\"title\">Student Kit</div>\r\n        <div class=\"list_all_subscriptions mt-2 d-flex gap-2 flex-wrap\">\r\n          <ng-container *ngFor=\"let item of listAllKits;let i = index\">\r\n            <div class=\"single_kit\">\r\n              <div class=\"top_layer d-flex justify-content-between align-items-center\">\r\n                <div class=\"selection\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selected\" class=\"cursor-pointer\"\r\n                  (change)=\"addRemoveKit(item,$event)\">\r\n                </div>\r\n                <div class=\"amount_section\">\r\n                  <div class=\"original_amount\" *ngIf=\"item.discountedAmount === 0\">\u20B9 {{item.amount}}</div>\r\n                  <div class=\"discounted_amount\" *ngIf=\"item.discountedAmount != 0\">\r\n                    \u20B9\r\n                    <span class=\"strikethrough\">{{item.originalAmount}}</span> &nbsp;\r\n                    <span style=\"font-family:var(--primary-semi-bold-font-family)\">{{item.discountedAmount}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_bottom_layer\">\r\n                <div class=\"image_section d-flex justify-content-center align-items-center\">\r\n                  <div class=\"img_sec\" *ngIf=\"item.img != null\"><img [src]=\"item.img\" alt=\"\"></div>\r\n                  <div class=\"img_sec d-flex justify-content-center align-items-center\" *ngIf=\"item.img === null\">\r\n                    {{item.name.split('')[0] | uppercase}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"mt-2 kit_title text-center\">\r\n                  {{item.name}}\r\n                </div>\r\n                <div class=\"kit_description text-center\" style=\"margin-top:4px\">\r\n                  {{item.description}}\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_footer_layer mt-2\" *ngIf=\"item.selected\">\r\n                <div class=\"d-flex align-items-center justify-content-center gap-3 paying_options\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.kitPaymentSelected\"\r\n                  (ngModelChange)=\"changePaymentStatus(item)\">\r\n                    <mat-radio-button [value]=\"true\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Now</span></mat-radio-button>\r\n                    <mat-radio-button [value]=\"false\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Later</span></mat-radio-button>\r\n                  </mat-radio-group>                  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"right_payment_details h-100\">\r\n    <div class=\"total_payment_details h-100 w-100 p-3\">\r\n      <div class=\"mt-2 calculation_table\">\r\n        <div class=\"calculation_single_part\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Total Academic Fee Breakdown\r\n          </div>\r\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n                  \u20B9 {{item.amount}}\r\n                </span>\r\n                <span\r\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of item.termsList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Transport Fee\r\n          </div>\r\n          <ng-container>\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\"\r\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n                \u20B9\r\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n                    *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Subscriptions\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n              <ng-container>\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"key\">\r\n                    {{item.frequency | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.pricing[item.frequency]}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveKits()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Student Kits\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.selectedComboKits\">\r\n              <ng-container *ngIf=\"item?.kitPaymentSelected\">\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"fee_title\">\r\n                    {{item.name | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.amount}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer_section total_container\">\r\n        <div class=\"footer_title\">Grand Total Fee</div>\r\n        <div class=\"d-flex justify-content-center align-items-center\">\r\n          \u20B9 {{feeStructure?.totalFee}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.discounted_amount span,.original_amount{font-family:var(--primary-font-family);font-weight:500;font-size:13px}.img_sec{width:60px;height:60px;border-radius:50%;border:2px solid #0f9af1;font-size:18px;font-family:var(--primary-semi-bold-font-family);font-weight:500}.img_sec img{width:100%;height:100%;border-radius:50%}.selection input{width:16px;height:16px}.kit_title{font-size:14px;font-family:var(--primary-font-family);font-weight:500;color:#000}.kit_description{color:#434443;font-size:13px;font-family:var(--primary-font-family);font-weight:500}.paying_options label{font-size:14px;font-family:var(--primary-font-family);font-weight:500}.paying_options label input{width:16px;height:16px}.kit_bottom_layer{height:150px;overflow-y:scroll}.single_kit{background-color:#f2f2f9;padding:10px;border-radius:6px;width:32%}\n"] }]
         }], ctorParameters: () => [{ type: ElementServiceService }, { type: i2$2.MatSnackBar }], propDecorators: { admissionData: [{
                 type: Input
             }], subscriptionsData: [{
@@ -4913,9 +4980,9 @@ class ImageSectionComponent extends BaseSection {
         this._eventService.buttonRedirection.emit({ data: this.buttonContent });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\" (click)=\"redirectTo()\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.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\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\" (click)=\"redirectTo()\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <!-- <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.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\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
+                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: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageSectionComponent, decorators: [{
             type: Component,
@@ -4943,8 +5010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective,
-                        ImageEditorDirective
-                    ], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\" (click)=\"redirectTo()\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.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\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"] }]
+                        ImageEditorDirective,
+                        TextEditorComponent,
+                    ], template: "<section [id]=\"data?.id\" [ngClass]=\"{'mergeNavbar':canMergeNavbar}\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"img-text-card\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <!-- <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div> -->\r\n\r\n                <div class=\"image-section w-100\" (click)=\"redirectTo()\">\r\n                    <img loading=\"lazy\" [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [ngStyle]=\"{'opacity': (canMergeNavbar ? '0' : getBackgroundOpacity)}\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n\r\n                </div>\r\n                <div *ngIf=\"style?.showText\" class=\"col-lg-9 d-flex flex-column content-side\" class=\"text-mobile\" style=\"position: absolute;\" [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoContentAlignment]=\"style?.contentAlignment\" [id]=\"data?.id\">\r\n                  <div *ngFor=\"let item of content?.inputText\">\r\n                    <!-- <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                  </div>\r\n                  <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.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\" [isMerged]=\"style?.merge ?? false\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.img-text-card{display:flex;align-items:center;justify-content:center}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.mergeNavbar{margin-top:-175px}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.image-section img{object-fit:cover}.text-content-card{justify-content:center;align-items:center}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:15rem;border-radius:1rem;margin-bottom:10%}.main-section{min-height:auto!important}.text-image{position:absolute;height:14rem}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -10919,6 +10987,7 @@ class RegistrationFormComponent extends BaseSection {
             "backupDoc": '',
             "paymentPlanType": 'ANNUALLY',
             "subscriptionPlans": [],
+            "selectedComboKits": [],
             "admissionPaymentDetail": {
                 "amount": 0,
                 "paymentDate": new Date(),
@@ -11345,6 +11414,7 @@ class RegistrationFormComponent extends BaseSection {
     getFeeStructure() {
         if (!this.selectedAcademicYear || !this.selectedGradeId)
             return;
+        localStorage.setItem('gId', this.selectedGradeId);
         let payload = {
             // "businessId": this.businessId,
             // "startYear": Number(year[0]),
@@ -11557,6 +11627,12 @@ class RegistrationFormComponent extends BaseSection {
                     });
                     item.fieldValue = '';
                 }
+                if (exactAge < 6) {
+                    this.snackBar.open('Student below 6 years is not eligible for CBSE admission.', 'Ok', {
+                        duration: 3500
+                    });
+                    item.fieldValue = '';
+                }
             }
             if (fieldGroupName.some((name) => name.includes('mother'))) {
                 const age = today.getFullYear() - enteredDate.getFullYear();
@@ -12042,7 +12118,7 @@ class MovingTextComponent extends BaseSection {
         }, 3000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MovingTextComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n        [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"data?.styles?.headlineAnimationType == 'InfiniteScroll'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"sliding-text\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"data?.styles?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"list-item d-flex align-items-center justify-content-center w-100\" [ngClass]=\"{\r\n                        'active': currentIndex === i,\r\n                        'fade-in-left': animationDirection === 'left' && currentIndex === i,\r\n                        'fade-in-right': animationDirection === 'right' && currentIndex === i\r\n                     }\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"data?.styles?.headlineAnimationType == 'NoEffect'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n                <div class=\"d-flex align-items-center justify-content-center w-100\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- Your existing edit/delete elements -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:40px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\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: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n        [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"data?.styles?.headlineAnimationType == 'InfiniteScroll'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"sliding-text\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"data?.styles?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"list-item d-flex align-items-center justify-content-center w-100\" [ngClass]=\"{\r\n                        'active': currentIndex === i,\r\n                        'fade-in-left': animationDirection === 'left' && currentIndex === i,\r\n                        'fade-in-right': animationDirection === 'right' && currentIndex === i\r\n                     }\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"data?.styles?.headlineAnimationType == 'NoEffect'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n                <div class=\"d-flex align-items-center justify-content-center w-100\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- Your existing edit/delete elements -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\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: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MovingTextComponent, decorators: [{
             type: Component,
@@ -12054,7 +12130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoHoverBorderDirective,
                         HoverDirective,
                         TextBackgroundDirectiveDirective,
-                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n        [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"data?.styles?.headlineAnimationType == 'InfiniteScroll'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"sliding-text\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"data?.styles?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"list-item d-flex align-items-center justify-content-center w-100\" [ngClass]=\"{\r\n                        'active': currentIndex === i,\r\n                        'fade-in-left': animationDirection === 'left' && currentIndex === i,\r\n                        'fade-in-right': animationDirection === 'right' && currentIndex === i\r\n                     }\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"data?.styles?.headlineAnimationType == 'NoEffect'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n                <div class=\"d-flex align-items-center justify-content-center w-100\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- Your existing edit/delete elements -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:40px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:40px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"] }]
+                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n        [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"data?.styles?.headlineAnimationType == 'InfiniteScroll'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"sliding-text\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div *ngIf=\"data?.styles?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"list-item d-flex align-items-center justify-content-center w-100\" [ngClass]=\"{\r\n                        'active': currentIndex === i,\r\n                        'fade-in-left': animationDirection === 'left' && currentIndex === i,\r\n                        'fade-in-right': animationDirection === 'right' && currentIndex === i\r\n                     }\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"data?.styles?.headlineAnimationType == 'NoEffect'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n                <div class=\"d-flex align-items-center justify-content-center w-100\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- Your existing edit/delete elements -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -13234,6 +13310,8 @@ class ProductDescComponent extends BaseSection {
         this.recentViewItemList = [];
         this.reviewTitle = "";
         this.reviewDescription = "";
+        this.isDescriptionCollapsed = true;
+        this.isPriceBreakup = true;
         // this.metaTagService.updateTag({ name: "description", content: "Testing" });
         // this.metaTagService.updateTag({ property: "og:title", content: "Title" });
         // this.metaTagService.updateTag({ property: "og:image", content: "https://dev-beeos.s3.amazonaws.com/library-media/848728c1726086009656images.png" });
@@ -13603,6 +13681,16 @@ class ProductDescComponent extends BaseSection {
                 return "14 Carats";
             case 'K10':
                 return "10 Carats";
+            case 'K999':
+                return "99.9% Pure";
+            case 'K925':
+                return "92.5% Pure";
+            case 'K900':
+                return "90% Pure";
+            case 'VS':
+                return "Very Slightly Included";
+            case 'SI':
+                return "Slightly Included";
             default:
                 return "24 Carats";
         }
@@ -13615,8 +13703,14 @@ class ProductDescComponent extends BaseSection {
             return 0;
         }
     }
+    toggleDescription() {
+        this.isDescriptionCollapsed = !this.isDescriptionCollapsed;
+    }
+    togglePriceBreakDown() {
+        this.isPriceBreakup = !this.isPriceBreakup;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i5$1.MessageService }, { token: i1$1.Meta }, { token: i1$1.Title }, { token: i8$3.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n\r\n        <div>\r\n          <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\" *ngIf=\"responseData?.descriptor?.name\">\r\n            <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n              [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n          </p-panel>\r\n          <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n            <p-panel header=\"Pricing Breakdown\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\r\n              <div class=\"jewellery-table-container\">\r\n                <table class=\"jewellery-table\">\r\n                  <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n                    <tr class=\"material-header\">\r\n                      <td colspan=\"8\">{{ele.materialType | titlecase}}</td>\r\n                    </tr>\r\n                    <tr class=\"column-header\">\r\n                      <th colspan=\"2\">{{ele.materialType | titlecase}} Type</th>\r\n                      <th colspan=\"2\">Net Weight/Gram</th>\r\n                      <th colspan=\"2\">Price/Gram</th>\r\n                      <th colspan=\"2\">Value</th>\r\n                    </tr>\r\n                    <tr class=\"material-row\">\r\n                      <td colspan=\"2\">{{ getCarat(ele.materialPurity)}}</td>\r\n                      <td colspan=\"2\">{{ele.primaryMaterialWeight}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) | number:'1.2-2'}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ele.materialPrice | number:'1.2-2'}}</td>\r\n                    </tr>\r\n                  </ng-container>\r\n                  <tr class=\"material-header\">\r\n                    <td colspan=\"8\">Making Charges</td>\r\n                  </tr>\r\n                  <tr class=\"column-header\">\r\n                    <th colspan=\"2\">Component</th>\r\n                    <th colspan=\"2\">Net Weight</th>\r\n                    <th colspan=\"2\">Making Charge %</th>\r\n                    <th colspan=\"2\">Value</th>\r\n                  </tr>\r\n                  <tr class=\"material-row\">\r\n                    <td colspan=\"2\">Making Charges</td>\r\n                    <td colspan=\"2\">{{responseData?.baseWeight}}</td>\r\n                    <td colspan=\"2\">{{responseData?.makingChargePercentage}}</td>\r\n                    <td colspan=\"2\">\u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}</td>\r\n                  </tr>\r\n\r\n                  <!-- <tr class=\"charges-header\">\r\n                    <td colspan=\"4\">Making Charges%</td>\r\n                    <td colspan=\"4\">{{responseData?.makingChargePercentage ?? 0}}%</td>\r\n                  </tr> -->\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\">Total Value</td>\r\n                    <td colspan=\"2\" class=\"text-start\">\u20B9{{responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2'}}</td>\r\n                  </tr>\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\">Tax Amount ({{(responseData?.jewelryPriceBreakup?.taxRef?.taxPercent)+ \"%\" + \" \" + \"GST\"}})</td>\r\n                    <td colspan=\"2\" class=\"text-start\">\u20B9{{responseData?.jewelryPriceBreakup?.taxAmount  | number:'1.2-2'}}</td>\r\n                  </tr> \r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\">Total</td>\r\n                    <td colspan=\"2\" class=\"text-start\">\u20B9{{(responseData?.jewelryPriceBreakup.priceWithoutTax + responseData?.jewelryPriceBreakup.taxAmount)  | number:'1.2-2'}}</td>\r\n                  </tr>\r\n                </table>\r\n              </div>\r\n            </p-panel>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n        <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n    <div class=\"mb-15\">\r\n      <div class=\"varient-key\">{{varient.key}}</div>\r\n      <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n        <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n        <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n          [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n          [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n          (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.sellingPrice\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    <div class=\"tax-text\">(Inclusive all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img\" style=\"height: 100%; width: 100%;\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.strike-through{text-decoration:line-through;color:#d3d3d3}.jewellery-table-container{padding:15px;border-radius:8px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { 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.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: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i15.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i17.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n\r\n        <div>\r\n          <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"isDescriptionCollapsed\"\r\n            *ngIf=\"responseData?.descriptor?.name\" styleClass=\"smooth-panel\" (click)=\"toggleDescription()\">\r\n            <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n              [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n          </p-panel>\r\n          <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n            <p-panel header=\"Pricing Breakdown\" [toggleable]=\"true\" [collapsed]=\"true\"  styleClass=\"smooth-panel\" [collapsed]=\"isPriceBreakup\" (click)=\"togglePriceBreakDown()\">\r\n              <div class=\"jewellery-table-container\">\r\n                <table class=\"jewellery-table\">\r\n                  <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n                    <tr class=\"material-header\">\r\n                      <td colspan=\"8\">{{ele.materialType | titlecase}}</td>\r\n                    </tr>\r\n                    <tr class=\"column-header\">\r\n                      <th colspan=\"2\">{{ele.materialType | titlecase}} Type</th>\r\n                      <th colspan=\"2\">Net Weight/Gram</th>\r\n                      <th colspan=\"2\">Price/Gram</th>\r\n                      <th colspan=\"2\">Value</th>\r\n                    </tr>\r\n                    <tr class=\"material-row\">\r\n                      <td colspan=\"2\">{{ getCarat(ele.materialPurity)}}</td>\r\n                      <td colspan=\"2\">{{ele.primaryMaterialWeight}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                        number:'1.2-2'}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ele.materialPrice | number:'1.2-2'}}</td>\r\n                    </tr>\r\n                  </ng-container>\r\n                  <tr class=\"material-header\">\r\n                    <td colspan=\"8\">Making Charges</td>\r\n                  </tr>\r\n                  <tr class=\"column-header\">\r\n                    <th colspan=\"2\">Component</th>\r\n                    <th colspan=\"2\">Net Weight</th>\r\n                    <th colspan=\"2\">Making Charge %</th>\r\n                    <th colspan=\"2\">Value</th>\r\n                  </tr>\r\n                  <tr class=\"material-row\">\r\n                    <td colspan=\"2\">Making Charges</td>\r\n                    <td colspan=\"2\">{{responseData?.baseWeight}}</td>\r\n                    <td colspan=\"2\">{{responseData?.makingChargePercentage}}</td>\r\n                    <td colspan=\"2\">\u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}</td>\r\n                  </tr>\r\n\r\n                  <!-- <tr class=\"charges-header\">\r\n                    <td colspan=\"4\">Making Charges%</td>\r\n                    <td colspan=\"4\">{{responseData?.makingChargePercentage ?? 0}}%</td>\r\n                  </tr> -->\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\" class=\"fw-600\">Total Value</td>\r\n                    <td colspan=\"2\" class=\"text-start fw-600\">\u20B9{{responseData?.jewelryPriceBreakup?.priceWithoutTax |\r\n                      number:'1.2-2'}}</td>\r\n                  </tr>\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\" class=\"fw-600\">Tax Amount ({{(responseData?.jewelryPriceBreakup?.taxRef?.taxPercent)+ \"%\" + \" \" +\r\n                      \"GST\"}})</td>\r\n                    <td colspan=\"2\" class=\"text-start fw-600\">\u20B9{{responseData?.jewelryPriceBreakup?.taxAmount |\r\n                      number:'1.2-2'}}</td>\r\n                  </tr>\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\" class=\"fw-600\">Total</td>\r\n                    <td colspan=\"2\" class=\"text-start fw-600\">\u20B9{{(responseData?.jewelryPriceBreakup.priceWithoutTax +\r\n                      responseData?.jewelryPriceBreakup.taxAmount) | number:'1.2-2'}}</td>\r\n                  </tr>\r\n                </table>\r\n              </div>\r\n            </p-panel>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n        <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n    <div class=\"mb-15\">\r\n      <div class=\"varient-key\">{{varient.key}}</div>\r\n      <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n        <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n        <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n          [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n          [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n          (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n        [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.sellingPrice\"\r\n      [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    <div class=\"tax-text\">(Inclusive all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img\" style=\"height: 100%; width: 100%;\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer}.fw-600{font-weight:600}.jewellery-table-container{padding:15px;border-radius:8px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { 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.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: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i15.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i17.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -13643,7 +13737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CustomerReviewComponent,
                         PanelModule,
                         SvgDividerComponent
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n\r\n        <div>\r\n          <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\" *ngIf=\"responseData?.descriptor?.name\">\r\n            <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n              [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n          </p-panel>\r\n          <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n            <p-panel header=\"Pricing Breakdown\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\r\n              <div class=\"jewellery-table-container\">\r\n                <table class=\"jewellery-table\">\r\n                  <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n                    <tr class=\"material-header\">\r\n                      <td colspan=\"8\">{{ele.materialType | titlecase}}</td>\r\n                    </tr>\r\n                    <tr class=\"column-header\">\r\n                      <th colspan=\"2\">{{ele.materialType | titlecase}} Type</th>\r\n                      <th colspan=\"2\">Net Weight/Gram</th>\r\n                      <th colspan=\"2\">Price/Gram</th>\r\n                      <th colspan=\"2\">Value</th>\r\n                    </tr>\r\n                    <tr class=\"material-row\">\r\n                      <td colspan=\"2\">{{ getCarat(ele.materialPurity)}}</td>\r\n                      <td colspan=\"2\">{{ele.primaryMaterialWeight}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) | number:'1.2-2'}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ele.materialPrice | number:'1.2-2'}}</td>\r\n                    </tr>\r\n                  </ng-container>\r\n                  <tr class=\"material-header\">\r\n                    <td colspan=\"8\">Making Charges</td>\r\n                  </tr>\r\n                  <tr class=\"column-header\">\r\n                    <th colspan=\"2\">Component</th>\r\n                    <th colspan=\"2\">Net Weight</th>\r\n                    <th colspan=\"2\">Making Charge %</th>\r\n                    <th colspan=\"2\">Value</th>\r\n                  </tr>\r\n                  <tr class=\"material-row\">\r\n                    <td colspan=\"2\">Making Charges</td>\r\n                    <td colspan=\"2\">{{responseData?.baseWeight}}</td>\r\n                    <td colspan=\"2\">{{responseData?.makingChargePercentage}}</td>\r\n                    <td colspan=\"2\">\u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}</td>\r\n                  </tr>\r\n\r\n                  <!-- <tr class=\"charges-header\">\r\n                    <td colspan=\"4\">Making Charges%</td>\r\n                    <td colspan=\"4\">{{responseData?.makingChargePercentage ?? 0}}%</td>\r\n                  </tr> -->\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\">Total Value</td>\r\n                    <td colspan=\"2\" class=\"text-start\">\u20B9{{responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2'}}</td>\r\n                  </tr>\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\">Tax Amount ({{(responseData?.jewelryPriceBreakup?.taxRef?.taxPercent)+ \"%\" + \" \" + \"GST\"}})</td>\r\n                    <td colspan=\"2\" class=\"text-start\">\u20B9{{responseData?.jewelryPriceBreakup?.taxAmount  | number:'1.2-2'}}</td>\r\n                  </tr> \r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\">Total</td>\r\n                    <td colspan=\"2\" class=\"text-start\">\u20B9{{(responseData?.jewelryPriceBreakup.priceWithoutTax + responseData?.jewelryPriceBreakup.taxAmount)  | number:'1.2-2'}}</td>\r\n                  </tr>\r\n                </table>\r\n              </div>\r\n            </p-panel>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n        <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n    <div class=\"mb-15\">\r\n      <div class=\"varient-key\">{{varient.key}}</div>\r\n      <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n        <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n        <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n          [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n          [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n          (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.sellingPrice\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    <div class=\"tax-text\">(Inclusive all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img\" style=\"height: 100%; width: 100%;\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.strike-through{text-decoration:line-through;color:#d3d3d3}.jewellery-table-container{padding:15px;border-radius:8px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n\r\n        <div>\r\n          <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"isDescriptionCollapsed\"\r\n            *ngIf=\"responseData?.descriptor?.name\" styleClass=\"smooth-panel\" (click)=\"toggleDescription()\">\r\n            <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n              [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n          </p-panel>\r\n          <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n            <p-panel header=\"Pricing Breakdown\" [toggleable]=\"true\" [collapsed]=\"true\"  styleClass=\"smooth-panel\" [collapsed]=\"isPriceBreakup\" (click)=\"togglePriceBreakDown()\">\r\n              <div class=\"jewellery-table-container\">\r\n                <table class=\"jewellery-table\">\r\n                  <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n                    <tr class=\"material-header\">\r\n                      <td colspan=\"8\">{{ele.materialType | titlecase}}</td>\r\n                    </tr>\r\n                    <tr class=\"column-header\">\r\n                      <th colspan=\"2\">{{ele.materialType | titlecase}} Type</th>\r\n                      <th colspan=\"2\">Net Weight/Gram</th>\r\n                      <th colspan=\"2\">Price/Gram</th>\r\n                      <th colspan=\"2\">Value</th>\r\n                    </tr>\r\n                    <tr class=\"material-row\">\r\n                      <td colspan=\"2\">{{ getCarat(ele.materialPurity)}}</td>\r\n                      <td colspan=\"2\">{{ele.primaryMaterialWeight}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                        number:'1.2-2'}}</td>\r\n                      <td colspan=\"2\">\u20B9{{ele.materialPrice | number:'1.2-2'}}</td>\r\n                    </tr>\r\n                  </ng-container>\r\n                  <tr class=\"material-header\">\r\n                    <td colspan=\"8\">Making Charges</td>\r\n                  </tr>\r\n                  <tr class=\"column-header\">\r\n                    <th colspan=\"2\">Component</th>\r\n                    <th colspan=\"2\">Net Weight</th>\r\n                    <th colspan=\"2\">Making Charge %</th>\r\n                    <th colspan=\"2\">Value</th>\r\n                  </tr>\r\n                  <tr class=\"material-row\">\r\n                    <td colspan=\"2\">Making Charges</td>\r\n                    <td colspan=\"2\">{{responseData?.baseWeight}}</td>\r\n                    <td colspan=\"2\">{{responseData?.makingChargePercentage}}</td>\r\n                    <td colspan=\"2\">\u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}</td>\r\n                  </tr>\r\n\r\n                  <!-- <tr class=\"charges-header\">\r\n                    <td colspan=\"4\">Making Charges%</td>\r\n                    <td colspan=\"4\">{{responseData?.makingChargePercentage ?? 0}}%</td>\r\n                  </tr> -->\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\" class=\"fw-600\">Total Value</td>\r\n                    <td colspan=\"2\" class=\"text-start fw-600\">\u20B9{{responseData?.jewelryPriceBreakup?.priceWithoutTax |\r\n                      number:'1.2-2'}}</td>\r\n                  </tr>\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\" class=\"fw-600\">Tax Amount ({{(responseData?.jewelryPriceBreakup?.taxRef?.taxPercent)+ \"%\" + \" \" +\r\n                      \"GST\"}})</td>\r\n                    <td colspan=\"2\" class=\"text-start fw-600\">\u20B9{{responseData?.jewelryPriceBreakup?.taxAmount |\r\n                      number:'1.2-2'}}</td>\r\n                  </tr>\r\n                  <tr class=\"total-header\">\r\n                    <td colspan=\"6\" class=\"fw-600\">Total</td>\r\n                    <td colspan=\"2\" class=\"text-start fw-600\">\u20B9{{(responseData?.jewelryPriceBreakup.priceWithoutTax +\r\n                      responseData?.jewelryPriceBreakup.taxAmount) | number:'1.2-2'}}</td>\r\n                  </tr>\r\n                </table>\r\n              </div>\r\n            </p-panel>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n        <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\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    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n    <div class=\"mb-15\">\r\n      <div class=\"varient-key\">{{varient.key}}</div>\r\n      <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n        <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n        <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n          [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n          [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n          (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n        [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.sellingPrice\"\r\n      [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    <div class=\"tax-text\">(Inclusive all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img\" style=\"height: 100%; width: 100%;\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer}.fw-600{font-weight:600}.jewellery-table-container{padding:15px;border-radius:8px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]