npm - simpo-component-library - Versions diffs - 3.6.473 → 3.6.474 - Mend

simpo-component-library 3.6.473 → 3.6.474

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/fesm2022/simpo-component-library.mjs CHANGED Viewed

@@ -28,7 +28,8 @@ import { fromCognitoIdentityPool } from '@aws-sdk/credential-provider-cognito-id
 import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSliderModule } from '@angular/material/slider';
+import * as i10$2 from '@angular/material/slider';
+import { MatSliderModule, MatSlider } from '@angular/material/slider';
 import * as i10$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2$2 from '@angular/router';
@@ -48,7 +49,7 @@ import { CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-
 import { MatMenuModule } from '@angular/material/menu';
 import * as i8$3 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
-import * as i11$1 from 'primeng/toast';
+import * as i9$1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i2$3 from 'ngx-cookie-service';
 import * as i6$1 from 'primeng/api';
@@ -59,7 +60,7 @@ import * as i14 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import moment from 'moment';
 import { isBlurhashValid, decode } from 'blurhash';
-import * as i4$1 from 'primeng/rating';
+import * as i7$3 from 'primeng/rating';
 import { RatingModule } from 'primeng/rating';
 import { NgxImageZoomModule } from 'ngx-image-zoom';
 import * as i16 from 'primeng/speeddial';
@@ -70,6 +71,8 @@ import { PanelModule } from 'primeng/panel';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8$4 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
+import * as i11$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1545,11 +1548,11 @@ class SimpoButtonComponent {
         this._eventService.buttonRedirection.emit({ data: this.buttonContent });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId", edit: "edit", backgroundInfo: "backgroundInfo" }, ngImport: i0, template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\" [backgroundInfo]=\"backgroundInfo\"\n  [sectionId]=\"sectionId\" [buttonId]=\"buttonId\"  [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\">\n  <div>{{buttonContent?.label}}</div>\n  <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\n    'background': buttonStyle?.textColor,\n    'mask-image': 'url(' + buttonContent?.icon?.url + ')',\n    'mask-repeat': 'no-repeat',\n    'mask-size': 'cover',\n    'width': '25px',\n    'height': '25px',\n  }\">\n  </div>\n</button>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId", edit: "edit", backgroundInfo: "backgroundInfo" }, ngImport: i0, template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\" [backgroundInfo]=\"backgroundInfo\"\n  [sectionId]=\"sectionId\" [buttonId]=\"buttonId\"  [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\">\n  <div>{{buttonContent?.label}}</div>\n  <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\n    'background':  buttonStyle?.type == 'Text' ? buttonStyle?.background : buttonStyle?.textColor,\n    'mask-image': 'url(' + buttonContent?.icon?.url + ')',\n    'mask-repeat': 'no-repeat',\n    'mask-size': 'cover',\n    'width': '25px',\n    'height': '25px',\n  }\">\n  </div>\n</button>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective, ButtonEditorDirective, CommonModule], template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\" [backgroundInfo]=\"backgroundInfo\"\n  [sectionId]=\"sectionId\" [buttonId]=\"buttonId\"  [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\">\n  <div>{{buttonContent?.label}}</div>\n  <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\n    'background': buttonStyle?.textColor,\n    'mask-image': 'url(' + buttonContent?.icon?.url + ')',\n    'mask-repeat': 'no-repeat',\n    'mask-size': 'cover',\n    'width': '25px',\n    'height': '25px',\n  }\">\n  </div>\n</button>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"] }]
+            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective, ButtonEditorDirective, CommonModule], template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\" [backgroundInfo]=\"backgroundInfo\"\n  [sectionId]=\"sectionId\" [buttonId]=\"buttonId\"  [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\">\n  <div>{{buttonContent?.label}}</div>\n  <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\n    'background':  buttonStyle?.type == 'Text' ? buttonStyle?.background : buttonStyle?.textColor,\n    'mask-image': 'url(' + buttonContent?.icon?.url + ')',\n    'mask-repeat': 'no-repeat',\n    'mask-size': 'cover',\n    'width': '25px',\n    'height': '25px',\n  }\">\n  </div>\n</button>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
                 type: Input
             }], buttonStyle: [{
@@ -3247,9 +3250,6 @@ class HoverElementsComponent {
             const dialogElement = document.querySelector('.add-section');
             if (dialogElement) {
                 dialogElement.classList.add('closing');
-                // dialogElement.addEventListener('animationend', () => {
-                //   dialog.close();
-                // }, { once: true });
                 setTimeout(() => {
                     dialog.close();
                 }, 10000);
@@ -4350,11 +4350,11 @@ class BackgroundDirective {
                         this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
                     this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/659134c1747467801242Dots%20(1).gif')`);
                 }
-                if (this.simpoBackground?.backgroundAnimation) {
-                    this.el.nativeElement.style.setProperty('background-size', 'cover');
-                    this.el.nativeElement.style.setProperty('background-repeat', 'no-repeat');
-                    this.el.nativeElement.style.setProperty('background-position', 'center');
-                }
+                // if (this.simpoBackground?.backgroundAnimation) {
+                //   this.el.nativeElement.style.setProperty('background-size', 'cover');
+                //   this.el.nativeElement.style.setProperty('background-repeat', 'no-repeat');
+                //   // this.el.nativeElement.style.setProperty('background-position', 'center');
+                // }
             }
         });
     }
@@ -6287,7 +6287,7 @@ class TestimonialSectionComponent extends BaseSection {
         Promise.all(imagePromises).then(() => {
             // give layout a tiny time to settle
             setTimeout(() => {
-                let maxH = 0;
+                let maxH = 15;
                 items.forEach(item => {
                     // use offsetHeight to include padding/border
                     const h = item.offsetHeight;
@@ -7261,6 +7261,9 @@ class RestService {
     getMetalPrice(storeId) {
         return this.http.get(this.PASSBOOK_URL + `ext/connect/simpo/metal/prices?id=${storeId}`);
     }
+    createLead(payload) {
+        return this.http.post(this.BASE_URL + `business/contact`, payload);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
@@ -9010,7 +9013,7 @@ class CartComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$3.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n  <ng-container *ngIf=\"data\">\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n      [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline isActive\">Address</span>\n        <div class=\"bar\"></div>\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n      </div>\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\n        <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\n            ({{trialCartItem?.length ?? 0}})</div>\n        </div>\n      </div>\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n        [simpoAnimation]=\"styles?.animation\">\n        <ng-container>\n          <!-- <div class=\"left-panel\">\n            <div class=\"my-bag\">\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\n            </div>\n            <div class=\"cart-items box-shadow\">\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n                <div class=\"item-parent d-flex\">\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                      alt=\"\" (click)=\"goToProductDetails(item)\">\n                  </div>\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\n                    <div class=\"lh-23\">\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\n                      <div class=\"price-with-tax\">\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\n                        '1.0-2'}}\n                      </div>\n                      <ng-container *ngIf=\"item.itemVariant\">\n                        <div class=\"d-flex align-items-center\"\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\n                          {{ item.itemVariant.properties[varient] | uppercase }}\n                        </div>\n                      </ng-container>\n                      <div class=\"item-quantity\">\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n                        <span>{{item.quantity}}</span>\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\n                      item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\n                    <div>\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\n                        [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\n                    </div>\n                  </div>\n                </div>\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\n              </ng-container>\n            </div>\n          </div> -->\n          <!-- <div class=\"right-panel\">\n            <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\n              <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\n                <div class=\"d-flex flex-column\">\n                  <span style=\"font-weight: 600;\">Apply Coupon</span>\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\n                </div>\n                <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\n              </ng-container>\n              <ng-container *ngIf=\"responseData.billdetails?.couponId\">\n                <div class=\"d-flex flex-column\">\n                  <span style=\"font-weight: 600;\">Coupon</span>\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\n                </div>\n                <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\n              </ng-container>\n            </div>\n            <div class=\"price-details box-shadow\">\n              <div class=\"price-parent-block\">\n                <div class=\"price-type\">Total Price</div>\n                <div class=\"price-value\"><span [innerHTML]='currency'></span>\n                  {{(responseData?.billdetails?.totalNetValue\n                  ?? 0) | number: '1.0-2'}}</div>\n              </div>\n              <div class=\"price-parent-block\">\n                <div class=\"price-type\">Total Tax</div>\n                <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\n                  responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n                  number:\n                  '1.0-2'}}</div>\n              </div>\n              <div class=\"price-parent-block\"\n                *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n                <div class=\"price-type\">Delivery Charge</div>\n                <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\n                  |\n                  number: '1.0-2'}}</div>\n              </div>\n              <div class=\"price-parent-block\"\n                *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\n                <div class=\"price-type\">Discount Amount</div>\n                <div class=\"price-value\"><span [innerHtml]='currency'></span>\n                  {{responseData?.billdetails?.discountAmount\n                  | number: '1.0-2'}}</div>\n              </div>\n              <hr>\n              <div class=\"price-parent-block\">\n                <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n                <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\n                  {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\n                  '1.0-2'}}</div>\n              </div>\n\n            </div>\n            <div class=\"button-parent\">\n              <ng-container>\n                <button class=\"btn mobile-fixed\" (click)=\"!edit ?  proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\n                  simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                  [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\n                  'Checkout\n                  Cart'}}\n                  </button>\n                <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n                  [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n                  [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n                  Shopping'}}</button>\n              </ng-container>\n            </div>\n\n          </div> -->\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n            <ng-container\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"cartType === 'TRIAL'\">\n            <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n          </ng-container>\n          <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\n        </ng-container>\n        <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\n          <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\n          </ng-container>\n        </ng-container> -->\n      </div>\n      <div class=\"d-flex checkoutPage\"\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n        </ng-container>\n      </div>\n\n\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n          [isEcommerce]=\"true\"></simpo-hover-elements>\n      </div>\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n      </div>\n\n    </section>\n  </ng-container>\n  <ng-container *ngIf=\"!data\">\n    <section class=\"cart-window\">\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\n        <div class=\"d-flex align-items-center\">\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n          <span>Your Cart</span>\n        </div>\n        <div class=\"saving\"></div>\n      </div>\n      <div class=\"offers\">\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n          <span>Avail Offers / Coupons</span>\n        </div>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </div>\n      <div class=\"small-items\">\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n          <div class=\"small-item\">\n            <div class=\"d-flex\" style=\"gap: 5px;\">\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  class=\"small-product-img\"\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  (click)=\"goToProductDetails(item)\">\n              </div>\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n              <div class=\"small-item-quantity\">\n                <span class=\"cursor\">-</span>\n                <span>{{item.quantity}}</span>\n                <span class=\"cursor\">+</span>\n              </div>\n              <div class=\"small-item-price\">\n                <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n                </div>\n                <!-- <div class=\"price-with-tax\">\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n                </div> -->\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"fotter-sec\">\n        <div class=\"delivery-add d-flex\">\n          <mat-icon>home</mat-icon>\n          <div class=\"address\">Tetsting</div>\n        </div>\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n      </div>\n    </section>\n  </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n  <section class=\"coupons-listing-section\">\n    <div class=\"coupon-heading\">\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </div>\n      <div class=\"header-text\">Apply Coupon</div>\n    </div>\n    <!-- <div class=\"coupon-search-sec\">\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n    </div> -->\n    <div class=\"coupon-listing\">\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n          <div class=\"coupon-details\"\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\n            <div class=\"details__coupon-heading\">\n              <div class=\"coupon-brief\">\n                <div class=\"coupon-brief__left-sec\">\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n                    {{ couponDetails.couponCode | uppercase }}</div>\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n                </div>\n                <div class=\"coupon-brief__right-sec\">\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\n                </div>\n              </div>\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n              </div> -->\n            </div>\n            <ng-container *ngIf=\"couponDetails.status\">\n              <div class=\"details-divider\"></div>\n              <ul class=\"details__coupon-terms\">\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n              </ul>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n      <ng-template #showEmptyScreen>\n        <div class=\"empty-screen-container\">\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n          <div class=\"empty-screen__secondary-text\">\n            Looks like there are no coupons at the moment\n          </div>\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\n        </div>\n      </ng-template>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n  <div class=\"container\">\n    <div class=\"main-content\">\n      <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\n        *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\" [simpoColor]=\"styles?.background?.color\">\n        <div class=\"promo-text\">\n          <h3>See It Before You Buy It</h3>\n          <p>Experience our designs in detail via video call</p>\n        </div>\n        <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\n          \uD83D\uDCF9 SEE IT LIVE\n        </button>\n      </div>\n\n      <div class=\"cart-items\">\n        <ng-container\n          *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\n      </div>\n    </div>\n\n    <div class=\"sidebar\">\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n          <div class=\"toogle-switch\">\n            <div class=\"form-check form-switch\">\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n            </div>\n          </div>\n        </div>\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n          Select Matured Scheme\n        </div> -->\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n          *ngIf=\"selectedRedemption\">\n          Selected Scheme\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n            scheme-5000/M <span>Change</span></div>\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n          </div>\n        </div> -->\n      </div>\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n      </div>\n      <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\n        (click)=\"openDialog(CouponList)\" [simpoColor]=\"styles?.background?.color\">\n        <div class=\"coupon-left\">\n          <div class=\"coupon-icon\">%</div>\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\n        </div>\n        <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\n        <span *ngIf=\"responseData.billdetails?.couponId\"\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n      </div>\n\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n        <div class=\"delivery-header\">\n          <mat-icon>gps_fixed</mat-icon>\n          <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\n          <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\n          <span class=\"pincode\">{{pincode}}</span>\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\n        </div>\n      </div>\n\n      <div class=\"summary-section\">\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Total Price</span>\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\n            ?? 0) | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Total Tax</span>\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n          <span class=\"summary-label\">Redeem Amount</span>\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\"\n          *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n          <span class=\"summary-label\">Delivery Charge</span>\n          <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\n            |\n            number: '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\n          <span class=\"summary-label\">Discount Amount</span>\n          <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\n            | number: '1.0-2'}}</span>\n        </div>\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Coupon Discount</span>\n          <span class=\"summary-value apply-coupon\">Apply Coupon</span>\n        </div> -->\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"summary-label\">Shipping (Standard)</span>\n          <span class=\"summary-value free\">Free</span>\n        </div> -->\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n          <span class=\"total-label\">Total Cost</span>\n          <span class=\"total-value\">\u20B9{{ responseData?.totalAmount | \n            number: '1.0-2' }}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\n          <span class=\"summary-label\">Free Trial</span>\n          <span class=\"summary-value savings\">\u20B90</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\n          <span class=\"summary-label\">Service Charge</span>\n          <span class=\"summary-value savings\">Free</span>\n        </div>\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\n          <span class=\"total-label\">Total Cost</span>\n          <span class=\"total-value\">\u20B90 </span>\n        </div>\n      </div>\n      <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n      <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n        [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n        Cart'}}</button>\n      <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\n        APPOINTMENT</button>\n\n    </div>\n  </div>\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n  <div class=\"checkout-left-panel\">\n    <div class=\"checkout-main-content\">\n      <!-- <div class=\"delivery-options\">\n        <div class=\"delivery-option active\">\n          <div class=\"delivery-icon\"></div>\n          HOME DELIVERY\n        </div>\n        <div class=\"delivery-option\">\n          <div class=\"delivery-icon\"></div>\n          STORE PICK-UP\n        </div>\n      </div> -->\n\n      <div class=\"section-title\">Shipping Address</div>\n\n      <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n        <div class=\"address-info\">\n          <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n          <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n            {{defaultAddress?.stateName}}</div>\n          <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n        </div>\n      </div>\n\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n        <mat-icon>add</mat-icon>\n      </div>\n\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n      <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\n        [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [backgroundInfo]=\"styles?.background\">\n        {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\n      </div>\n\n    </div>\n  </div>\n\n  <div class=\"checkout-right-panel\">\n    <div class=\"order-summary\">\n      <div class=\"summary-title\">Order Summary</div>\n\n      <div class=\"checkout-product\">\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n            alt=\"\">\n          <div class=\"product-details\">\n            <div class=\"product-name\">{{item.itemName}}</div>\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n            <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n          </div>\n        </div>\n\n      </div>\n\n      <div class=\"price-breakdown\">\n        <div class=\"price-row\">\n          <span>Total Price</span>\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n            ?? 0) | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\">\n          <span>Total Tax</span>\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n            number:\n            '1.0-2'}}</span>\n        </div>\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n          <span class=\"summary-label\">Redeem Amount</span>\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n\n        <div class=\"price-row discount\"\n          *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\n          <span>Coupon Discount</span>\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\n            | number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row\"\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n          <span>Delivery Charge</span>\n          <span>{{responseData.billdetails.deliveryCharges\n            |\n            number: '1.0-2'}}</span>\n        </div>\n        <div class=\"price-row total\">\n          <span>TOTAL AMOUNT</span>\n          <span>\u20B9{{(responseData?.totalAmount ?? 0) | number:\n            '1.0-2'}}</span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n  <div class=\"cart-item\" *ngFor=\"let item of products\">\n    <div class=\"item-image\">\n      <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\n      <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n        (click)=\"goToProductDetails(item)\">\n    </div>\n    <div class=\"item-details\">\n      <h3 class=\"item-title\">{{item.itemName}}</h3>\n      <div class=\"item-price\">\n        <span class=\"current-price\">\u20B9{{item.sellingPrice | number: '1.0-2'}}</span>\n        <span class=\"original-price\" *ngIf=\"item.value - item.discountedPrice > 2\">\u20B9{{item.value | number:\n          '1.0-2'}}</span>\n        <span class=\"discount\" *ngIf=\"item.value - item.discountedPrice > 2\">Save \u20B9{{item.value -\n          item.sellingPrice | number: '1.0-2'}}</span>\n      </div>\n      <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\n        <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\n          <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\n        </select>\n      </div>\n      <div class=\"item-options\" *ngIf=\"item.itemVariant\">\n        <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\n          item.itemVariant.properties[varient] | uppercase }}</span>\n      </div>\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">Delivery by - Tomorrow 6PM-9PM</div>\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\n      <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\n        <span>\u25B6</span>\n      </div>\n    </div>\n    <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\n  </div>\n\n  <!-- <div class=\"cart-item\">\n    <div class=\"item-image\">\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\n    </div>\n    <div class=\"item-details\">\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\n      <div class=\"item-price\">\n        <span class=\"current-price\">\u20B921,163</span>\n      </div>\n      <div class=\"item-options\">\n        <span>Length: 16</span>\n        <span>Size: XXL</span>\n        <span>Color: Black</span>\n      </div>\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\n      <div class=\"pickup-info\">\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\n        <span>\u25B6</span>\n      </div>\n    </div>\n    <button class=\"remove-btn\">\u2715</button>\n  </div>\n\n  <div class=\"cart-item\">\n    <div class=\"item-image\">\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\n    </div>\n    <div class=\"item-details\">\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\n      <div class=\"item-price\">\n        <span class=\"current-price\">\u20B921,163</span>\n      </div>\n      <div class=\"item-options\">\n        <span>Length: 16</span>\n        <span>Size: XXL</span>\n        <span>Color: Black</span>\n      </div>\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\n      <div class=\"pickup-info\">\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\n        <span>\u25B6</span>\n      </div>\n    </div>\n    <button class=\"remove-btn\">\u2715</button>\n  </div> -->\n</ng-template>\n\n<ng-template #EMPTYITEM>\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n    <div class=\"empty-cart-container d-flex flex-column\">\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n      </div>\n      <div class=\"cart-text content-side\">\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"d-flex justify-content-center\"\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </ng-container>\n      </div>\n      <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n        Shopping'}}</button>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n  <div class=\"modal-body\">\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n      <label for=\"individual\" class=\"scheme-card\">\n        <div class=\"scheme-info d-flex gap-1\">\n          <div class=\"form-check-radio\">\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n          </div>\n          <div class=\"right-side\">\n            <div class=\"scheme-name\">\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\n            </div>\n            <div class=\"scheme-details\">\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n            </div>\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n          </div>\n        </div>\n      </label>\n    </div>\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{font-size:.9rem!important;margin-bottom:4px}.promo-text p{font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
                 //DIRECTIVE
-                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: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+                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: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, decorators: [{
             type: Component,
@@ -9472,7 +9475,7 @@ class AuthenticationRequiredComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"area w-100\">\n        <ul class=\"circles\">\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n        </ul>\n      </div>\n      <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\n        <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n<ng-template #loginTemplate>\n  <div>\n    <div class=\"input-box\">\n      <label for=\"\">Email or Phone number</label>\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\n    </div>\n    <div class=\"input-box\">\n      <div class=\"w-100\">\n        <label for=\"\">Password</label>\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\n          (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\n          [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\n        </span>\n      </div>\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\n        contain 1 Uppercase , 1\n        Lowercase , 1 Special\n        Character , 1 Digit and Minimum 8 Characters*</span>\n    </div>\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\n      Forgot Password?</div> -->\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\n      (click)=\"login()\">Login</button> -->\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\n\n\n    <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\n        (click)=\"currentPage = 'SIGNUP'\">Sign\n        Up</span></div>\n\n    <!-- <div class=\"text-center mt-20\">\n      <div class=\"or-divider\">\n        <span class=\"or-text\">or</span>\n      </div>\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\n    </div> -->\n  </div>\n</ng-template>\n\n<ng-template #signInTemplate>\n  <div>\n    <div class=\"input-box\">\n      <label for=\"\">Name</label>\n      <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\n    </div>\n    <div class=\"input-box\">\n      <label for=\"\">Email</label>\n      <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\n        [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\n    </div>\n    <div class=\"input-box\">\n      <label for=\"\">Phone Number</label>\n      <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\n        [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\n      <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\n    </div>\n    <div class=\" input-box position-relative\">\n      <label for=\"\">Password</label>\n      <div class=\"w-100 d-flex align-items-center\">\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\n          placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\n          (ngModelChange)=\"onPasswordChange()\">\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\n        </span>\n      </div>\n      <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\n        Lowercase , 1 Special\n        Character , 1 Digit and Minimum 8 Characters*</span>\n      <!-- <div class=\"strength-bar-container\">\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\n      </div> -->\n    </div>\n    <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\n    <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\n      *ngIf=\"buttonLoading\">Loading...</button>\n\n\n    <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\n  </div>\n</ng-template>\n\n<ng-template #forgotPasswordTemplate>\n  <div>\n    <div class=\"input-box\">\n      <label for=\"\">Email or Phone number</label>\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n    </div>\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\n  </div>\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$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: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"area w-100\">\n        <ul class=\"circles\">\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n        </ul>\n      </div>\n      <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\n        <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n<ng-template #loginTemplate>\n  <div>\n    <div class=\"input-box\">\n      <label for=\"\">Email or Phone number</label>\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\n    </div>\n    <div class=\"input-box\">\n      <div class=\"w-100\">\n        <label for=\"\">Password</label>\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\n          (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\n          [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\n        </span>\n      </div>\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\n        contain 1 Uppercase , 1\n        Lowercase , 1 Special\n        Character , 1 Digit and Minimum 8 Characters*</span>\n    </div>\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\n      Forgot Password?</div> -->\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\n      (click)=\"login()\">Login</button> -->\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\n\n\n    <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\n        (click)=\"currentPage = 'SIGNUP'\">Sign\n        Up</span></div>\n\n    <!-- <div class=\"text-center mt-20\">\n      <div class=\"or-divider\">\n        <span class=\"or-text\">or</span>\n      </div>\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\n    </div> -->\n  </div>\n</ng-template>\n\n<ng-template #signInTemplate>\n  <div>\n    <div class=\"input-box\">\n      <label for=\"\">Name</label>\n      <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\n    </div>\n    <div class=\"input-box\">\n      <label for=\"\">Email</label>\n      <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\n        [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\n    </div>\n    <div class=\"input-box\">\n      <label for=\"\">Phone Number</label>\n      <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\n        [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\n      <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\n    </div>\n    <div class=\" input-box position-relative\">\n      <label for=\"\">Password</label>\n      <div class=\"w-100 d-flex align-items-center\">\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\n          placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\n          (ngModelChange)=\"onPasswordChange()\">\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\n        </span>\n      </div>\n      <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\n        Lowercase , 1 Special\n        Character , 1 Digit and Minimum 8 Characters*</span>\n      <!-- <div class=\"strength-bar-container\">\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\n      </div> -->\n    </div>\n    <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\n    <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\n      *ngIf=\"buttonLoading\">Loading...</button>\n\n\n    <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\n  </div>\n</ng-template>\n\n<ng-template #forgotPasswordTemplate>\n  <div>\n    <div class=\"input-box\">\n      <label for=\"\">Email or Phone number</label>\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n    </div>\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\n  </div>\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$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: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
@@ -10176,15 +10179,12 @@ class PricingS1Component extends BaseSection {
         else if (this.content?.listItem?.data?.length === 3) {
             return 'col-4';
         }
-        else if (this.content?.listItem?.data?.length === 4) {
-            return 'col-3';
-        }
         else {
-            return 'col-3';
+            return 'col-4';
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"pricing-options row w-100\">\n    <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-2 align-items-center\" [attr.class]=\"getClass()\"\n      [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\"\n      *ngFor=\"let options of content?.listItem?.data\" [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\n          'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\n      [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n        *ngIf=\"options?.highlight?.highlighted === true\">\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n      </div>\n      <div>\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\n          [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n          [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\n          [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n          [class]=\"data?.id+(options?.image?.id || '')\">\n        <div class=\"heading-small\">\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"heading-large price\">\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc mb-3\">\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n            <div class=\"d-flex align-items-center\">\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\n                  fill=\"#4C63D9\" />\n              </svg> -->\n            </div>\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n      </div>\n      <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n        <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\n          [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n          [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\"\n          (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n      </div>\n    </div>\n  </div>\n</section>", styles: [".pricing-options{justify-content:center;gap:20px}.individual-options{border:1px solid #80808057;padding:24px 10px}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"pricing-options row w-100\">\n    <div\n       [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n      [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n      [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\n      [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\n      [ngStyle]=\"{'border': options?.highlight?.highlighted  ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n        *ngIf=\"options?.highlight?.highlighted === true\">\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n      </div>\n      <div>\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\n          [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\n          alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n          [class]=\"data?.id+(options?.image?.id || '')\">\n        <div class=\"heading-small\">\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"heading-large price\">\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n          <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc mb-3\">\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n            <div class=\"d-flex align-items-center\">\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\n                  fill=\"#4C63D9\" />\n              </svg> -->\n            </div>\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n      </div>\n      <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n        <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n          simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n          [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n          [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n          <div>{{options?.button?.label}}</div>\n          <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\n            'background':  button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n            'mask-image': 'url(' + options?.button?.icon?.url + ')',\n            'mask-repeat': 'no-repeat',\n            'mask-size': 'cover',\n            'width': '25px',\n            'height': '25px',\n          }\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}.col-4{width:30%!important}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
             type: Component,
@@ -10200,7 +10200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SimpoButtonComponent,
                         ButtonEditorDirective,
                         TranslateOnhoverDirective
-                    ], template: "<section>\n  <div class=\"pricing-options row w-100\">\n    <div class=\"individual-options d-flex flex-column justify-content-between mt-4 mb-2 align-items-center\" [attr.class]=\"getClass()\"\n      [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\"\n      *ngFor=\"let options of content?.listItem?.data\" [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true,\n          'individual-options-3': content?.listItem?.data?.length === 3 || content?.listItem?.data?.length === 2}\"\n      [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n        *ngIf=\"options?.highlight?.highlighted === true\">\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n      </div>\n      <div>\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\"\n          [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n          [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\n          [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n          [class]=\"data?.id+(options?.image?.id || '')\">\n        <div class=\"heading-small\">\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"heading-large price\">\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc mb-3\">\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n            <div class=\"d-flex align-items-center\">\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\n                  fill=\"#4C63D9\" />\n              </svg> -->\n            </div>\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n      </div>\n      <div class=\"btn w-75 mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n        <button class=\"custom-btn\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\n          [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n          [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\"\n          (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n      </div>\n    </div>\n  </div>\n</section>", styles: [".pricing-options{justify-content:center;gap:20px}.individual-options{border:1px solid #80808057;padding:24px 10px}.individual-options-3{width:32%}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}\n"] }]
+                    ], template: "<section>\n  <div class=\"pricing-options row w-100\">\n    <div\n       [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n      [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n      [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\n      [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\n      [ngStyle]=\"{'border': options?.highlight?.highlighted  ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n        *ngIf=\"options?.highlight?.highlighted === true\">\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n      </div>\n      <div>\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\n          [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\n          alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n          [class]=\"data?.id+(options?.image?.id || '')\">\n        <div class=\"heading-small\">\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"heading-large price\">\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n          <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc mb-3\">\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n            <div class=\"d-flex align-items-center\">\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\n                  fill=\"#4C63D9\" />\n              </svg> -->\n            </div>\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n          </div>\n        </div>\n      </div>\n      <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\n        <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n          simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n          [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n          [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n          <div>{{options?.button?.label}}</div>\n          <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\n            'background':  button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n            'mask-image': 'url(' + options?.button?.icon?.url + ')',\n            'mask-repeat': 'no-repeat',\n            'mask-size': 'cover',\n            'width': '25px',\n            'height': '25px',\n          }\"></div>\n        </button>\n      </div>\n    </div>\n  </div>\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}}.col-4{width:30%!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -10264,7 +10264,7 @@ class PricingSectionComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"  [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div class=\"mb-2\" *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\n          <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\n            [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\" [attr.class]=\"getClass()\">\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\"    [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\n            <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\n               <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\n            <div class=\"heading-small\">\n              <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"heading-large price\">\n              <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc\">\n              <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\n              <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\n                <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"  [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n                 [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n            </div>\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n              <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n                <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n                <!-- {{content.content}} -->\n              </div>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\n          <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [attr.style]=\"customClass\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div [simpoContentTitleSpace]=\"headingSpace\">\n          <ng-container *ngFor=\"let text of data?.content?.inputText\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </ng-container>\n          <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        </div>\n        <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\n          <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\n            [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\n            [attr.class]=\"getClass() + ' position-relative'\">\n            <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\n              [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n              [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\"  loading=\"lazy\"\n              [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n              [class]=\"data?.id+(options?.image?.id || '')\">\n            <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\n              [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\n              [simpoCorner]=\"style?.corners\">\n              <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"heading-small\">\n              <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"heading-large price\">\n              <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc\">\n              <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\n              <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\n              <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\n                [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n                class=\"d-flex gap-1 align-items-center justify-content-center\"\n                [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n                [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n                [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n                <div>{{options?.button?.label}}</div>\n                <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\n                    'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n                    'mask-image': 'url(' + options?.button?.icon?.url + ')',\n                    'mask-repeat': 'no-repeat',\n                    'mask-size': 'cover',\n                    'width': '25px',\n                    'height': '25px',\n                  }\">\n                </div>\n              </button>\n            </div>\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n              <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n                <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\n                  [editable]=\"edit || false\"></simpo-text-editor>\n                <!-- {{content.content}} -->\n              </div>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\n          <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\n        </div>\n        <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-3\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n            [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n            [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, decorators: [{
             type: Component,
@@ -10290,7 +10290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective, SpacingHorizontalDirective,
                         PricingS1Component,
                         ButtonEditorDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"  [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div class=\"mb-2\" *ngFor=\"let text of data?.content?.inputText\" [simpoContentTitleSpace]=\"headingSpace\">\n          <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n        </div>\n        <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\n            [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\" [attr.class]=\"getClass()\">\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\"    [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(options?.image?.id || '')\">\n            <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\n               <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <!-- <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div> -->\n            <div class=\"heading-small\">\n              <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"heading-large price\">\n              <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc\">\n              <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\n              <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\n                <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"  [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n                 [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\n            </div>\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n              <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n                <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n                <!-- {{content.content}} -->\n              </div>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\n          <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [attr.style]=\"customClass\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div [simpoContentTitleSpace]=\"headingSpace\">\n          <ng-container *ngFor=\"let text of data?.content?.inputText\">\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n          </ng-container>\n          <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n        </div>\n        <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\n          <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\n            [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\n            [attr.class]=\"getClass() + ' position-relative'\">\n            <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\n              [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\n              [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\"  loading=\"lazy\"\n              [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n              [class]=\"data?.id+(options?.image?.id || '')\">\n            <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\n              [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\n              [simpoCorner]=\"style?.corners\">\n              <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"heading-small\">\n              <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"heading-large price\">\n              <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc\">\n              <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\n              <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\n              <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\n                [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n                class=\"d-flex gap-1 align-items-center justify-content-center\"\n                [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n                [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n                [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n                <div>{{options?.button?.label}}</div>\n                <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\n                    'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n                    'mask-image': 'url(' + options?.button?.icon?.url + ')',\n                    'mask-repeat': 'no-repeat',\n                    'mask-size': 'cover',\n                    'width': '25px',\n                    'height': '25px',\n                  }\">\n                </div>\n              </button>\n            </div>\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n              <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </div>\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n                <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\n                  [editable]=\"edit || false\"></simpo-text-editor>\n                <!-- {{content.content}} -->\n              </div>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\n          <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\n        </div>\n        <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-3\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n            [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n            [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -11770,9 +11770,9 @@ class ProcessModernComponent extends BaseSection {
         this.scrWidth = window.innerWidth;
     }
     ngOnInit() {
-        this.deleteSelected = this.delete;
         this.content = this.data?.content;
         this.styles = this.data?.styles;
+        this.deleteSelected = this.delete;
         if (!this.styles || !this.content)
             return;
         // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
@@ -11792,7 +11792,7 @@ class ProcessModernComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [attr.style]=\"customClass\">\n  <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\"  [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n          <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n            <div *ngFor=\"let text of data?.content?.inputText\">\n              <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n            </div>\n          </div>\n          <!-- starting -->\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\n            <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n                <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                  loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\n              </div>\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n                <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\n                </div> -->\n                <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n                <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\n                </div> -->\n                <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </div>\n            </div>\n          </div>\n          <!-- ending -->\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n  <div class=\"col-xxl-8 w-100\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\n    [simpoBackground]=\"styles?.background\">\n    <div class=\"row g-5\" [id]=\"data?.id\">\n      <div  [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n         [simpoLayout]=\"styles?.layout\">\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div class=\"row w-100\" [id]=\"data?.id\">\n            <div *ngFor=\"let text of data?.content?.inputText\">\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n            </div>\n          </div>\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\"\n            class=\"single_card content-side d-flex justify-content-center\">\n            <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n                <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                  loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\">\n              </div>\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n                <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n                <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessModernComponent, decorators: [{
             type: Component,
@@ -11828,7 +11828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         ObjectPositionDirective,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n  class=\"total-container\" [attr.style]=\"customClass\">\n  <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n    [simpoBorder]=\"styles?.border\"  [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n          <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n            <div *ngFor=\"let text of data?.content?.inputText\">\n              <!-- <div class=\"heading-large lh-2 mb-3 content-side\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n            </div>\n          </div>\n          <!-- starting -->\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card content-side d-flex justify-content-center\">\n            <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n                <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                  loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\" [simpoImageDirective]=\"styles?.image\">\n              </div>\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n                <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <!-- <div class=\"contentHeading content-side\" [innerHTML]=\" item.inputText[0].value | sanitizeHtml\">\n                </div> -->\n                <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n                <!-- <div class=\"contentDescription content-side\" [innerHTML]=\" item.inputText[1].value | sanitizeHtml\">\n                </div> -->\n                <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </div>\n            </div>\n          </div>\n          <!-- ending -->\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n  <div class=\"col-xxl-8 w-100\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\n    [simpoBackground]=\"styles?.background\">\n    <div class=\"row g-5\" [id]=\"data?.id\">\n      <div  [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n         [simpoLayout]=\"styles?.layout\">\n        <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div class=\"row w-100\" [id]=\"data?.id\">\n            <div *ngFor=\"let text of data?.content?.inputText\">\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n            </div>\n          </div>\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\"\n            class=\"single_card content-side d-flex justify-content-center\">\n            <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n              <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n                <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <img loading=\"lazy\"  class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                  loading=\"lazy\"   [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\">\n              </div>\n              <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n                <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\n                  {{ i + 1}}\n                </div>\n                <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n                <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -15156,6 +15156,7 @@ class SchemeDetailComponent {
             if (params['termsAndCondition'])
                 this.scrollToTermsAndCondition = true;
         });
+        // this.getSchemeDetails("84a8304f-84c5-11f0-b0bd-efe6a9626b92")
     }
     getKeys(obj) {
         return Object.keys(obj ?? {});
@@ -15341,11 +15342,11 @@ class SchemeDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.Router }, { token: EventsService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n  <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n  </div>\n  <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n  </div>\n  <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n    <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n  </div>\n  <div class=\"terms_condition_section p-5\"\n    *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n    <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n  </div>\n</section>\n<ng-template #aboutUsTemplate>\n  <div class=\"d-flex flex-column gap-3\">\n    <div class=\"text_header d-flex align-items-center justify-content-center\">\n      <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n    </div>\n    <div class=\"desc_text\">\n      {{schemeDetails?.about}}\n    </div>\n  </div>\n</ng-template>\n<ng-template #schemeCalculator>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n      <span>Calculate Your Returns</span>\n      <div class=\"calc_desc\">\n        See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n        your potential returns.\n      </div>\n    </div>\n    <div class=\"calculator_section\">\n      <div class=\"gold-purity\"\n        *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n        <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '18_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '24_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '22_k'\">\n          <div>\n            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n        <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n        <p class=\"enrolled-gram\"\n          *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n          {{purchasedGram}} gms</p>\n      </div>\n\n      <div class=\"calculate-slider mb-4 px-3\">\n        <div class=\"slider-container position-relative\">\n          <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n            [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n          <div class=\"slider-labels d-flex justify-content-between mt-2\">\n            <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n            <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n          </div>\n          <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n            *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n            <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n              [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n              *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n              \u20B9 {{option?.value}}\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-3\">\n          <div class=\"d-flex align-items-center justify-content-center\">\n            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n          </div>\n          <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n        </div>\n      </div>\n\n      <div class=\"calculator-bottom px-3 mb-5\">\n        <div class=\"scheme-results\">\n          <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n            <!-- Contribution Card -->\n            <div class=\"col-12 col-sm-6\"\n              [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{(monthlyAmount * maturityCount) | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Your {{maturityCount}}-Month Contribution\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Plus Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">+</div>\n            </div>\n\n            <!-- Benefit Card -->\n            <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{benefitAmount | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Scheme Benefit\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Equals Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">=</div>\n            </div>\n\n            <!-- Total Card -->\n            <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\n                    <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n                      \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n                    </span>\n                    <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n                      \u20B9{{(monthlyAmount * maturityCount) | number}}\n                    </span>\n                  </div>\n                  <div class=\"text-white-50 small\">\n                    Total Redemption Value\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    {{purchasedGram}} gms\n                  </div>\n                  <div class=\"text-muted small\">\n                    Gold Allocation Today\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n            *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n                  Store : </span></div>\n              <div class=\"store-selector\">\n                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n                  (ngModelChange)=\"getMetalPrice()\">\n                  <option [ngValue]=\"null\" disabled>Choose a store...</option>\n                  <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n                    {{store.name}} - {{store.storeRefId}}\n                  </option>\n                </select>\n              </div>\n            </div>\n            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n                  Staff Member : </span></div>\n              <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n                <option value=\"\" disabled>Choose a staff member...</option>\n                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n                  {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n                </option>\n              </select>\n            </div>\n          </div>\n          <div class=\"terms-and-condition\">\n            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n              Conditions</a>\n          </div>\n          <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n            <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n            <ng-container *ngIf=\"enrollButtonLoader\">\n              <div class=\"d-flex align-items-center justify-content-center\">\n                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n                Loading...\n              </div>\n            </ng-container>\n          </button>\n        </div>\n        <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n                <div class=\"d-flex align-items-center mb-3\">\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n                </div>\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-6\">\n                        <div class=\"result-card text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n                        </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n                        </div>\n                    </div>\n                </div>\n\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n                    Enroll in Scheme\n                </button>\n            </div> -->\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n      <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n            <div class=\"faq-question\">\n              <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n              <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n              <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n            </div>\n            <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n              <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #termsAndConditions>\n  <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n    <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n      <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n      <div class=\"terms-content\">\n        <div class=\"term-item d-flex align-items-center\" *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n          <div class=\"terms_count\">\n            <h3 class=\"term-heading\">{{ key }}.</h3>\n          </div>\n          <div>\n            <p class=\"term-text mb-0\">\n              {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- <div class=\"important-note\">\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n                        Participants will be notified of any changes via registered email or SMS. Continued\n                        participation after notification constitutes acceptance of revised terms.</p>\n                </div> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #showCharges>\n  <div class=\"payment-dialog\">\n    <div class=\"dialog-header\">\n      <h2>Payment Details</h2>\n      <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"payment-content\">\n      <div class=\"payment-row\">\n        <span class=\"label\">Installment Amount:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n          (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Convenience Fee:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n          (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Payment Service Charges:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n          (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row total-row\">\n        <span class=\"label total-label\">Total Amount:</span>\n        <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n          (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n      </div>\n    </div>\n\n    <div class=\"dialog-actions\">\n      <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n  <div class=\"plan_desc_section\">\n    <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\n  </div>\n  <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n  </div>\n  <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n  </div>\n  <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\n    <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\n  </div>\n  <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\n    <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\n  </div>\n  <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n    <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n  </div>\n  <div class=\"terms_condition_section p-5\"\n    *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n    <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n  </div>\n</section>\n<ng-template #redeemInfoSection>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">How to redeem?</h1>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\n            {{schemeDetails?.redeemDesc || 'N/A'}}\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #schemeWorkSection>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">How Does this plan work?</h1>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\n            <div class=\"d-flex  align-items-start gap-3 f-16\">\n              <span>{{faq}}</span>\n              <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #planDescTemplate>\n  <div class=\"hero-section d-flex align-items-center\">\n    <div class=\"container\">\n      <div class=\"row align-items-center g-5\">\n        <div\n          [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\n          <div class=\"hero-content\">\n            <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\n              <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\n            </h1>\n            <p class=\"hero-description mb-4\">\n              {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\n            </p>\n          </div>\n        </div>\n        <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\n          <div class=\"hero-image\">\n            <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\n              class=\"jewellery-img w-100\">\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #aboutUsTemplate>\n  <div class=\"d-flex flex-column gap-3\">\n    <div class=\"text_header d-flex align-items-center justify-content-center\">\n      <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n    </div>\n    <div class=\"desc_text\">\n      {{schemeDetails?.about}}\n    </div>\n  </div>\n</ng-template>\n<ng-template #schemeCalculator>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n      <span>Calculate Your Returns</span>\n      <div class=\"calc_desc\">\n        See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n        your potential returns.\n      </div>\n    </div>\n    <div class=\"calculator_section\">\n      <div class=\"gold-purity\"\n        *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n        <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '18_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '24_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '22_k'\">\n          <div>\n            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n        <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n        <p class=\"enrolled-gram\"\n          *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n          {{purchasedGram}} gms</p>\n      </div>\n\n      <div class=\"calculate-slider mb-4 px-3\">\n        <div class=\"slider-container position-relative\">\n          <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\n            [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\n            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n          </mat-slider>\n          <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n            [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\n          <div class=\"slider-labels d-flex justify-content-between mt-2\">\n            <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n            <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n          </div>\n          <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n            *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n            <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n              [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n              *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n              \u20B9 {{option?.value}}\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-3\">\n          <div class=\"d-flex align-items-center justify-content-center\">\n            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n          </div>\n          <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n        </div>\n      </div>\n\n      <div class=\"calculator-bottom px-3 mb-5\">\n        <div class=\"scheme-results\">\n          <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n            <!-- Contribution Card -->\n            <div class=\"col-12 col-sm-6\"\n              [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{(monthlyAmount * maturityCount) | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Your {{maturityCount}}-Month Contribution\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Plus Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">+</div>\n            </div>\n\n            <!-- Benefit Card -->\n            <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{benefitAmount | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Scheme Benefit\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Equals Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">=</div>\n            </div>\n\n            <!-- Total Card -->\n            <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\n                    <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n                      \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n                    </span>\n                    <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n                      \u20B9{{(monthlyAmount * maturityCount) | number}}\n                    </span>\n                  </div>\n                  <div class=\"text-white-50 small\">\n                    Total Redemption Value\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    {{purchasedGram}} gms\n                  </div>\n                  <div class=\"text-muted small\">\n                    Gold Allocation Today\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n            *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n                  Store : </span></div>\n              <div class=\"store-selector\">\n                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n                  (ngModelChange)=\"getMetalPrice()\">\n                  <option [ngValue]=\"null\" disabled>Choose a store...</option>\n                  <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n                    {{store.name}} - {{store.storeRefId}}\n                  </option>\n                </select>\n              </div>\n            </div>\n            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n                  Staff Member : </span></div>\n              <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n                <option value=\"\" disabled>Choose a staff member...</option>\n                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n                  {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n                </option>\n              </select>\n            </div>\n          </div>\n          <div class=\"terms-and-condition\">\n            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n              Conditions</a>\n          </div>\n          <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n            <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n            <ng-container *ngIf=\"enrollButtonLoader\">\n              <div class=\"d-flex align-items-center justify-content-center\">\n                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n                Loading...\n              </div>\n            </ng-container>\n          </button>\n        </div>\n        <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n                <div class=\"d-flex align-items-center mb-3\">\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n                </div>\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-6\">\n                        <div class=\"result-card text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n                        </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n                        </div>\n                    </div>\n                </div>\n\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n                    Enroll in Scheme\n                </button>\n            </div> -->\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n      <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n            <div class=\"faq-question\">\n              <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n              <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n              <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n            </div>\n            <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n              <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #termsAndConditions>\n  <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n    <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n      <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n      <div class=\"terms-content\">\n        <div class=\"term-item d-flex align-items-center\"\n          *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n          <div class=\"terms_count\">\n            <h3 class=\"term-heading\">{{ key }}.</h3>\n          </div>\n          <div>\n            <p class=\"term-text mb-0\">\n              {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- <div class=\"important-note\">\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n                        Participants will be notified of any changes via registered email or SMS. Continued\n                        participation after notification constitutes acceptance of revised terms.</p>\n                </div> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #showCharges>\n  <div class=\"payment-dialog\">\n    <div class=\"dialog-header\">\n      <h2>Payment Details</h2>\n      <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"payment-content\">\n      <div class=\"payment-row\">\n        <span class=\"label\">Installment Amount:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n          (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Convenience Fee:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n          (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Payment Service Charges:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n          (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row total-row\">\n        <span class=\"label total-label\">Total Amount:</span>\n        <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n          (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n      </div>\n    </div>\n\n    <div class=\"dialog-actions\">\n      <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.hero-section{max-height:75vh;padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hero-description{font-size:1.1rem;color:#666;line-height:1.6;text-align:center}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n  <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n  </div>\n  <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n  </div>\n  <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n    <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n  </div>\n  <div class=\"terms_condition_section p-5\"\n    *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n    <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n  </div>\n</section>\n<ng-template #aboutUsTemplate>\n  <div class=\"d-flex flex-column gap-3\">\n    <div class=\"text_header d-flex align-items-center justify-content-center\">\n      <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n    </div>\n    <div class=\"desc_text\">\n      {{schemeDetails?.about}}\n    </div>\n  </div>\n</ng-template>\n<ng-template #schemeCalculator>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n      <span>Calculate Your Returns</span>\n      <div class=\"calc_desc\">\n        See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n        your potential returns.\n      </div>\n    </div>\n    <div class=\"calculator_section\">\n      <div class=\"gold-purity\"\n        *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n        <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '18_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '24_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '22_k'\">\n          <div>\n            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n        <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n        <p class=\"enrolled-gram\"\n          *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n          {{purchasedGram}} gms</p>\n      </div>\n\n      <div class=\"calculate-slider mb-4 px-3\">\n        <div class=\"slider-container position-relative\">\n          <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n            [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n          <div class=\"slider-labels d-flex justify-content-between mt-2\">\n            <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n            <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n          </div>\n          <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n            *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n            <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n              [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n              *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n              \u20B9 {{option?.value}}\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-3\">\n          <div class=\"d-flex align-items-center justify-content-center\">\n            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n          </div>\n          <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n        </div>\n      </div>\n\n      <div class=\"calculator-bottom px-3 mb-5\">\n        <div class=\"scheme-results\">\n          <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n            <!-- Contribution Card -->\n            <div class=\"col-12 col-sm-6\"\n              [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{(monthlyAmount * maturityCount) | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Your {{maturityCount}}-Month Contribution\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Plus Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">+</div>\n            </div>\n\n            <!-- Benefit Card -->\n            <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{benefitAmount | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Scheme Benefit\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Equals Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">=</div>\n            </div>\n\n            <!-- Total Card -->\n            <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\n                    <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n                      \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n                    </span>\n                    <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n                      \u20B9{{(monthlyAmount * maturityCount) | number}}\n                    </span>\n                  </div>\n                  <div class=\"text-white-50 small\">\n                    Total Redemption Value\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    {{purchasedGram}} gms\n                  </div>\n                  <div class=\"text-muted small\">\n                    Gold Allocation Today\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n            *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n                  Store : </span></div>\n              <div class=\"store-selector\">\n                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n                  (ngModelChange)=\"getMetalPrice()\">\n                  <option [ngValue]=\"null\" disabled>Choose a store...</option>\n                  <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n                    {{store.name}} - {{store.storeRefId}}\n                  </option>\n                </select>\n              </div>\n            </div>\n            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n                  Staff Member : </span></div>\n              <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n                <option value=\"\" disabled>Choose a staff member...</option>\n                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n                  {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n                </option>\n              </select>\n            </div>\n          </div>\n          <div class=\"terms-and-condition\">\n            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n              Conditions</a>\n          </div>\n          <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n            <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n            <ng-container *ngIf=\"enrollButtonLoader\">\n              <div class=\"d-flex align-items-center justify-content-center\">\n                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n                Loading...\n              </div>\n            </ng-container>\n          </button>\n        </div>\n        <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n                <div class=\"d-flex align-items-center mb-3\">\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n                </div>\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-6\">\n                        <div class=\"result-card text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n                        </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n                        </div>\n                    </div>\n                </div>\n\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n                    Enroll in Scheme\n                </button>\n            </div> -->\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n      <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n            <div class=\"faq-question\">\n              <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n              <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n              <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n            </div>\n            <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n              <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #termsAndConditions>\n  <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n    <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n      <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n      <div class=\"terms-content\">\n        <div class=\"term-item d-flex align-items-center\" *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n          <div class=\"terms_count\">\n            <h3 class=\"term-heading\">{{ key }}.</h3>\n          </div>\n          <div>\n            <p class=\"term-text mb-0\">\n              {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- <div class=\"important-note\">\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n                        Participants will be notified of any changes via registered email or SMS. Continued\n                        participation after notification constitutes acceptance of revised terms.</p>\n                </div> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #showCharges>\n  <div class=\"payment-dialog\">\n    <div class=\"dialog-header\">\n      <h2>Payment Details</h2>\n      <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"payment-content\">\n      <div class=\"payment-row\">\n        <span class=\"label\">Installment Amount:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n          (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Convenience Fee:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n          (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Payment Service Charges:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n          (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row total-row\">\n        <span class=\"label total-label\">Total Amount:</span>\n        <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n          (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n      </div>\n    </div>\n\n    <div class=\"dialog-actions\">\n      <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
+            args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n  <div class=\"plan_desc_section\">\n    <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\n  </div>\n  <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n  </div>\n  <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n    <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n  </div>\n  <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\n    <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\n  </div>\n  <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\n    <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\n  </div>\n  <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n    <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n  </div>\n  <div class=\"terms_condition_section p-5\"\n    *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n    <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n  </div>\n</section>\n<ng-template #redeemInfoSection>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">How to redeem?</h1>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\n            {{schemeDetails?.redeemDesc || 'N/A'}}\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #schemeWorkSection>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">How Does this plan work?</h1>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\n            <div class=\"d-flex  align-items-start gap-3 f-16\">\n              <span>{{faq}}</span>\n              <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #planDescTemplate>\n  <div class=\"hero-section d-flex align-items-center\">\n    <div class=\"container\">\n      <div class=\"row align-items-center g-5\">\n        <div\n          [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\n          <div class=\"hero-content\">\n            <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\n              <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\n            </h1>\n            <p class=\"hero-description mb-4\">\n              {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\n            </p>\n          </div>\n        </div>\n        <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\n          <div class=\"hero-image\">\n            <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\n              class=\"jewellery-img w-100\">\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #aboutUsTemplate>\n  <div class=\"d-flex flex-column gap-3\">\n    <div class=\"text_header d-flex align-items-center justify-content-center\">\n      <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n    </div>\n    <div class=\"desc_text\">\n      {{schemeDetails?.about}}\n    </div>\n  </div>\n</ng-template>\n<ng-template #schemeCalculator>\n  <div class=\"d-flex flex-column align-items-center\">\n    <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n      <span>Calculate Your Returns</span>\n      <div class=\"calc_desc\">\n        See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n        your potential returns.\n      </div>\n    </div>\n    <div class=\"calculator_section\">\n      <div class=\"gold-purity\"\n        *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n        <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '18_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '24_k'\">\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n            *ngIf=\"gold?.karats === '22_k'\">\n          <div>\n            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n          </div>\n        </div>\n      </div>\n      <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n        <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n        <p class=\"enrolled-gram\"\n          *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n          {{purchasedGram}} gms</p>\n      </div>\n\n      <div class=\"calculate-slider mb-4 px-3\">\n        <div class=\"slider-container position-relative\">\n          <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\n            [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\n            [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\n            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n          </mat-slider>\n          <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n            [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\n          <div class=\"slider-labels d-flex justify-content-between mt-2\">\n            <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n            <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n          </div>\n          <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n            *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n            <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n              [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n              *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n              \u20B9 {{option?.value}}\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-3\">\n          <div class=\"d-flex align-items-center justify-content-center\">\n            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n          </div>\n          <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n        </div>\n      </div>\n\n      <div class=\"calculator-bottom px-3 mb-5\">\n        <div class=\"scheme-results\">\n          <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n            <!-- Contribution Card -->\n            <div class=\"col-12 col-sm-6\"\n              [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{(monthlyAmount * maturityCount) | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Your {{maturityCount}}-Month Contribution\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Plus Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">+</div>\n            </div>\n\n            <!-- Benefit Card -->\n            <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    \u20B9{{benefitAmount | number}}\n                  </div>\n                  <div class=\"text-muted small\">\n                    Scheme Benefit\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Equals Icon - Hidden on mobile -->\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"fs-3 text-muted\">=</div>\n            </div>\n\n            <!-- Total Card -->\n            <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\n                    <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n                      \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n                    </span>\n                    <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n                      \u20B9{{(monthlyAmount * maturityCount) | number}}\n                    </span>\n                  </div>\n                  <div class=\"text-white-50 small\">\n                    Total Redemption Value\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n              <div class=\"card text-center h-100\">\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n                  <div class=\"fw-bold calc_amount fs-md-5\">\n                    {{purchasedGram}} gms\n                  </div>\n                  <div class=\"text-muted small\">\n                    Gold Allocation Today\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n\n          <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n            *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n                  Store : </span></div>\n              <div class=\"store-selector\">\n                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n                  (ngModelChange)=\"getMetalPrice()\">\n                  <option [ngValue]=\"null\" disabled>Choose a store...</option>\n                  <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n                    {{store.name}} - {{store.storeRefId}}\n                  </option>\n                </select>\n              </div>\n            </div>\n            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n                  Staff Member : </span></div>\n              <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n                <option value=\"\" disabled>Choose a staff member...</option>\n                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n                  {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n                </option>\n              </select>\n            </div>\n          </div>\n          <div class=\"terms-and-condition\">\n            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n              Conditions</a>\n          </div>\n          <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n            <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n            <ng-container *ngIf=\"enrollButtonLoader\">\n              <div class=\"d-flex align-items-center justify-content-center\">\n                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n                Loading...\n              </div>\n            </ng-container>\n          </button>\n        </div>\n        <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n                <div class=\"d-flex align-items-center mb-3\">\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n                </div>\n\n                <div class=\"row mb-3\">\n                    <div class=\"col-6\">\n                        <div class=\"result-card text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n                        </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n                        </div>\n                    </div>\n                </div>\n\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n                    Enroll in Scheme\n                </button>\n            </div> -->\n      </div>\n    </div>\n  </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\n    <div class=\"faq-container\">\n      <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n      <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\n        <div class=\"faq-list\">\n          <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n            <div class=\"faq-question\">\n              <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n              <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n              <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n            </div>\n            <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n              <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #termsAndConditions>\n  <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n    <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n      <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n      <div class=\"terms-content\">\n        <div class=\"term-item d-flex align-items-center\"\n          *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n          <div class=\"terms_count\">\n            <h3 class=\"term-heading\">{{ key }}.</h3>\n          </div>\n          <div>\n            <p class=\"term-text mb-0\">\n              {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- <div class=\"important-note\">\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n                        Participants will be notified of any changes via registered email or SMS. Continued\n                        participation after notification constitutes acceptance of revised terms.</p>\n                </div> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n<ng-template #showCharges>\n  <div class=\"payment-dialog\">\n    <div class=\"dialog-header\">\n      <h2>Payment Details</h2>\n      <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n\n    <div class=\"payment-content\">\n      <div class=\"payment-row\">\n        <span class=\"label\">Installment Amount:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n          (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Convenience Fee:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n          (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row\">\n        <span class=\"label\">Payment Service Charges:</span>\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n          (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n      </div>\n\n      <div class=\"payment-row total-row\">\n        <span class=\"label total-label\">Total Amount:</span>\n        <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n          (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n      </div>\n    </div>\n\n    <div class=\"dialog-actions\">\n      <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.hero-section{max-height:75vh;padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hero-description{font-size:1.1rem;color:#666;line-height:1.6;text-align:center}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.Router }, { type: EventsService }, { type: i6$1.MessageService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -15525,14 +15526,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 class SmallProductListingComponent {
-    constructor(cartService, router) {
+    constructor(cartService, router, restService, storageService, messageService) {
         this.cartService = cartService;
         this.router = router;
+        this.restService = restService;
+        this.storageService = storageService;
+        this.messageService = messageService;
         this.USER_CART = null;
         this.isCategoryProductList = false;
+        this.IsEcommerce = false;
         this.imageIndex = -1;
     }
     ngOnInit() {
+        this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
     }
     addItemToCart(event, product, type) {
         // if (this.isItemOutOfStock(product)) {
@@ -15576,6 +15582,35 @@ class SmallProductListingComponent {
     removeDefault(event) {
         event.stopPropagation();
     }
+    raiseLead() {
+        const userDetails = this.storageService.getUser();
+        let payload = {
+            businessId: localStorage.getItem('businessId'),
+            email: userDetails?.contact?.email,
+            message: "",
+            mobileNo: "",
+            moreInfo: {
+                Name: userDetails?.contact?.name,
+                "Mobile Number": userDetails?.contact?.mobile,
+                Email: userDetails?.contact?.email,
+                "Lead Source": "Website",
+                "Lead Status": "NEW"
+            },
+            name: userDetails?.contact?.name
+        };
+        this.restService.createLead(payload).subscribe({
+            next: (res) => {
+                if (res?.data) {
+                    this.messageService.add({ severity: 'success', summary: 'Thank you', detail: 'Our team will contact you soon' });
+                }
+            },
+            error: (err) => {
+                if (err) {
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error occured please try again later' });
+                }
+            }
+        });
+    }
     getItemVarient(product, varientId) {
         let selectedVarient = null;
         product?.itemVariant?.forEach((varient) => {
@@ -15640,8 +15675,8 @@ class SmallProductListingComponent {
             return noofratings;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable", isCategoryProductList: "isCategoryProductList", customClass: "customClass", index: "index" }, ngImport: i0, template: "<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\n      (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\n      off</div>\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\n    </div>\n  </div>\n  <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\n    <span class=\"trim-text color\">{{product.name}}</span>\n    <div class=\"bottom\">\n      <span class=\"m-1\">\n        <span class=\"color\"><span\n            [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\n        <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\n          [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\n            [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\n      </span>\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"total-ratings\">{{\n          getRatings(product?.totalReviewCount)}}</div>\n      </div>\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\" *ngIf=\"data?.content?.display?.showButton\"\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\n        (click)=\"removeDefault($event)\">\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\n          <ng-container *ngIf=\"!product.quantity\">\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">\n              Add to Cart</div>\n          </ng-container>\n          <ng-container *ngIf=\"product.quantity\">\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\n            <mat-icon>notification_important</mat-icon>\n            <span class=\"ml-2\">Notify</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- <ng-template #loadingScreen>\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i4$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: FormsModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data", isScrollable: "isScrollable", isCategoryProductList: "isCategoryProductList", customClass: "customClass", index: "index" }, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\n      (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\n      off</div>\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\n    </div>\n  </div>\n  <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\n    <span class=\"trim-text color\">{{product.name}}</span>\n    <div class=\"bottom\">\n      <span class=\"m-1\">\n        <span class=\"color\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\n        <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\n          [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\n            [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\n      </span>\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"total-ratings\">{{\n          getRatings(product?.totalReviewCount)}}</div>\n      </div>\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\n        *ngIf=\"data?.content?.display?.showButton\"\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\n        (click)=\"removeDefault($event)\">\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\n          <ng-container *ngIf=\"!product.quantity\">\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\"\n              *ngIf=\"IsEcommerce\">\n              Add to Cart</div>\n            <div [style.color]=\"data.styles?.background?.accentColor\" *ngIf=\"!IsEcommerce\" (click)=\"raiseLead()\">Notify\n              Me</div>\n          </ng-container>\n          <ng-container *ngIf=\"product.quantity\">\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\n            <mat-icon>notification_important</mat-icon>\n            <span class=\"ml-2\">Notify</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- <ng-template #loadingScreen>\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SmallProductListingComponent, decorators: [{
             type: Component,
@@ -15651,9 +15686,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageLoadingComponent,
                         ColorDirective,
                         RatingModule,
-                        FormsModule
-                    ], template: "<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\n      (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\n      off</div>\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\n    </div>\n  </div>\n  <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\n    <span class=\"trim-text color\">{{product.name}}</span>\n    <div class=\"bottom\">\n      <span class=\"m-1\">\n        <span class=\"color\"><span\n            [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\n        <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\n          [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\n            [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\n      </span>\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"total-ratings\">{{\n          getRatings(product?.totalReviewCount)}}</div>\n      </div>\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\" *ngIf=\"data?.content?.display?.showButton\"\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\n        (click)=\"removeDefault($event)\">\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\n          <ng-container *ngIf=\"!product.quantity\">\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">\n              Add to Cart</div>\n          </ng-container>\n          <ng-container *ngIf=\"product.quantity\">\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\n            <mat-icon>notification_important</mat-icon>\n            <span class=\"ml-2\">Notify</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- <ng-template #loadingScreen>\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"] }]
-        }], ctorParameters: () => [{ type: CartService }, { type: i2$2.Router }], propDecorators: { product: [{
+                        FormsModule,
+                        ToastModule
+                    ], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\n<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" [attr.style]=\"customClass\">\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\n      (click)=\"goToProductDetail(product)\" [theme]=\"data?.styles?.theme\"></image-loading>\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\n      off</div>\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\n    </div>\n  </div>\n  <div class=\"p-2 h-40\" (click)=\"goToProductDetail(product)\">\n    <span class=\"trim-text color\">{{product.name}}</span>\n    <div class=\"bottom\">\n      <span class=\"m-1\">\n        <span class=\"color\"><span [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\n        <span class=\"color\" *ngIf=\"product.price.value - product.price.discountedPrice > 2\"\n          [ngClass]=\"{'strike-through' : product.price.value - product.price.discountedPrice > 2}\"><span\n            [innerHTML]=\"currency\"></span> {{product?.price?.value ?? 0}}</span>\n      </span>\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"total-ratings\">{{\n          getRatings(product?.totalReviewCount)}}</div>\n      </div>\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\n        *ngIf=\"data?.content?.display?.showButton\"\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\n        (click)=\"removeDefault($event)\">\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\n          <ng-container *ngIf=\"!product.quantity\">\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\"\n              *ngIf=\"IsEcommerce\">\n              Add to Cart</div>\n            <div [style.color]=\"data.styles?.background?.accentColor\" *ngIf=\"!IsEcommerce\" (click)=\"raiseLead()\">Notify\n              Me</div>\n          </ng-container>\n          <ng-container *ngIf=\"product.quantity\">\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\n            <mat-icon>notification_important</mat-icon>\n            <span class=\"ml-2\">Notify</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- <ng-template #loadingScreen>\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '100%',\n          height: '100%',\n          'border-radius': '10px',\n          'position': 'relative',\n          'right': '5px'\n        }\" />\n</ng-template> -->", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-bottom:10px;border-radius:10px;overflow:hidden;height:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1.8px solid;border-radius:10px;border-color:#e5e7eb}.product .prod-img img{height:100%;width:100%;object-fit:cover}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.width{margin-right:10px;min-width:195px;max-width:195px}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid transparent;border-radius:5px;padding:5px;text-align:center;align-items:center}.add-to-cart .quantity-btn{padding:5px 10px;font-weight:700}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@media screen and (max-width: 475px){.width{max-width:160px;min-width:160px;height:300px}.adjustHeightWidth{max-width:100%;min-width:100%}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}.color{color:#000}.trim-text{text-align:inherit!important}.product-img.fade-out{opacity:0;transform:scale(.95)}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"] }]
+        }], ctorParameters: () => [{ type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }], propDecorators: { product: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -15690,6 +15726,7 @@ class FeaturedProductsComponent extends BaseSection {
         this.USER_CART = null;
         this.USER_WISHLIST = null;
         this.theme = ProductCardTheme;
+        this.IsEcommerce = false;
         this.showRightArrow = true;
         this.showLeftArrow = false;
         if (isPlatformBrowser(this.platformId)) {
@@ -15707,6 +15744,7 @@ class FeaturedProductsComponent extends BaseSection {
         this.styles = this.data?.styles;
         this.button = this.data?.action.buttons[0];
         this.viewAllButton = this.data?.action.buttons[1];
+        this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
         if (!this.isRelatedProduct)
             this.getFeatureProduct();
         this._eventSubscriber = this._eventService.featureCollectionList.subscribe((response) => {
@@ -15745,6 +15783,35 @@ class FeaturedProductsComponent extends BaseSection {
     getSliceParameters() {
         return [0, (this.styles?.maximumProduct || 0)];
     }
+    raiseLead() {
+        const userDetails = this.storageService.getUser();
+        let payload = {
+            businessId: localStorage.getItem('businessId'),
+            email: userDetails?.contact?.email,
+            message: "",
+            mobileNo: "",
+            moreInfo: {
+                Name: userDetails?.contact?.name,
+                "Mobile Number": userDetails?.contact?.mobile,
+                Email: userDetails?.contact?.email,
+                "Lead Source": "Website",
+                "Lead Status": "NEW"
+            },
+            name: userDetails?.contact?.name
+        };
+        this.restService.createLead(payload).subscribe({
+            next: (res) => {
+                if (res?.data) {
+                    this.messageService.add({ severity: 'success', summary: 'Thank you', detail: 'Our team will contact you soon' });
+                }
+            },
+            error: (err) => {
+                if (err) {
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error occured please try again later' });
+                }
+            }
+        });
+    }
     getFeatureProduct() {
         this.apiLoading = true;
         this.restService.getFeaturedProduct(this.content?.collectionId).subscribe((response) => {
@@ -15982,11 +16049,11 @@ class FeaturedProductsComponent extends BaseSection {
         this._eventService.buttonRedirection.emit({ data: data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<ng-container>\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\">\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\n        [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"d-flex jc-space align-center content-side\">\n          <div class=\"input-text content-side\">\n            <div *ngFor=\"let item of content?.inputText\">\n              <ng-container>\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </ng-container>\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n              <!-- </div> -->\n            </div>\n          </div>\n        </div>\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\n          class=\"span-img mt-15\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <!-- mt-3 -->\n          <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\n            [class.flex-column]=\"screenWidth <= 475\">\n            <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\n              <ng-container>\n                <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\n                  [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\n                  [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\n                  [simpoObjectPosition]=\"content?.image?.position\">\n              </ng-container>\n            </div>\n\n            <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\n              [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\n\n              <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n              <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\n                <mat-icon>keyboard_arrow_left</mat-icon>\n              </div>\n            </ng-container> -->\n              <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\n                #container>\n                <div\n                  *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                  class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\n                  [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\n                  [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\n                  [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\n                  <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                    <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\n                  </ng-container>\n                  <div *ngIf=\"styles?.theme != theme.Theme1\">\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\n                      [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\n                  </div>\n                </div>\n\n              </div>\n              <ng-container>\n                <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\n                  <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\n                    <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n                      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_left</mat-icon>\n                      </div>\n                      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_right</mat-icon>\n                      </div>\n                    </div>\n                    <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\n                      [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\n                      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n                      [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\n                      [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\n                      'See All'}}</button>\n\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n      </div>\n      <ng-container *ngIf=\"styles?.devider?.display\">\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ng-template #VarientList let-product=\"data\">\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n        (click)=\"selectVarient(product, varient)\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #AddToCart let-product=\"data\">\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\n      Cart'}}</button>\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\n    </div>\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n  </div>\n</ng-template>\n\n<ng-template #ProductPricing let-product=\"data\">\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\n        'text-left': stylesLayout?.align === 'left',\n        'text-right': stylesLayout?.align === 'right',\n        'text-center': stylesLayout?.align === 'center'\n      }\">\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\n        <span [innerHTML]='currency'></span>\n        {{product.price.value}}\n      </div> -->\n      <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        {{product.price.value}}</div> -->\n      <div class=\"d-flex gap-2\">\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        <ng-container>{{product.price.sellingPrice |\n          number:'1.0-0'}}</ng-container>\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\n          {{product.price.value}}\n        </span>\n      </div>\n    </div>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n    <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\n      (mouseleave)=\"product.prviewIdx = 0\"> -->\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\n\n  </div>\n  <div class=\"mt-15 w-100\">\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\n      [simpoColor]=\"styles?.background?.color\">\n      {{product.name }}</div>\n  </div>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<ng-container>\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\">\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\n        [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"d-flex jc-space align-center content-side\">\n          <div class=\"input-text content-side\">\n            <div *ngFor=\"let item of content?.inputText\">\n              <ng-container>\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </ng-container>\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n              <!-- </div> -->\n            </div>\n          </div>\n        </div>\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\n          class=\"span-img mt-15\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <!-- mt-3 -->\n          <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\n            [class.flex-column]=\"screenWidth <= 475\">\n            <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\n              <ng-container>\n                <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\n                  [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\n                  [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\n                  [simpoObjectPosition]=\"content?.image?.position\">\n              </ng-container>\n            </div>\n\n            <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\n              [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\n\n              <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n              <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\n                <mat-icon>keyboard_arrow_left</mat-icon>\n              </div>\n            </ng-container> -->\n              <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\n                #container>\n                <div\n                  *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                  class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\n                  [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\n                  [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\n                  [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\n                  <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                    <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\n                  </ng-container>\n                  <div *ngIf=\"styles?.theme != theme.Theme1\">\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\n                      [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\n                  </div>\n                </div>\n\n              </div>\n              <ng-container>\n                <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\n                  <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\n                    <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n                      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_left</mat-icon>\n                      </div>\n                      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_right</mat-icon>\n                      </div>\n                    </div>\n                    <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\n                      [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\n                      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n                      [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\n                      [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\n                      'See All'}}</button>\n\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n      </div>\n      <ng-container *ngIf=\"styles?.devider?.display\">\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ng-template #VarientList let-product=\"data\">\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n        (click)=\"selectVarient(product, varient)\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #AddToCart let-product=\"data\">\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\n      Cart'}}</button>\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\n      Me</button>\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\n    </div>\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n  </div>\n</ng-template>\n\n<ng-template #ProductPricing let-product=\"data\">\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\n        'text-left': stylesLayout?.align === 'left',\n        'text-right': stylesLayout?.align === 'right',\n        'text-center': stylesLayout?.align === 'center'\n      }\">\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\n        <span [innerHTML]='currency'></span>\n        {{product.price.value}}\n      </div> -->\n      <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        {{product.price.value}}</div> -->\n      <div class=\"d-flex gap-2\">\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        <ng-container>{{product.price.sellingPrice |\n          number:'1.0-0'}}</ng-container>\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\n          {{product.price.value}}\n        </span>\n      </div>\n    </div>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n    <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\n      (mouseleave)=\"product.prviewIdx = 0\"> -->\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\n\n  </div>\n  <div class=\"mt-15 w-100\">\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\n      [simpoColor]=\"styles?.background?.color\">\n      {{product.name }}</div>\n  </div>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type:
                 //directive
                 SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { 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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
                 // MatBottomSheetModule,
-                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
             type: Component,
@@ -16020,7 +16087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingAroundDirective,
                         ButtonEditorDirective,
                         ObjectPositionDirective
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<ng-container>\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\">\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\n        [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"d-flex jc-space align-center content-side\">\n          <div class=\"input-text content-side\">\n            <div *ngFor=\"let item of content?.inputText\">\n              <ng-container>\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </ng-container>\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n              <!-- </div> -->\n            </div>\n          </div>\n        </div>\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\n          class=\"span-img mt-15\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <!-- mt-3 -->\n          <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\n            [class.flex-column]=\"screenWidth <= 475\">\n            <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\n              <ng-container>\n                <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\n                  [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\n                  [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\n                  [simpoObjectPosition]=\"content?.image?.position\">\n              </ng-container>\n            </div>\n\n            <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\n              [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\n\n              <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n              <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\n                <mat-icon>keyboard_arrow_left</mat-icon>\n              </div>\n            </ng-container> -->\n              <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\n                #container>\n                <div\n                  *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                  class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\n                  [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\n                  [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\n                  [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\n                  <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                    <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\n                  </ng-container>\n                  <div *ngIf=\"styles?.theme != theme.Theme1\">\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\n                      [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\n                  </div>\n                </div>\n\n              </div>\n              <ng-container>\n                <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\n                  <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\n                    <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n                      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_left</mat-icon>\n                      </div>\n                      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_right</mat-icon>\n                      </div>\n                    </div>\n                    <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\n                      [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\n                      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n                      [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\n                      [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\n                      'See All'}}</button>\n\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n      </div>\n      <ng-container *ngIf=\"styles?.devider?.display\">\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ng-template #VarientList let-product=\"data\">\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n        (click)=\"selectVarient(product, varient)\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #AddToCart let-product=\"data\">\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\n      Cart'}}</button>\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\n    </div>\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n  </div>\n</ng-template>\n\n<ng-template #ProductPricing let-product=\"data\">\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\n        'text-left': stylesLayout?.align === 'left',\n        'text-right': stylesLayout?.align === 'right',\n        'text-center': stylesLayout?.align === 'center'\n      }\">\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\n        <span [innerHTML]='currency'></span>\n        {{product.price.value}}\n      </div> -->\n      <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        {{product.price.value}}</div> -->\n      <div class=\"d-flex gap-2\">\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        <ng-container>{{product.price.sellingPrice |\n          number:'1.0-0'}}</ng-container>\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\n          {{product.price.value}}\n        </span>\n      </div>\n    </div>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n    <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\n      (mouseleave)=\"product.prviewIdx = 0\"> -->\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\n\n  </div>\n  <div class=\"mt-15 w-100\">\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\n      [simpoColor]=\"styles?.background?.color\">\n      {{product.name }}</div>\n  </div>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<ng-container>\n  <section class=\"container-fluid total-container px-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\">\n      <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\n        [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"d-flex jc-space align-center content-side\">\n          <div class=\"input-text content-side\">\n            <div *ngFor=\"let item of content?.inputText\">\n              <ng-container>\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n              </ng-container>\n              <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n              <!-- </div> -->\n            </div>\n          </div>\n        </div>\n        <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\n          class=\"span-img mt-15\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <!-- mt-3 -->\n          <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\n            [class.flex-column]=\"screenWidth <= 475\">\n            <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\n              <ng-container>\n                <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\n                  [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\n                  [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\" [id]=\"data?.id\"\n                  [simpoObjectPosition]=\"content?.image?.position\">\n              </ng-container>\n            </div>\n\n            <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\n              [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\n\n              <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n              <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\n                <mat-icon>keyboard_arrow_left</mat-icon>\n              </div>\n            </ng-container> -->\n              <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\n                #container>\n                <div\n                  *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                  class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\n                  [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\n                  [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\n                  [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\n                  <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                    <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\n                  </ng-container>\n                  <div *ngIf=\"styles?.theme != theme.Theme1\">\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\n                      [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\n                  </div>\n                </div>\n\n              </div>\n              <ng-container>\n                <div class=\"d-flex justify-content-end align-items-center w-100 py-3\">\n                  <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\n                    <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\n                      <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_left</mat-icon>\n                      </div>\n                      <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\n                        <mat-icon>keyboard_arrow_right</mat-icon>\n                      </div>\n                    </div>\n                    <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\n                      [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\n                      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n                      [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\n                      [buttonId]=\"getBtnId(1)\" (click)=\"redirectTo(getBtnData(1))\">{{viewAllButton?.content?.label ??\n                      'See All'}}</button>\n\n                  </div>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n      </div>\n      <ng-container *ngIf=\"styles?.devider?.display\">\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n          [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ng-template #VarientList let-product=\"data\">\n  <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n    <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n        [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n        [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n        (click)=\"selectVarient(product, varient)\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #AddToCart let-product=\"data\">\n  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n      (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\n      Cart'}}</button>\n    <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\n      [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\n      [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\"\n      *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && !IsEcommerce\" (click)=\"raiseLead()\">Notify\n      Me</button>\n    <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\n      [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\n      <span style=\"width: 70%;\">{{product.quantity}}</span>\n      <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\n        [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\n    </div>\n    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n  </div>\n</ng-template>\n\n<ng-template #ProductPricing let-product=\"data\">\n  <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\n    <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\n        'text-left': stylesLayout?.align === 'left',\n        'text-right': stylesLayout?.align === 'right',\n        'text-center': stylesLayout?.align === 'center'\n      }\">\n      <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\n        <span [innerHTML]='currency'></span>\n        {{product.price.value}}\n      </div> -->\n      <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        {{product.price.value}}</div> -->\n      <div class=\"d-flex gap-2\">\n        <span [innerHTML]='currency | sanitizeHtml'></span>\n        <ng-container>{{product.price.sellingPrice |\n          number:'1.0-0'}}</ng-container>\n        <span class=\"price\" *ngIf=\"product.price.value - product.price.discountedPrice > 10\"\n          [class.discount-price]=\"product.price.value - product.price.discountedPrice > 10\">\n          {{product.price.value}}\n        </span>\n      </div>\n    </div>\n    <ng-container>\n      <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\n  <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\n    [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n    <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n      [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\n      class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\n      (mouseleave)=\"product.prviewIdx = 0\"> -->\n    <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\n      [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\n\n  </div>\n  <div class=\"mt-15 w-100\">\n    <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\n    <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\n      [simpoColor]=\"styles?.background?.color\">\n      {{product.name }}</div>\n  </div>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -16199,7 +16266,7 @@ class CustomerReviewComponent {
         return (value / this.customerReviews?.length) * 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomerReviewComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\n    <div class=\"left-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"stars\">\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\n                    <div class=\"count\">{{rating.key}}</div>\n                    <div class=\"rating-bar\">\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\n                    </div>\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"right-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\n        <div class=\"customer-reviews\">\n            <ng-container *ngFor=\"let review of customerReviews\">\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\n                </div>\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\n                    <div>{{review.title | titlecase}}</div>\n                </div>\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\n                <div class=\"description\">{{review.review | titlecase}}</div>\n                <hr>\n            </ng-container>\n        </div>\n    </div>\n    \n  <!-- <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container> -->\n\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i4$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: FormsModule }, { 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: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\n    <div class=\"left-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"stars\">\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\n                    <div class=\"count\">{{rating.key}}</div>\n                    <div class=\"rating-bar\">\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\n                    </div>\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"right-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\n        <div class=\"customer-reviews\">\n            <ng-container *ngFor=\"let review of customerReviews\">\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\n                </div>\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\n                    <div>{{review.title | titlecase}}</div>\n                </div>\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\n                <div class=\"description\">{{review.review | titlecase}}</div>\n                <hr>\n            </ng-container>\n        </div>\n    </div>\n    \n  <!-- <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container> -->\n\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomerReviewComponent, decorators: [{
             type: Component,
@@ -16257,6 +16324,7 @@ class ProductDescComponent extends BaseSection {
         this.trialCartItem = [];
         this.isPinCode = true;
         this.toShowInJewellery = false;
+        this.IsEcommerce = false;
         this.varientLoading = false;
         this.recentViewItemList = [];
         this.reviewTitle = "";
@@ -16342,6 +16410,7 @@ class ProductDescComponent extends BaseSection {
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
+        this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
         this.activatedRoute.queryParams.subscribe((qParam) => {
             const productId = qParam["id"];
             if (productId) {
@@ -16446,6 +16515,35 @@ class ProductDescComponent extends BaseSection {
             this.varientLoading = false;
         }, 300);
     }
+    raiseLead() {
+        const userDetails = this.storageService.getUser();
+        let payload = {
+            businessId: localStorage.getItem('businessId'),
+            email: userDetails?.contact?.email,
+            message: "",
+            mobileNo: "",
+            moreInfo: {
+                Name: userDetails?.contact?.name,
+                "Mobile Number": userDetails?.contact?.mobile,
+                Email: userDetails?.contact?.email,
+                "Lead Source": "Website",
+                "Lead Status": "NEW"
+            },
+            name: userDetails?.contact?.name
+        };
+        this.restService.createLead(payload).subscribe({
+            next: (res) => {
+                if (res?.data) {
+                    this.messageService.add({ severity: 'success', summary: 'Thank you', detail: 'Our team will contact you soon' });
+                }
+            },
+            error: (err) => {
+                if (err) {
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error occured please try again later' });
+                }
+            }
+        });
+    }
     getItemVarient() {
         let selectedVarient = null;
         this.responseData?.itemVariant?.forEach((varient) => {
@@ -17011,7 +17109,7 @@ class ProductDescComponent extends BaseSection {
         document.getElementById('openReviewDetail')?.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }, { propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div>\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div>\n      <div class=\"row h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n          <div class=\"prod-img-block\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\n          <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"toShowInJewellery\">\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <ng-container>\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </ng-container>\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <div class=\"product-sku\">\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\n            <div\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n                titlecase}} <ng-container\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n              </a></div>\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n              </span></div>\n          </div>\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n      </ng-container>\n    </section>\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-product\">\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-15\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-600\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\n    </div>\n    <div class=\"d-flex align-items-center gap-2\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice}}</div>\n      <div class=\"price\" [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\n        <span [innerHTML]='currency'></span>\n        {{responseData?.price?.value | number:'1.0-0'}}\n      </div>\n    </div>\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\n  </div>\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n  <ng-container *ngIf=\"toShowInJewellery\">\n    <div class=\"discount\">\n      <p>Flat 30% off on Diamond Prices</p>\n      <p class=\"offer\">Offer Expires in 4 days</p>\n    </div>\n    <div class=\"ring-size-video\">\n      <p class=\"text\">Not sure about the ring size?</p>\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\n        <mat-icon>play_circle_outline</mat-icon>\n      </p>\n    </div>\n  </ng-container>\n\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\n\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc\">\n    <div>\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div>\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele.materialType | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.materialPurity}}\n                  </div>\n                </div>\n                <!-- <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Price/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\n                    number:'1.2-2'}}\n                  </div>\n                </div>\n                <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Value\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\n                  </div>\n                </div> -->\n              </div>\n            </div>\n          </ng-container>\n          <!-- <div class=\"jewel-container mt-2\">\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\n              Making Charges\n            </div>\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Net Weight\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.baseWeight}} </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Making Charge %\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.makingChargePercentage}}\n                </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Value\n                </div>\n                <div class=\"row-content\">\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n      </ng-container>\n    </div>\n\n\n    <!-- <div class=\"tab-group\">\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n        </div>\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n    <div class=\"item-img\">\n      <ng-container *ngIf=\"currentImg\">\n\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\n        <ng-container *ngIf=\"!isMobile\">\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\n        </ng-container>\n        <ng-container *ngIf=\"isMobile\">\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!currentImg\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          [simpoCorner]=\"styles?.corners\">\n      </ng-container>\n    </div>\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"row h-100 mt-0 w-100\">\n      <ng-container *ngIf=\"itemImages?.length == 0\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\n      </ng-container>\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\n          [class.h-100]=\"itemImages?.length == 1\">\n      </ng-container>\n    </div>\n\n  </ng-container>\n\n\n\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px',\n      'position': 'relative',\n      'right': '5px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n          Schedule a Video Call\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center w-90\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n    <ng-container>\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            Order will\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n      <!-- Nearest Store Section -->\n      <ng-container\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\n        <div class=\"store-section\">\n          <div class=\"d-flex align-items-center store-item\">\n            <span class=\"store-icon\">\uD83C\uDFEA</span>\n            <div class=\"store-details\">\n              <div class=\"store-text\">\n                <span class=\"store-label\">Nearest Store - </span>\n                <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\n                <!-- <span class=\"store-distance\"> (4km)</span> -->\n              </div>\n              <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n              <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n            </div>\n          </div>\n          <div class=\"d-flex justify-content-center w-100\">\n            <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\n              STORE</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyStore>\n        <div class=\"delivery-section\">\n          <div class=\"d-flex align-items-center\">\n            <span class=\"delivery-icon\">\uD83C\uDFEA</span>\n            <span class=\"delivery-text\">No Stores are available</span>\n          </div>\n        </div>\n      </ng-template>\n      <!-- Try At Home Section -->\n      <div class=\"try-home-section\">\n        <div class=\"d-flex align-items-start try-home-item\">\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\n          <div class=\"try-home-details\">\n            <div class=\"try-home-header\">\n              <span class=\"try-home-text\">Try At Home</span>\n              <span class=\"free-text\"> (It's Free)</span>\n            </div>\n            <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n            <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n          </div>\n        </div>\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\n          <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\n            HOME</button>\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\n            [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\n                <mat-icon>video_call</mat-icon>&nbsp;\n                SCHEDULE A VIDEO CALL\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\n    <div class=\"col-md-3 col-sm-12\">\n      <div class=\"cust-header\">Customer Reviews</div>\n      <div class=\"d-flex gap-3 mb-1\">\n        <ng-container *ngIf=\"responseData?.averageRating\">\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n        </ng-container>\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\n      </div>\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\n      <div class=\"ratings-percentage\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\n            <span>{{rating + \" star\"}}</span>\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n              <div [style.width.%]=\"getPercentage(rating)\"\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\n            </div>\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9 col-sm-12\">\n      <div class=\"review-header\">Latest Reviews</div>\n      <div class=\"review-body d-flex flex-column gap-3\">\n        <ng-container *ngFor=\"let review of reviewsData\">\n          <div class=\"review-container w-75\">\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\n                class=\"width-30 h-25 mr-2\">\n              <span>{{review?.userName ?? \"-\"}}</span>\n            </div>\n            <ng-container *ngIf=\"review?.rating\">\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </ng-container>\n            <div class=\"review-desc\">\n              {{review?.review ?? \"-\"}}\n            </div>\n            <div class=\"review-img\">\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\n                (click)=\"showDetailReview(review)\">\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\n                id=\"openReviewDetail\"></button>\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\n          [style.color]=\"data?.styles?.background?.accentColor\">\n          See more reviews <span>></span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.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:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 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}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i4$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: i16.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: i11$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: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }, { propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div>\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div>\n      <div class=\"row h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n          <div class=\"prod-img-block\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\n          <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"toShowInJewellery\">\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <ng-container>\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </ng-container>\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <div class=\"product-sku\">\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\n            <div\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n                titlecase}} <ng-container\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n              </a></div>\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n              </span></div>\n          </div>\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n      </ng-container>\n    </section>\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-product\">\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-15\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-600\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\n    </div>\n    <div class=\"d-flex align-items-center gap-2\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice}}</div>\n      <div class=\"price\"\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\n        <span [innerHTML]='currency'></span>\n        {{responseData?.price?.value | number:'1.0-0'}}\n      </div>\n    </div>\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\n  </div>\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n  <ng-container *ngIf=\"toShowInJewellery\">\n    <div class=\"discount\">\n      <p>Flat 30% off on Diamond Prices</p>\n      <p class=\"offer\">Offer Expires in 4 days</p>\n    </div>\n    <div class=\"ring-size-video\">\n      <p class=\"text\">Not sure about the ring size?</p>\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\n        <mat-icon>play_circle_outline</mat-icon>\n      </p>\n    </div>\n  </ng-container>\n\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\n\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc\">\n    <div>\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div>\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele.materialType | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.materialPurity}}\n                  </div>\n                </div>\n                <!-- <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Price/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\n                    number:'1.2-2'}}\n                  </div>\n                </div>\n                <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Value\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\n                  </div>\n                </div> -->\n              </div>\n            </div>\n          </ng-container>\n          <!-- <div class=\"jewel-container mt-2\">\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\n              Making Charges\n            </div>\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Net Weight\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.baseWeight}} </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Making Charge %\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.makingChargePercentage}}\n                </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Value\n                </div>\n                <div class=\"row-content\">\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n      </ng-container>\n    </div>\n\n\n    <!-- <div class=\"tab-group\">\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n        </div>\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n    <div class=\"item-img\">\n      <ng-container *ngIf=\"currentImg\">\n\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\n        <ng-container *ngIf=\"!isMobile\">\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\n        </ng-container>\n        <ng-container *ngIf=\"isMobile\">\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!currentImg\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          [simpoCorner]=\"styles?.corners\">\n      </ng-container>\n    </div>\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"row h-100 mt-0 w-100\">\n      <ng-container *ngIf=\"itemImages?.length == 0\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\n      </ng-container>\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\n          [class.h-100]=\"itemImages?.length == 1\">\n      </ng-container>\n    </div>\n\n  </ng-container>\n\n\n\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px',\n      'position': 'relative',\n      'right': '5px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n          Schedule a Video Call\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center w-90\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n    <ng-container>\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            Order will\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n      <!-- Nearest Store Section -->\n      <ng-container\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\n        <div class=\"store-section\">\n          <div class=\"d-flex align-items-center store-item\">\n            <span class=\"store-icon\">\uD83C\uDFEA</span>\n            <div class=\"store-details\">\n              <div class=\"store-text\">\n                <span class=\"store-label\">Nearest Store - </span>\n                <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\n                <!-- <span class=\"store-distance\"> (4km)</span> -->\n              </div>\n              <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n              <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n            </div>\n          </div>\n          <div class=\"d-flex justify-content-center w-100\">\n            <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\n              STORE</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyStore>\n        <div class=\"delivery-section\">\n          <div class=\"d-flex align-items-center\">\n            <span class=\"delivery-icon\">\uD83C\uDFEA</span>\n            <span class=\"delivery-text\">No Stores are available</span>\n          </div>\n        </div>\n      </ng-template>\n      <!-- Try At Home Section -->\n      <div class=\"try-home-section\">\n        <div class=\"d-flex align-items-start try-home-item\">\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\n          <div class=\"try-home-details\">\n            <div class=\"try-home-header\">\n              <span class=\"try-home-text\">Try At Home</span>\n              <span class=\"free-text\"> (It's Free)</span>\n            </div>\n            <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n            <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n          </div>\n        </div>\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\n          <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\n            HOME</button>\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\n                <mat-icon>video_call</mat-icon>&nbsp;\n                SCHEDULE A VIDEO CALL\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\n    <div class=\"col-md-3 col-sm-12\">\n      <div class=\"cust-header\">Customer Reviews</div>\n      <div class=\"d-flex gap-3 mb-1\">\n        <ng-container *ngIf=\"responseData?.averageRating\">\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n        </ng-container>\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\n      </div>\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\n      <div class=\"ratings-percentage\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\n            <span>{{rating + \" star\"}}</span>\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n              <div [style.width.%]=\"getPercentage(rating)\"\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\n            </div>\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9 col-sm-12\">\n      <div class=\"review-header\">Latest Reviews</div>\n      <div class=\"review-body d-flex flex-column gap-3\">\n        <ng-container *ngFor=\"let review of reviewsData\">\n          <div class=\"review-container w-75\">\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\n                class=\"width-30 h-25 mr-2\">\n              <span>{{review?.userName ?? \"-\"}}</span>\n            </div>\n            <ng-container *ngIf=\"review?.rating\">\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </ng-container>\n            <div class=\"review-desc\">\n              {{review?.review ?? \"-\"}}\n            </div>\n            <div class=\"review-img\">\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\n                (click)=\"showDetailReview(review)\">\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\n                id=\"openReviewDetail\"></button>\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\n          [style.color]=\"data?.styles?.background?.accentColor\">\n          See more reviews <span>></span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.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:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 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}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.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: i16.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: i9$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: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -17040,7 +17138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SvgDividerComponent,
                         CornerDirective,
                         ButtonEditorDirective,
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div>\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div>\n      <div class=\"row h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n          <div class=\"prod-img-block\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\n          <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"toShowInJewellery\">\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <ng-container>\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </ng-container>\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <div class=\"product-sku\">\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\n            <div\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n                titlecase}} <ng-container\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n              </a></div>\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n              </span></div>\n          </div>\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n      </ng-container>\n    </section>\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-product\">\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-15\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-600\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\n    </div>\n    <div class=\"d-flex align-items-center gap-2\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice}}</div>\n      <div class=\"price\" [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\n        <span [innerHTML]='currency'></span>\n        {{responseData?.price?.value | number:'1.0-0'}}\n      </div>\n    </div>\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\n  </div>\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n  <ng-container *ngIf=\"toShowInJewellery\">\n    <div class=\"discount\">\n      <p>Flat 30% off on Diamond Prices</p>\n      <p class=\"offer\">Offer Expires in 4 days</p>\n    </div>\n    <div class=\"ring-size-video\">\n      <p class=\"text\">Not sure about the ring size?</p>\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\n        <mat-icon>play_circle_outline</mat-icon>\n      </p>\n    </div>\n  </ng-container>\n\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\n\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc\">\n    <div>\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div>\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele.materialType | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.materialPurity}}\n                  </div>\n                </div>\n                <!-- <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Price/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\n                    number:'1.2-2'}}\n                  </div>\n                </div>\n                <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Value\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\n                  </div>\n                </div> -->\n              </div>\n            </div>\n          </ng-container>\n          <!-- <div class=\"jewel-container mt-2\">\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\n              Making Charges\n            </div>\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Net Weight\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.baseWeight}} </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Making Charge %\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.makingChargePercentage}}\n                </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Value\n                </div>\n                <div class=\"row-content\">\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n      </ng-container>\n    </div>\n\n\n    <!-- <div class=\"tab-group\">\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n        </div>\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n    <div class=\"item-img\">\n      <ng-container *ngIf=\"currentImg\">\n\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\n        <ng-container *ngIf=\"!isMobile\">\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\n        </ng-container>\n        <ng-container *ngIf=\"isMobile\">\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!currentImg\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          [simpoCorner]=\"styles?.corners\">\n      </ng-container>\n    </div>\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"row h-100 mt-0 w-100\">\n      <ng-container *ngIf=\"itemImages?.length == 0\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\n      </ng-container>\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\n          [class.h-100]=\"itemImages?.length == 1\">\n      </ng-container>\n    </div>\n\n  </ng-container>\n\n\n\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px',\n      'position': 'relative',\n      'right': '5px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n          Schedule a Video Call\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center w-90\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n    <ng-container>\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            Order will\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n      <!-- Nearest Store Section -->\n      <ng-container\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\n        <div class=\"store-section\">\n          <div class=\"d-flex align-items-center store-item\">\n            <span class=\"store-icon\">\uD83C\uDFEA</span>\n            <div class=\"store-details\">\n              <div class=\"store-text\">\n                <span class=\"store-label\">Nearest Store - </span>\n                <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\n                <!-- <span class=\"store-distance\"> (4km)</span> -->\n              </div>\n              <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n              <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n            </div>\n          </div>\n          <div class=\"d-flex justify-content-center w-100\">\n            <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\n              STORE</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyStore>\n        <div class=\"delivery-section\">\n          <div class=\"d-flex align-items-center\">\n            <span class=\"delivery-icon\">\uD83C\uDFEA</span>\n            <span class=\"delivery-text\">No Stores are available</span>\n          </div>\n        </div>\n      </ng-template>\n      <!-- Try At Home Section -->\n      <div class=\"try-home-section\">\n        <div class=\"d-flex align-items-start try-home-item\">\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\n          <div class=\"try-home-details\">\n            <div class=\"try-home-header\">\n              <span class=\"try-home-text\">Try At Home</span>\n              <span class=\"free-text\"> (It's Free)</span>\n            </div>\n            <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n            <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n          </div>\n        </div>\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\n          <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\n            HOME</button>\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\n            [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\n                <mat-icon>video_call</mat-icon>&nbsp;\n                SCHEDULE A VIDEO CALL\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\n    <div class=\"col-md-3 col-sm-12\">\n      <div class=\"cust-header\">Customer Reviews</div>\n      <div class=\"d-flex gap-3 mb-1\">\n        <ng-container *ngIf=\"responseData?.averageRating\">\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n        </ng-container>\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\n      </div>\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\n      <div class=\"ratings-percentage\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\n            <span>{{rating + \" star\"}}</span>\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n              <div [style.width.%]=\"getPercentage(rating)\"\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\n            </div>\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9 col-sm-12\">\n      <div class=\"review-header\">Latest Reviews</div>\n      <div class=\"review-body d-flex flex-column gap-3\">\n        <ng-container *ngFor=\"let review of reviewsData\">\n          <div class=\"review-container w-75\">\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\n                class=\"width-30 h-25 mr-2\">\n              <span>{{review?.userName ?? \"-\"}}</span>\n            </div>\n            <ng-container *ngIf=\"review?.rating\">\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </ng-container>\n            <div class=\"review-desc\">\n              {{review?.review ?? \"-\"}}\n            </div>\n            <div class=\"review-img\">\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\n                (click)=\"showDetailReview(review)\">\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\n                id=\"openReviewDetail\"></button>\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\n          [style.color]=\"data?.styles?.background?.accentColor\">\n          See more reviews <span>></span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.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:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 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}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div>\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div>\n      <div class=\"row h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n          <div class=\"prod-img-block\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\n          <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"!isMobile\">\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n          </ng-container>\n\n\n          <ng-container *ngIf=\"toShowInJewellery\">\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <ng-container>\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </ng-container>\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <div class=\"product-sku\">\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\n            <div\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n                titlecase}} <ng-container\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n              </a></div>\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n              </span></div>\n          </div>\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <ng-container>\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n      </ng-container>\n    </section>\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-product\">\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-15\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-600\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\n    </div>\n    <div class=\"d-flex align-items-center gap-2\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice}}</div>\n      <div class=\"price\"\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\n        <span [innerHTML]='currency'></span>\n        {{responseData?.price?.value | number:'1.0-0'}}\n      </div>\n    </div>\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\n  </div>\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n  <ng-container *ngIf=\"toShowInJewellery\">\n    <div class=\"discount\">\n      <p>Flat 30% off on Diamond Prices</p>\n      <p class=\"offer\">Offer Expires in 4 days</p>\n    </div>\n    <div class=\"ring-size-video\">\n      <p class=\"text\">Not sure about the ring size?</p>\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\n        <mat-icon>play_circle_outline</mat-icon>\n      </p>\n    </div>\n  </ng-container>\n\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\n\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc\">\n    <div>\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div>\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele.materialType | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.materialPurity}}\n                  </div>\n                </div>\n                <!-- <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Price/Gram\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\n                    number:'1.2-2'}}\n                  </div>\n                </div>\n                <div class=\"col-4\">\n                  <div class=\"row-header\">\n                    Value\n                  </div>\n                  <div class=\"row-content\">\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\n                  </div>\n                </div> -->\n              </div>\n            </div>\n          </ng-container>\n          <!-- <div class=\"jewel-container mt-2\">\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\n              Making Charges\n            </div>\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Net Weight\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.baseWeight}} </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Making Charge %\n                </div>\n                <div class=\"row-content\">\n                  {{responseData?.makingChargePercentage}}\n                </div>\n              </div>\n              <div class=\"col-4\">\n                <div class=\"row-header\">\n                  Value\n                </div>\n                <div class=\"row-content\">\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\n                </div>\n              </div>\n            </div>\n          </div> -->\n        </div>\n      </ng-container>\n    </div>\n\n\n    <!-- <div class=\"tab-group\">\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n        </div>\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n    <div class=\"item-img\">\n      <ng-container *ngIf=\"currentImg\">\n\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\n        <ng-container *ngIf=\"!isMobile\">\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\n        </ng-container>\n        <ng-container *ngIf=\"isMobile\">\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!currentImg\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          [simpoCorner]=\"styles?.corners\">\n      </ng-container>\n    </div>\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"row h-100 mt-0 w-100\">\n      <ng-container *ngIf=\"itemImages?.length == 0\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\n      </ng-container>\n      <ng-container *ngFor=\"let img of itemImages\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\n          [class.h-100]=\"itemImages?.length == 1\">\n      </ng-container>\n    </div>\n\n  </ng-container>\n\n\n\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px',\n      'position': 'relative',\n      'right': '5px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\n          Schedule a Video Call\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center w-90\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n    <ng-container>\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            Order will\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n      <!-- Nearest Store Section -->\n      <ng-container\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\n        <div class=\"store-section\">\n          <div class=\"d-flex align-items-center store-item\">\n            <span class=\"store-icon\">\uD83C\uDFEA</span>\n            <div class=\"store-details\">\n              <div class=\"store-text\">\n                <span class=\"store-label\">Nearest Store - </span>\n                <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\n                <!-- <span class=\"store-distance\"> (4km)</span> -->\n              </div>\n              <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n              <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n            </div>\n          </div>\n          <div class=\"d-flex justify-content-center w-100\">\n            <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\n              STORE</button>\n          </div>\n        </div>\n      </ng-container>\n      <ng-template #emptyStore>\n        <div class=\"delivery-section\">\n          <div class=\"d-flex align-items-center\">\n            <span class=\"delivery-icon\">\uD83C\uDFEA</span>\n            <span class=\"delivery-text\">No Stores are available</span>\n          </div>\n        </div>\n      </ng-template>\n      <!-- Try At Home Section -->\n      <div class=\"try-home-section\">\n        <div class=\"d-flex align-items-start try-home-item\">\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\n          <div class=\"try-home-details\">\n            <div class=\"try-home-header\">\n              <span class=\"try-home-text\">Try At Home</span>\n              <span class=\"free-text\"> (It's Free)</span>\n            </div>\n            <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n            <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n          </div>\n        </div>\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\n          <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\n            HOME</button>\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\n                <mat-icon>video_call</mat-icon>&nbsp;\n                SCHEDULE A VIDEO CALL\n              </div>\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\n    <div class=\"col-md-3 col-sm-12\">\n      <div class=\"cust-header\">Customer Reviews</div>\n      <div class=\"d-flex gap-3 mb-1\">\n        <ng-container *ngIf=\"responseData?.averageRating\">\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n        </ng-container>\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\n      </div>\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\n      <div class=\"ratings-percentage\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\n            <span>{{rating + \" star\"}}</span>\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n              <div [style.width.%]=\"getPercentage(rating)\"\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\n            </div>\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9 col-sm-12\">\n      <div class=\"review-header\">Latest Reviews</div>\n      <div class=\"review-body d-flex flex-column gap-3\">\n        <ng-container *ngFor=\"let review of reviewsData\">\n          <div class=\"review-container w-75\">\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\n                class=\"width-30 h-25 mr-2\">\n              <span>{{review?.userName ?? \"-\"}}</span>\n            </div>\n            <ng-container *ngIf=\"review?.rating\">\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </ng-container>\n            <div class=\"review-desc\">\n              {{review?.review ?? \"-\"}}\n            </div>\n            <div class=\"review-img\">\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\n                (click)=\"showDetailReview(review)\">\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\n                id=\"openReviewDetail\"></button>\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\n          [style.color]=\"data?.styles?.background?.accentColor\">\n          See more reviews <span>></span>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.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:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 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}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -17179,6 +17277,7 @@ class ProductListComponent extends BaseSection {
             { label: '₹5,00,000 - ₹6,00,000', min: 500000, max: 600000, selected: false }
         ];
         this.toShowInJewellery = false;
+        this.IsEcommerce = false;
         this.ringSizes = [
             { size: 'Bands', status: false },
             { size: 'Cocktail', status: false },
@@ -17290,6 +17389,35 @@ class ProductListComponent extends BaseSection {
         this.filterItemList();
     }
     // Modify filterItemList to send the correct price min and max:
+    raiseLead() {
+        const userDetails = this.storageService.getUser();
+        let payload = {
+            businessId: localStorage.getItem('businessId'),
+            email: userDetails?.contact?.email,
+            message: "",
+            mobileNo: "",
+            moreInfo: {
+                Name: userDetails?.contact?.name,
+                "Mobile Number": userDetails?.contact?.mobile,
+                Email: userDetails?.contact?.email,
+                "Lead Source": "Website",
+                "Lead Status": "NEW"
+            },
+            name: userDetails?.contact?.name
+        };
+        this.restService.createLead(payload).subscribe({
+            next: (res) => {
+                if (res?.data) {
+                    this.messageService.add({ severity: 'success', summary: 'Thank you', detail: 'Our team will contact you soon' });
+                }
+            },
+            error: (err) => {
+                if (err) {
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error occured please try again later' });
+                }
+            }
+        });
+    }
     filterItemList() {
         this.apiLoading = true;
         this.pageNo = 1;
@@ -17374,6 +17502,7 @@ class ProductListComponent extends BaseSection {
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
+        this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
         this.getAllCategories();
         this.getAllCollections();
         this.minProductPrice = this.pricingMin = this.data?.styles.minPrice ?? 0;
@@ -17948,7 +18077,7 @@ class ProductListComponent extends BaseSection {
         return brightness > threshold ? '#000000' : '#ffffff';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\n          <ng-container *ngFor=\"let filter of filteredChips\">\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n              <span>{{filter.name}}</span>\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n              </span>\n            </div>\n          </ng-container>\n        </div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\n      <ng-container *ngFor=\"let filter of filteredChips\">\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by categories</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\n        (click)=\"applyFilter(category, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"category.status\" />\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCategories\">\n              <mat-icon>expand_more</mat-icon>\n            </ng-container>\n            <ng-container *ngIf=\"showAllCategories\">\n              <mat-icon>expand_less</mat-icon>\n            </ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by collections</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\n        (click)=\"applyFilter(collection, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"collection.status\" />\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by price</b></h6>\n      </div>\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange()\" />\n        <div class=\"trim-text\">{{ range.label }}</div>\n      </label>\n    </div>\n\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Product Type</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop for</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Material</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Metal</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Ring Style</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\n        (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <div class=\"product-card position-relative\">\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n      class=\"default-image position-relative\">\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div class=\"mt-2 w-100\">\n      <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n        <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n            [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n            [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n            [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n            (click)=\"selectVarient(product, varient)\">\n        </ng-container>\n      </div>\n      <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n        <div class=\"price body-large text-left d-flex align-items-center g-10\">\n          <div class=\"fs-16\">\n            <span [innerHTML]='currency'></span>\n            {{product?.price?.sellingPrice | number:'1.2-2'}}\n          </div>\n\n          <div class=\"fs-16\">\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n              {{product?.price?.value | number:'1.2-2'}}\n            </span>\n          </div>\n          <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n            <span [innerHTML]='currency'></span>\n            {{product.price.sellingPrice | number:'1.2-2'}}\n          </div> -->\n        </div>\n\n        <div class=\"product-name heading-large w-100 text-left trim-text\"\n          [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n        <div\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\n          class=\"add-to-cart-btn\">\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n            [id]=\"data?.id+getButtonId(1)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\n            (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n            [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\"\n              (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n          </div>\n        </div>\n        <div>\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n        </div>\n        <div class=\"try-button-section\"\n          *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\n          <div class=\"try-at-home\">\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n              HOME</button>\n          </div>\n          <div class=\"video-call-image\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\"\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\n            [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <mat-icon>video_call</mat-icon>&nbsp;\n              SCHEDULE A VIDEO CALL\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:150px;max-width:200px;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;width:48%!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:3rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.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: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\n          <ng-container *ngFor=\"let filter of filteredChips\">\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n              <span>{{filter.name}}</span>\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n              </span>\n            </div>\n          </ng-container>\n        </div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\n      <ng-container *ngFor=\"let filter of filteredChips\">\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by categories</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\n        (click)=\"applyFilter(category, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"category.status\" />\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCategories\">\n              <mat-icon>expand_more</mat-icon>\n            </ng-container>\n            <ng-container *ngIf=\"showAllCategories\">\n              <mat-icon>expand_less</mat-icon>\n            </ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by collections</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\n        (click)=\"applyFilter(collection, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"collection.status\" />\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by price</b></h6>\n      </div>\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange()\" />\n        <div class=\"trim-text\">{{ range.label }}</div>\n      </label>\n    </div>\n\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Product Type</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop for</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Material</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Metal</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Ring Style</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\n        (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <div class=\"product-card position-relative\">\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n      class=\"default-image position-relative\">\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div class=\"mt-2 w-100\">\n      <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n        <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n            [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n            [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n            [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n            (click)=\"selectVarient(product, varient)\">\n        </ng-container>\n      </div>\n      <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n        <div class=\"price body-large text-left d-flex align-items-center g-10\">\n          <div class=\"fs-16\">\n            <span [innerHTML]='currency'></span>\n            {{product?.price?.sellingPrice | number:'1.2-2'}}\n          </div>\n\n          <div class=\"fs-16\">\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n              {{product?.price?.value | number:'1.2-2'}}\n            </span>\n          </div>\n          <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n            <span [innerHTML]='currency'></span>\n            {{product.price.sellingPrice | number:'1.2-2'}}\n          </div> -->\n        </div>\n\n        <div class=\"product-name heading-large w-100 text-left trim-text\"\n          [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n        <div\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\n          class=\"add-to-cart-btn\">\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n            [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n            (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n          <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n            [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n            [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\"\n              (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n          </div>\n        </div>\n        <div>\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n        </div>\n        <div class=\"try-button-section\"\n          *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\n          <div class=\"try-at-home\">\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n              HOME</button>\n          </div>\n          <div class=\"video-call-image\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\"\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\n            [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <mat-icon>video_call</mat-icon>&nbsp;\n              SCHEDULE A VIDEO CALL\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:150px;max-width:200px;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;width:48%!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:3rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.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: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
@@ -17975,7 +18104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatChipsModule,
                         ButtonEditorDirective,
                         SpacingHorizontalDirective,
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\n          <ng-container *ngFor=\"let filter of filteredChips\">\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n              <span>{{filter.name}}</span>\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n              </span>\n            </div>\n          </ng-container>\n        </div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\n      <ng-container *ngFor=\"let filter of filteredChips\">\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by categories</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\n        (click)=\"applyFilter(category, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"category.status\" />\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCategories\">\n              <mat-icon>expand_more</mat-icon>\n            </ng-container>\n            <ng-container *ngIf=\"showAllCategories\">\n              <mat-icon>expand_less</mat-icon>\n            </ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by collections</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\n        (click)=\"applyFilter(collection, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"collection.status\" />\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by price</b></h6>\n      </div>\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange()\" />\n        <div class=\"trim-text\">{{ range.label }}</div>\n      </label>\n    </div>\n\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Product Type</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop for</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Material</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Metal</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Ring Style</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\n        (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <div class=\"product-card position-relative\">\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n      class=\"default-image position-relative\">\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div class=\"mt-2 w-100\">\n      <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n        <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n            [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n            [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n            [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n            (click)=\"selectVarient(product, varient)\">\n        </ng-container>\n      </div>\n      <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n        <div class=\"price body-large text-left d-flex align-items-center g-10\">\n          <div class=\"fs-16\">\n            <span [innerHTML]='currency'></span>\n            {{product?.price?.sellingPrice | number:'1.2-2'}}\n          </div>\n\n          <div class=\"fs-16\">\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n              {{product?.price?.value | number:'1.2-2'}}\n            </span>\n          </div>\n          <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n            <span [innerHTML]='currency'></span>\n            {{product.price.sellingPrice | number:'1.2-2'}}\n          </div> -->\n        </div>\n\n        <div class=\"product-name heading-large w-100 text-left trim-text\"\n          [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n        <div\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\n          class=\"add-to-cart-btn\">\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n            [id]=\"data?.id+getButtonId(1)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\n            (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n            [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\"\n              (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n          </div>\n        </div>\n        <div>\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n        </div>\n        <div class=\"try-button-section\"\n          *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\n          <div class=\"try-at-home\">\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n              HOME</button>\n          </div>\n          <div class=\"video-call-image\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\"\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\n            [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <mat-icon>video_call</mat-icon>&nbsp;\n              SCHEDULE A VIDEO CALL\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:150px;max-width:200px;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;width:48%!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:3rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div>\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\n          <ng-container *ngFor=\"let filter of filteredChips\">\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n              <span>{{filter.name}}</span>\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n              </span>\n            </div>\n          </ng-container>\n        </div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\n      <ng-container *ngFor=\"let filter of filteredChips\">\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by categories</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\n        (click)=\"applyFilter(category, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"category.status\" />\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCategories\">\n              <mat-icon>expand_more</mat-icon>\n            </ng-container>\n            <ng-container *ngIf=\"showAllCategories\">\n              <mat-icon>expand_less</mat-icon>\n            </ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by collections</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\n        (click)=\"applyFilter(collection, 'FILTER')\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"collection.status\" />\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\n      </div>\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\n        [style.color]=\"styles?.background?.accentColor\">\n        <span class=\"toggle-text\">\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\n          <span class=\"dropdown-icon\">\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop by price</b></h6>\n      </div>\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange()\" />\n        <div class=\"trim-text\">{{ range.label }}</div>\n      </label>\n    </div>\n\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Product Type</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Shop for</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Material</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Metal</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small\">\n        <h6><b>Ring Style</b></h6>\n      </div>\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n        <div class=\"trim-text\">{{ size.size }}</div>\n      </div>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\n        (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <div class=\"product-card position-relative\">\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n      class=\"default-image position-relative\">\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n        [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n        (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n      </div>\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n    </div>\n\n    <div class=\"mt-2 w-100\">\n      <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n        <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n            [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n            [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n            [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n            (click)=\"selectVarient(product, varient)\">\n        </ng-container>\n      </div>\n      <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n        <div class=\"price body-large text-left d-flex align-items-center g-10\">\n          <div class=\"fs-16\">\n            <span [innerHTML]='currency'></span>\n            {{product?.price?.sellingPrice | number:'1.2-2'}}\n          </div>\n\n          <div class=\"fs-16\">\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n              {{product?.price?.value | number:'1.2-2'}}\n            </span>\n          </div>\n          <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n            <span [innerHTML]='currency'></span>\n            {{product.price.sellingPrice | number:'1.2-2'}}\n          </div> -->\n        </div>\n\n        <div class=\"product-name heading-large w-100 text-left trim-text\"\n          [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n        <div\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\n          class=\"add-to-cart-btn\">\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n            [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n            (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n          <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n            [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n            [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\"\n              (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n              [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n          </div>\n        </div>\n        <div>\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n        </div>\n        <div class=\"try-button-section\"\n          *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\n          <div class=\"try-at-home\">\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n              HOME</button>\n          </div>\n          <div class=\"video-call-image\">\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\"\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n\n<ng-template #dialogBox>\n  <div class=\"modal-content\">\n    <div class=\"modal-header d-flex align-item-center\">\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\n        <mat-icon (click)=\"matCloseDialog()\"\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\n      </div>\n    </div>\n    <div class=\"modal-body h-100\">\n      <div class=\"row h-100 w-100 video-call-container\">\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\n          <img\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\n        </div>\n        <div class=\"col-6 position-relative h-100 call-details\">\n          <!-- Name Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\n              (input)=\"onInputChange('username')\">\n          </div>\n\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\n              (input)=\"onInputChange('email')\">\n          </div>\n\n          <!-- Mobile Number Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\n            <div class=\"sub-text-call\">IN +91</div>\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\n              (input)=\"onInputChange('mobileNumber')\">\n          </div>\n\n\n          <!-- Pincode Input with Validation -->\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n            </div>\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\n              (input)=\"onInputChange('pincode')\">\n          </div>\n          <div class=\"language my-3\">\n            <div class=\"mini-text mb-2\">Language Preference</div>\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\n              <ng-container *ngFor=\"let lang of languages\">\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\n                  (click)=\"selectedLang = lang\"\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\n                  {{lang}}\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\n            <div class=\"input-field my-3\">\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\n            </div>\n          </ng-container>\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\n            [disabled]=\"isSubmitting\">\n            <ng-container *ngIf=\"isSubmitting\">\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\n                <span class=\"visually-hidden\">Loading...</span>\n              </div>\n              SCHEDULING...\n            </ng-container>\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\n              <mat-icon>video_call</mat-icon>&nbsp;\n              SCHEDULE A VIDEO CALL\n            </ng-container>\n            <ng-container *ngIf=\"scheduled\">\n              <mat-icon>check_circle</mat-icon>&nbsp;\n              SCHEDULED SUCCESSFULLY\n            </ng-container>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:150px;max-width:200px;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;width:48%!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:3rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -18254,7 +18383,7 @@ class WhislistComponent extends BaseSection {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i6$1.MessageService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\n      [simpoAnimation]=\"styles?.animation\">\n      <div class=\"left-panel\" [ngClass]=\"{ 'mobile-height': isMobile && responseData?.orderedItems?.length === 1 }\">\n        <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\n          My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\n        </div>\n\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n            <div class=\"cart-items\" [ngClass]=\"{ 'mobile-height': isMobile && (responseData?.orderedItems?.length ?? 0) === 1, 'multiple-items': (responseData?.orderedItems?.length ?? 0) > 1 }\">\n              <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\n              <div class=\"d-flex item-parent\">\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n                  <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n                </div>\n                <div class=\"col-md-6 h-100 item-desc\">\n                  <div class=\"lh-23\">\n                    <div class=\"item-name heading-large trim-text\" [style.color]=\"styles?.background?.accentColor\" (click)=\"redirectToProduct(item)\">{{item.itemName}}</div>\n                    <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\n                      <span [innerHTML]='currency'></span> {{item.discountedPrice ?? item.sellingPrice}}\n                    </div>\n                    <ng-container *ngIf=\"item.itemVariant\">\n                      <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n                        <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\n                        <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n                        <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\n                      </div>\n                    </ng-container>\n                    <div class=\"d-flex action-btn\" class=\"options\"  style=\"gap: 5px;   \" >\n                      <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\n                        <div class=\"count\">\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n                          <span>{{item.quantity}}</span>\n                          <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n                        </div>\n                      </div>\n                      <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\n                      </div>\n                      <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\n                  <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\n                    {{(item.discountedPrice ?? item.sellingPrice) * item.quantity}}</div>\n                  <div>\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n      <div class=\"empty-cart-container\">\n        <div class=\"cart-image\">\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n            alt=\"\">\n        </div>\n        <div class=\"cart-text\">\n          <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\n            Your Wishlist is empty\n          </div>\n          <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\n            Looks like you have not added anything to your Wishlist. Go ahead & explore top categories.\n          </div>\n        </div>\n      </div>\n    </section>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.item-desc{margin-left:10px!important}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.options{display:flex}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important;height:calc(100vh - 130px)}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.count{display:flex;gap:20px}.item-quantity{width:100%;justify-content:center}.options{flex-direction:column}.empty-cart-container{height:calc(100vh - 130px)}}@media (min-width:768px) and (max-width:1024px){.options{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "directive", type:
                 //DIRECTIVE
-                BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+                BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, decorators: [{
             type: Component,
@@ -18442,7 +18571,7 @@ class OrderDetailsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i6$1.MessageService }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\n\n        <!-- Header Section -->\n        <div class=\"row\" *ngIf=\"!isMobile\">\n            <div class=\"col-12\">\n                <div class=\"d-flex align-items-center gap-3\">\n                    <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                    <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\n                </div>\n                <div class=\"d-flex flex-wrap gap-2 mb-2\">\n                    <span class=\"d-flex align-items-center text-muted\">\n                        <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n                        <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy' }}</small>\n                    </span>\n                    <span class=\"d-flex align-items-center text-muted\">\n                        <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n                        <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\n                            items</small>\n                    </span>\n                </div>\n            </div>\n        </div>\n\n        <!-- Mobile Header -->\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\n                <div></div>\n            </div>\n        </div>\n\n        <div class=\"row g-4\">\n            <!-- Left Column -->\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n                <!-- Timeline for Desktop -->\n\n                <!-- Items Section -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                            <mat-icon>shopping_cart</mat-icon>\n                            Ordered Items\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4 scroll-45\">\n                        <div class=\"row g-3\">\n                            <div class=\"col-12\"\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\n                                <div class=\"h-100\">\n                                    <div class=\"card-body p-3\">\n                                        <div class=\"row align-items-start\">\n                                            <div class=\"col-auto position-relative\">\n                                                <img loading=\"lazy\"\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n                                                    class=\"rounded shadow-sm\"\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\n                                            </div>\n                                            <div class=\"col\">\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\n\n                                                <div class=\"row\">\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\n                                                        <div class=\"fw-bold\">\n                                                            <span [innerHTML]=\"currency\"></span>{{\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\n                                                            item.quantity }}\n                                                        </div>\n                                                    </div>\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\n                                                        <div class=\" p-2\">\n                                                            <div class=\"fw-bold\">\n                                                                <span [innerHTML]=\"currency\"></span>{{\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\n                                                                }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <!-- Review Section -->\n                                                <div>\n                                                    <div class=\"mb-1\">\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\n                                                            [readonly]=\"false\" />\n                                                    </div>\n\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\n                                                    </div>\n\n                                                    <div *ngIf=\"item.showReview\">\n                                                        <div class=\"mb-1\">\n                                                            <textarea class=\"form-control border-2\"\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\n                                                        </div>\n                                                        <div class=\"review-img\">\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\n                                                            <div class=\"add-review-img\"\n                                                                (click)=\"reviewFileInput.click()\"\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\n                                                            </div>\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n                                                                #reviewFileInput />\n                                                        </div>\n\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\n                                                            (click)=\"submitReview(item)\">\n                                                            Submit\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline for Mobile -->\n                <ng-container *ngIf=\"isMobile\">\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n                </ng-container>\n            </div>\n\n            <!-- Right Column -->\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n                <!-- Bill Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('billDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>receipt</mat-icon>\n                                Bill Details\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Item Total</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Discount\n                            </span>\n                            <span class=\"fw-semibold text-success h6 mb-0\">\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Total Tax</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\" *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n                            <span class=\"text-muted\">Redeem Amount</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Delivery\n                            </span>\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\n                            <span class=\"fw-bold h4 mb-0 \">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Customer Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('deliveryDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>person</mat-icon>\n                                Delivery Details\n                            </div>\n                            <mat-icon class=\"transition-transform\"\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Name</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Phone</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\n                                        }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Address</small>\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Payment</small>\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Track Order Button -->\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\n                            <button\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\n                                (click)=\"trackOrder()\">\n                                <mat-icon>location_searching</mat-icon>\n                                Track Order\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline Section for Desktop -->\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>timeline</mat-icon>\n                                Order Timeline\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n                        <p-timeline [value]=\"orderTimiline\">\n                            <ng-template pTemplate=\"content\" let-event>\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\n                                        [id]=\"data?.id\">\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                                            event.icon }}</mat-icon>\n                                    </div>\n                                    <div class=\"flex-grow-1\">\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                                            titlecase }}</h6>\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </p-timeline>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </div>\n</ng-container>\n\n<!-- Timeline Template -->\n<ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n                <mat-icon>timeline</mat-icon>\n                Order Timeline\n            </h4>\n        </div>\n        <div class=\"card-body p-4\">\n            <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                            style=\"width: 40px; height: 40px;\">\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                                event.icon }}</mat-icon>\n                        </div>\n                        <div class=\"flex-grow-1\">\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                            </h6>\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n                        </div>\n                    </div>\n                </ng-template>\n            </p-timeline>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\n    <div class=\"row\">\n        <div class=\"col-12\">\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n        </div>\n    </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i4$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: 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\n\n        <!-- Header Section -->\n        <div class=\"row\" *ngIf=\"!isMobile\">\n            <div class=\"col-12 d-flex justify-content-between align-items-center\">\n                <div class=\"d-flex flex-column\">\n                    <div class=\"d-flex align-items-center gap-3\">\n                        <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                        <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\n                    </div>\n                    <div class=\"d-flex flex-wrap gap-2 mb-2\">\n                        <span class=\"d-flex align-items-center text-muted\">\n                            <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n                            <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy' }}</small>\n                        </span>\n                        <span class=\"d-flex align-items-center text-muted\">\n                            <mat-icon\n                                class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n                            <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\n                                items</small>\n                        </span>\n                    </div>\n                </div>\n                <div [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\n                    {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\n                    <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\" *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\n                        [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\n                </div>\n            </div>\n        </div>\n\n        <!-- Mobile Header -->\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\n                <div></div>\n            </div>\n        </div>\n\n        <div class=\"row g-4\">\n            <!-- Left Column -->\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n                <!-- Timeline for Desktop -->\n\n                <!-- Items Section -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                            <mat-icon>shopping_cart</mat-icon>\n                            Ordered Items\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4 scroll-45\">\n                        <div class=\"row g-3\">\n                            <div class=\"col-12\"\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\n                                <div class=\"h-100\">\n                                    <div class=\"card-body p-3\">\n                                        <div class=\"row align-items-start\">\n                                            <div class=\"col-auto position-relative\">\n                                                <img loading=\"lazy\"\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n                                                    class=\"rounded shadow-sm\"\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\n                                            </div>\n                                            <div class=\"col\">\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\n\n                                                <div class=\"row\">\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\n                                                        <div class=\"fw-bold\">\n                                                            <span [innerHTML]=\"currency\"></span>{{\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\n                                                            item.quantity }}\n                                                        </div>\n                                                    </div>\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\n                                                        <div class=\" p-2\">\n                                                            <div class=\"fw-bold\">\n                                                                <span [innerHTML]=\"currency\"></span>{{\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\n                                                                }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <!-- Review Section -->\n                                                <div>\n                                                    <div class=\"mb-1\">\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\n                                                            [readonly]=\"false\" />\n                                                    </div>\n\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\n                                                    </div>\n\n                                                    <div *ngIf=\"item.showReview\">\n                                                        <div class=\"mb-1\">\n                                                            <textarea class=\"form-control border-2\"\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\n                                                        </div>\n                                                        <div class=\"review-img\">\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\n                                                            <div class=\"add-review-img\"\n                                                                (click)=\"reviewFileInput.click()\"\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\n                                                            </div>\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n                                                                #reviewFileInput />\n                                                        </div>\n\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\n                                                            (click)=\"submitReview(item)\">\n                                                            Submit\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline for Mobile -->\n                <ng-container *ngIf=\"isMobile\">\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n                </ng-container>\n            </div>\n\n            <!-- Right Column -->\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n                <!-- Bill Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('billDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>receipt</mat-icon>\n                                Bill Details\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Item Total</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Discount\n                            </span>\n                            <span class=\"fw-semibold text-success h6 mb-0\">\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Total Tax</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\n                            *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n                            <span class=\"text-muted\">Redeem Amount</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{\n                                orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Delivery\n                            </span>\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\n                            <span class=\"fw-bold h4 mb-0 \">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Customer Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('deliveryDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>person</mat-icon>\n                                Delivery Details\n                            </div>\n                            <mat-icon class=\"transition-transform\"\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Name</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Phone</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\n                                        }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Address</small>\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Payment</small>\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Track Order Button -->\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\n                            <button\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\n                                (click)=\"trackOrder()\">\n                                <mat-icon>location_searching</mat-icon>\n                                Track Order\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline Section for Desktop -->\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>timeline</mat-icon>\n                                Order Timeline\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n                        <p-timeline [value]=\"orderTimiline\">\n                            <ng-template pTemplate=\"content\" let-event>\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\n                                        [id]=\"data?.id\">\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                                            event.icon }}</mat-icon>\n                                    </div>\n                                    <div class=\"flex-grow-1\">\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                                            titlecase }}</h6>\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </p-timeline>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </div>\n</ng-container>\n\n<!-- Timeline Template -->\n<ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n                <mat-icon>timeline</mat-icon>\n                Order Timeline\n            </h4>\n        </div>\n        <div class=\"card-body p-4\">\n            <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                            style=\"width: 40px; height: 40px;\">\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                                event.icon }}</mat-icon>\n                        </div>\n                        <div class=\"flex-grow-1\">\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                            </h6>\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n                        </div>\n                    </div>\n                </ng-template>\n            </p-timeline>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\n    <div class=\"row\">\n        <div class=\"col-12\">\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n        </div>\n    </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
             type: Component,
@@ -18454,8 +18583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PanelModule,
                         RatingModule,
                         FormsModule,
-                        BackgroundDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\n\n        <!-- Header Section -->\n        <div class=\"row\" *ngIf=\"!isMobile\">\n            <div class=\"col-12\">\n                <div class=\"d-flex align-items-center gap-3\">\n                    <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                    <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\n                </div>\n                <div class=\"d-flex flex-wrap gap-2 mb-2\">\n                    <span class=\"d-flex align-items-center text-muted\">\n                        <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n                        <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy' }}</small>\n                    </span>\n                    <span class=\"d-flex align-items-center text-muted\">\n                        <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n                        <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\n                            items</small>\n                    </span>\n                </div>\n            </div>\n        </div>\n\n        <!-- Mobile Header -->\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\n                <div></div>\n            </div>\n        </div>\n\n        <div class=\"row g-4\">\n            <!-- Left Column -->\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n                <!-- Timeline for Desktop -->\n\n                <!-- Items Section -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                            <mat-icon>shopping_cart</mat-icon>\n                            Ordered Items\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4 scroll-45\">\n                        <div class=\"row g-3\">\n                            <div class=\"col-12\"\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\n                                <div class=\"h-100\">\n                                    <div class=\"card-body p-3\">\n                                        <div class=\"row align-items-start\">\n                                            <div class=\"col-auto position-relative\">\n                                                <img loading=\"lazy\"\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n                                                    class=\"rounded shadow-sm\"\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\n                                            </div>\n                                            <div class=\"col\">\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\n\n                                                <div class=\"row\">\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\n                                                        <div class=\"fw-bold\">\n                                                            <span [innerHTML]=\"currency\"></span>{{\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\n                                                            item.quantity }}\n                                                        </div>\n                                                    </div>\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\n                                                        <div class=\" p-2\">\n                                                            <div class=\"fw-bold\">\n                                                                <span [innerHTML]=\"currency\"></span>{{\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\n                                                                }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <!-- Review Section -->\n                                                <div>\n                                                    <div class=\"mb-1\">\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\n                                                            [readonly]=\"false\" />\n                                                    </div>\n\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\n                                                    </div>\n\n                                                    <div *ngIf=\"item.showReview\">\n                                                        <div class=\"mb-1\">\n                                                            <textarea class=\"form-control border-2\"\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\n                                                        </div>\n                                                        <div class=\"review-img\">\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\n                                                            <div class=\"add-review-img\"\n                                                                (click)=\"reviewFileInput.click()\"\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\n                                                            </div>\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n                                                                #reviewFileInput />\n                                                        </div>\n\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\n                                                            (click)=\"submitReview(item)\">\n                                                            Submit\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline for Mobile -->\n                <ng-container *ngIf=\"isMobile\">\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n                </ng-container>\n            </div>\n\n            <!-- Right Column -->\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n                <!-- Bill Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('billDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>receipt</mat-icon>\n                                Bill Details\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Item Total</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Discount\n                            </span>\n                            <span class=\"fw-semibold text-success h6 mb-0\">\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Total Tax</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\" *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n                            <span class=\"text-muted\">Redeem Amount</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Delivery\n                            </span>\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\n                            <span class=\"fw-bold h4 mb-0 \">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Customer Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('deliveryDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>person</mat-icon>\n                                Delivery Details\n                            </div>\n                            <mat-icon class=\"transition-transform\"\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Name</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Phone</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\n                                        }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Address</small>\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Payment</small>\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Track Order Button -->\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\n                            <button\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\n                                (click)=\"trackOrder()\">\n                                <mat-icon>location_searching</mat-icon>\n                                Track Order\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline Section for Desktop -->\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>timeline</mat-icon>\n                                Order Timeline\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n                        <p-timeline [value]=\"orderTimiline\">\n                            <ng-template pTemplate=\"content\" let-event>\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\n                                        [id]=\"data?.id\">\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                                            event.icon }}</mat-icon>\n                                    </div>\n                                    <div class=\"flex-grow-1\">\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                                            titlecase }}</h6>\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </p-timeline>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </div>\n</ng-container>\n\n<!-- Timeline Template -->\n<ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n                <mat-icon>timeline</mat-icon>\n                Order Timeline\n            </h4>\n        </div>\n        <div class=\"card-body p-4\">\n            <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                            style=\"width: 40px; height: 40px;\">\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                                event.icon }}</mat-icon>\n                        </div>\n                        <div class=\"flex-grow-1\">\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                            </h6>\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n                        </div>\n                    </div>\n                </ng-template>\n            </p-timeline>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\n    <div class=\"row\">\n        <div class=\"col-12\">\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n        </div>\n    </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}\n"] }]
+                        BackgroundDirective,
+                        MatTooltipModule
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\n    <div class=\"container-fluid\" [attr.style]=\"customClass\">\n\n        <!-- Header Section -->\n        <div class=\"row\" *ngIf=\"!isMobile\">\n            <div class=\"col-12 d-flex justify-content-between align-items-center\">\n                <div class=\"d-flex flex-column\">\n                    <div class=\"d-flex align-items-center gap-3\">\n                        <mat-icon (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                        <h3 class=\"fw-bold text-dark mb-0\">{{ orderDetailData?.orderNum }}</h3>\n                    </div>\n                    <div class=\"d-flex flex-wrap gap-2 mb-2\">\n                        <span class=\"d-flex align-items-center text-muted\">\n                            <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n                            <small>{{ orderDetailData?.createdTimeStamp | date: 'dd MMM yyyy' }}</small>\n                        </span>\n                        <span class=\"d-flex align-items-center text-muted\">\n                            <mat-icon\n                                class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n                            <small>{{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }}\n                                items</small>\n                        </span>\n                    </div>\n                </div>\n                <div [attr.class]=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus + ' order-status d-flex align-items-center gap-1'\">\n                    {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }}\n                    <mat-icon class=\"f-13 d-flex align-items-center justify-content-center\" *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'CANCELLED'\"\n                        [matTooltip]=\"orderDetailData?.brandOrderDetails?.[0]?.additionalInformation['CANCEL REASON ']\">info</mat-icon>\n                </div>\n            </div>\n        </div>\n\n        <!-- Mobile Header -->\n        <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n            <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n                <h2 class=\"h4 mb-0 fw-semibold\">{{ orderDetailData?.orderNum }}</h2>\n                <div></div>\n            </div>\n        </div>\n\n        <div class=\"row g-4\">\n            <!-- Left Column -->\n            <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n                <!-- Timeline for Desktop -->\n\n                <!-- Items Section -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                            <mat-icon>shopping_cart</mat-icon>\n                            Ordered Items\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4 scroll-45\">\n                        <div class=\"row g-3\">\n                            <div class=\"col-12\"\n                                *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\">\n                                <div class=\"h-100\">\n                                    <div class=\"card-body p-3\">\n                                        <div class=\"row align-items-start\">\n                                            <div class=\"col-auto position-relative\">\n                                                <img loading=\"lazy\"\n                                                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                                                    [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\n                                                    class=\"rounded shadow-sm\"\n                                                    style=\"width: 85px; height: 85px; object-fit: cover;\">\n                                            </div>\n                                            <div class=\"col\">\n                                                <h4 class=\"h6 fw-semibold text-dark\">{{ item.itemName }}</h4>\n\n                                                <div class=\"row\">\n                                                    <div class=\"col-6 text-start\" *ngIf=\"!isMobile\">\n                                                        <div class=\"fw-bold\">\n                                                            <span [innerHTML]=\"currency\"></span>{{\n                                                            (item.sellingPrice | number: '1.0-2') + ' x ' +\n                                                            item.quantity }}\n                                                        </div>\n                                                    </div>\n                                                    <div class=\"col-md-6 col-sm-12 text-end text-nowrap\">\n                                                        <div class=\" p-2\">\n                                                            <div class=\"fw-bold\">\n                                                                <span [innerHTML]=\"currency\"></span>{{\n                                                                (item.sellingPrice * item.quantity) | number: '1.0-2'\n                                                                }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                                <!-- Review Section -->\n                                                <div>\n                                                    <div class=\"mb-1\">\n                                                        <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\n                                                            [readonly]=\"false\" />\n                                                    </div>\n\n                                                    <div class=\"add-detail-review f-13 cursor-pointer\"\n                                                        (click)=\"item.showReview = !item.showReview\">Add Detailed Review\n                                                    </div>\n\n                                                    <div *ngIf=\"item.showReview\">\n                                                        <div class=\"mb-1\">\n                                                            <textarea class=\"form-control border-2\"\n                                                                [(ngModel)]=\"item.review\" rows=\"3\"></textarea>\n                                                        </div>\n                                                        <div class=\"review-img\">\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\n                                                                *ngFor=\"let img of item?.reviewImages ?? []\">\n                                                            <div class=\"add-review-img\"\n                                                                (click)=\"reviewFileInput.click()\"\n                                                                [ngClass]=\"{'w-100': (item?.reviewImages?.length ?? 0) == 0}\">\n                                                                <mat-icon>add</mat-icon> {{(item?.reviewImages?.length\n                                                                ?? 0) == 0 ? 'Add Images' : ''}}\n                                                            </div>\n                                                            <input type=\"file\" name=\"myfile\" multiple hidden\n                                                                accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\n                                                                (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\n                                                                #reviewFileInput />\n                                                        </div>\n\n                                                        <div class=\"w-100 text-end p-2 sbt-btn f-13 cursor-pointer\"\n                                                            (click)=\"submitReview(item)\">\n                                                            Submit\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline for Mobile -->\n                <ng-container *ngIf=\"isMobile\">\n                    <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n                </ng-container>\n            </div>\n\n            <!-- Right Column -->\n            <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n                <!-- Bill Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('billDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>receipt</mat-icon>\n                                Bill Details\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Item Total</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\n                            *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Discount\n                            </span>\n                            <span class=\"fw-semibold text-success h6 mb-0\">\n                                -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount |\n                                number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"text-muted\">Total Tax</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount ?\n                                orderDetailData?.billDetails?.totalTaxAfterDiscount :\n                                orderDetailData?.billDetails?.totalTax | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\"\n                            *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\n                            <span class=\"text-muted\">Redeem Amount</span>\n                            <span class=\"fw-semibold h6 mb-0\">\n                                <span [innerHTML]=\"currency\"></span>{{\n                                orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\n                            </span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                            <span class=\"d-flex align-items-center gap-2 text-muted\">\n                                Delivery\n                            </span>\n                            <span class=\"fw-bold text-success h6 mb-0\">{{orderDetailData?.billDetails.deliveryCharges ?\n                                orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\n                        </div>\n\n                        <div class=\"d-flex justify-content-between align-items-center py-3 mt-3  rounded px-3\">\n                            <span class=\"fw-bold h5 mb-0 text-dark\">Grand Total</span>\n                            <span class=\"fw-bold h4 mb-0 \">\n                                <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Customer Details -->\n                <div class=\"card border-0 shadow-sm mb-4\">\n                    <div class=\"card-header py-3 cursor-pointer\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\"\n                        (click)=\"toggleSection('deliveryDetails')\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>person</mat-icon>\n                                Delivery Details\n                            </div>\n                            <mat-icon class=\"transition-transform\"\n                                [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Name</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverName }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Phone</small>\n                                    <span class=\"fw-semibold\">{{ orderDetailData?.addressDetails?.receiverPhone\n                                        }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Address</small>\n                                    <span class=\"fw-semibold\">{{ orderAddress }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"mb-3\">\n                            <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                                <div>\n                                    <small class=\"text-muted d-block\">Payment</small>\n                                    <span class=\"fw-semibold\">{{orderDetailData?.paymentDetails ?\n                                        (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\n                                        getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Track Order Button -->\n                        <div class=\"text-center mt-4\" *ngIf=\"orderDetailData?.orderTrackingLink\">\n                            <button\n                                class=\"btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2 py-2\"\n                                (click)=\"trackOrder()\">\n                                <mat-icon>location_searching</mat-icon>\n                                Track Order\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Timeline Section for Desktop -->\n                <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\n                    <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\"\n                        [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n                        <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <mat-icon>timeline</mat-icon>\n                                Order Timeline\n                            </div>\n                            <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                                expand_less\n                            </mat-icon>\n                        </h4>\n                    </div>\n                    <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n                        <p-timeline [value]=\"orderTimiline\">\n                            <ng-template pTemplate=\"content\" let-event>\n                                <div class=\"d-flex align-items-start gap-3 py-3\">\n                                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                                        style=\"width: 40px; height: 40px;\" [simpoBackground]=\"styles?.background\"\n                                        [id]=\"data?.id\">\n                                        <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                                            event.icon }}</mat-icon>\n                                    </div>\n                                    <div class=\"flex-grow-1\">\n                                        <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                                            titlecase }}</h6>\n                                        <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </p-timeline>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </div>\n</ng-container>\n\n<!-- Timeline Template -->\n<ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n        <div class=\"card-header bg-warning text-dark py-2 f-16\">\n            <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n                <mat-icon>timeline</mat-icon>\n                Order Timeline\n            </h4>\n        </div>\n        <div class=\"card-body p-4\">\n            <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                    <div class=\"d-flex align-items-start gap-3 py-3\">\n                        <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                            style=\"width: 40px; height: 40px;\">\n                            <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                                event.icon }}</mat-icon>\n                        </div>\n                        <div class=\"flex-grow-1\">\n                            <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                            </h6>\n                            <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n                        </div>\n                    </div>\n                </ng-template>\n            </p-timeline>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Loading Skeleton -->\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\">\n    <div class=\"row\">\n        <div class=\"col-12\">\n            <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n        </div>\n    </div>\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: ImageUplaodService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -18543,7 +18673,7 @@ class UserBasicInfoComponent {
         return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i1$1.MatDialogRef }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\n    <div class=\"d-flex flex-wrap justify-content-between\">\n        <div class=\"form-control-group\">\n            <div class=\"label\">First Name</div>\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n        </div>\n        <!-- <div class=\"form-control-group-3\">\n            <div class=\"label\">Middle Name</div>\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n        </div> -->\n        <div class=\"form-control-group\">\n            <div class=\"label\">Last Name</div>\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n        </div>\n\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\n            <div class=\"label required\">Mobile</div>\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n        </div>\n        <div class=\"form-control-group\">\n            <div class=\"label\">Email</div>\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n        </div>\n        \n        <div class=\"form-control-group-full\">\n            <div class=\"label\">Select Gender</div>\n            <div class=\"d-flex align-items-center\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n            </div>\n        </div>\n    </div>\n    <div class=\"action-btn\">\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n        <button (click)=\"saveProfile()\">Save Profile</button>\n    </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\n    <div class=\"d-flex flex-wrap justify-content-between\">\n        <div class=\"form-control-group\">\n            <div class=\"label\">First Name</div>\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n        </div>\n        <!-- <div class=\"form-control-group-3\">\n            <div class=\"label\">Middle Name</div>\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n        </div> -->\n        <div class=\"form-control-group\">\n            <div class=\"label\">Last Name</div>\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n        </div>\n\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\n            <div class=\"label required\">Mobile</div>\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n        </div>\n        <div class=\"form-control-group\">\n            <div class=\"label\">Email</div>\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n        </div>\n        \n        <div class=\"form-control-group-full\">\n            <div class=\"label\">Select Gender</div>\n            <div class=\"d-flex align-items-center\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n            </div>\n        </div>\n    </div>\n    <div class=\"action-btn\">\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n        <button (click)=\"saveProfile()\">Save Profile</button>\n    </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
             type: Component,
@@ -18760,7 +18890,7 @@ class SchemeDetailsComponent {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n    <!-- Header -->\n    <div class=\"header\">\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n            </div>\n            <h1>Passbook Details</h1>\n        </div>\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n    </div>\n\n    <!-- Amount Card -->\n    <div class=\"d-flex justify-content-between amount-card-section\">\n        <div class=\"w-100\">\n            <div class=\"amount-card\">\n                <div class=\"top-dashboard\">\n                  <div class=\"amount-info\">\n                    <div class=\"coin-icon\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                    </div>\n                    <div class=\"amount-details\">\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n                    </div>\n                  </div>\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                      <div class=\"coin-icon\"><img\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                      </div>\n                      <div class=\"amount-details\">\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n                          <p>Accumulated Gold</p>\n                      </div>\n                  </div>\n                </div>\n            </div>\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n                <div class=\"details_tab\">\n                    <div class=\"section-header\">\n                        <h3>Passbook Details</h3>\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n                    </div>\n\n                    <div class=\"scheme-info\">\n                        <div class=\"scheme-name\">\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</span>\n                        </div>\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n                            'N/A'}}\n                            Monthly</div>\n                    </div>\n\n                    <div class=\"dates-grid\">\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Scheme started on</span>\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Maturity Date</span>\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"completion-info\">\n                            <span class=\"completion-label\">Completed EMIs</span>\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n                                0}} out\n                                of {{schemeDetails?.schemePayments?.length}}</span>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div class=\"enrollment-card\">\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Name</span>\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n                            schemeDetails?.schemeName :'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Code</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Maturity Date</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\n                    </div>\n                 <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Enrollment Id</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n        <!-- <div class=\"quick-actions\">\n            <h3>Quick Actions</h3>\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n                </div>\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n            </div>\n\n            <button class=\"enroll-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n                New Scheme</button>\n        </div> -->\n    </div>\n\n    <!-- Scheme Details Section -->\n    <div class=\"scheme-details\">\n        <div class=\"section d-flex-flex-column gap-2\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Installments</h2>\n            </div>\n            <div class=\"payment-list d-flex flex-column gap-2\">\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n                        <div class=\"payment-item\">\n                            <div class=\"payment-info\">\n                                <div class=\"payment-icon upcoming\"><img\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n                                </div>\n                                <div class=\"payment-details\">\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n                                        'N/A'}}</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n                                    <!-- |\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n                                </div>\n                            </div>\n                            <div class=\"payment-amount\">\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n                                    payment.dueAmount :\n                                    'N/A'}}</div>\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\n                                    Paid\n                                </div>\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #showCharges>\n                    <div class=\"payment-dialog\">\n                        <div class=\"dialog-header\">\n                            <h2>Payment Details</h2>\n                            <button class=\"close-btn\" mat-icon-button>\n                                <mat-icon>close</mat-icon>\n                            </button>\n                        </div>\n\n                        <div class=\"payment-content\">\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Installment Amount:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Convenience Fee:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Payment Service Charges:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Gold Allocate:</span>\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n                            </div>\n\n                            <div class=\"payment-row total-row\">\n                                <span class=\"label total-label\">Total Amount:</span>\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"dialog-actions\">\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #showSlab>\n                    <div class=\"main_section\">\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\n                            Confirm Redeem Request\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n                        </div>\n                        <div class=\"main_body\">\n                            <div class=\"container\">\n                                <div class=\"card\">\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</div>\n                                    <div class=\"info-row\">\n                                        <span>Plan started on</span>\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Monthly Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Enrollment Fee</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Gold Deducted</span>\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold after Deduction</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Redeem Amount</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n                                    </div>\n                                </div>\n\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\n                                    <div class=\"info-row\">\n                                        <span>Installments Paid:</span>\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n                                            (schemeDetails?.schemePayments?.length -\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Slab:</span>\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n                                            :\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n                                            months</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Percentage:</span>\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Amount:</span>\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n                                    </div>\n                                </div>\n\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n                                    <mat-spinner></mat-spinner>\n                                    Requesting..\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noPayments>\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n                        <span>No Upcoming Payments</span>\n                    </div>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"tabs\">\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n        </div>\n        <div class=\"transactions\">\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n                    <div class=\"transaction-status paid\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n                    </div>\n                    <div class=\"transaction-details\">\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n                        </h4>\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n                            'N/A'}}\n                        </p>\n                    </div>\n                    <div class=\"transaction-amount\">\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n    <!-- Header -->\n    <div class=\"header\">\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n            </div>\n            <h1>Passbook Details</h1>\n        </div>\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n    </div>\n\n    <!-- Amount Card -->\n    <div class=\"d-flex justify-content-between amount-card-section\">\n        <div class=\"w-100\">\n            <div class=\"amount-card\">\n                <div class=\"top-dashboard\">\n                  <div class=\"amount-info\">\n                    <div class=\"coin-icon\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                    </div>\n                    <div class=\"amount-details\">\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n                    </div>\n                  </div>\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                      <div class=\"coin-icon\"><img\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                      </div>\n                      <div class=\"amount-details\">\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n                          <p>Accumulated Gold</p>\n                      </div>\n                  </div>\n                </div>\n            </div>\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n                <div class=\"details_tab\">\n                    <div class=\"section-header\">\n                        <h3>Passbook Details</h3>\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n                    </div>\n\n                    <div class=\"scheme-info\">\n                        <div class=\"scheme-name\">\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</span>\n                        </div>\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n                            'N/A'}}\n                            Monthly</div>\n                    </div>\n\n                    <div class=\"dates-grid\">\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Scheme started on</span>\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Maturity Date</span>\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"completion-info\">\n                            <span class=\"completion-label\">Completed EMIs</span>\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n                                0}} out\n                                of {{schemeDetails?.schemePayments?.length}}</span>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div class=\"enrollment-card\">\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Name</span>\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n                            schemeDetails?.schemeName :'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Code</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Maturity Date</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\n                    </div>\n                 <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Enrollment Id</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n        <!-- <div class=\"quick-actions\">\n            <h3>Quick Actions</h3>\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n                </div>\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n            </div>\n\n            <button class=\"enroll-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n                New Scheme</button>\n        </div> -->\n    </div>\n\n    <!-- Scheme Details Section -->\n    <div class=\"scheme-details\">\n        <div class=\"section d-flex-flex-column gap-2\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Installments</h2>\n            </div>\n            <div class=\"payment-list d-flex flex-column gap-2\">\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n                        <div class=\"payment-item\">\n                            <div class=\"payment-info\">\n                                <div class=\"payment-icon upcoming\"><img\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n                                </div>\n                                <div class=\"payment-details\">\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n                                        'N/A'}}</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n                                    <!-- |\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n                                </div>\n                            </div>\n                            <div class=\"payment-amount\">\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n                                    payment.dueAmount :\n                                    'N/A'}}</div>\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\n                                    Paid\n                                </div>\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #showCharges>\n                    <div class=\"payment-dialog\">\n                        <div class=\"dialog-header\">\n                            <h2>Payment Details</h2>\n                            <button class=\"close-btn\" mat-icon-button>\n                                <mat-icon>close</mat-icon>\n                            </button>\n                        </div>\n\n                        <div class=\"payment-content\">\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Installment Amount:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Convenience Fee:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Payment Service Charges:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Gold Allocate:</span>\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n                            </div>\n\n                            <div class=\"payment-row total-row\">\n                                <span class=\"label total-label\">Total Amount:</span>\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"dialog-actions\">\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #showSlab>\n                    <div class=\"main_section\">\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\n                            Confirm Redeem Request\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n                        </div>\n                        <div class=\"main_body\">\n                            <div class=\"container\">\n                                <div class=\"card\">\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</div>\n                                    <div class=\"info-row\">\n                                        <span>Plan started on</span>\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Monthly Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Enrollment Fee</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Gold Deducted</span>\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold after Deduction</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Redeem Amount</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n                                    </div>\n                                </div>\n\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\n                                    <div class=\"info-row\">\n                                        <span>Installments Paid:</span>\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n                                            (schemeDetails?.schemePayments?.length -\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Slab:</span>\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n                                            :\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n                                            months</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Percentage:</span>\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Amount:</span>\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n                                    </div>\n                                </div>\n\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n                                    <mat-spinner></mat-spinner>\n                                    Requesting..\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noPayments>\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n                        <span>No Upcoming Payments</span>\n                    </div>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"tabs\">\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n        </div>\n        <div class=\"transactions\">\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n                    <div class=\"transaction-status paid\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n                    </div>\n                    <div class=\"transaction-details\">\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n                        </h4>\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n                            'N/A'}}\n                        </p>\n                    </div>\n                    <div class=\"transaction-amount\">\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
             type: Component,
@@ -19444,7 +19574,7 @@ class UserProfileComponent extends BaseSection {
         this.getAllSchemes();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <ng-container *ngIf=\"!isMobile\">\n        <div class=\"p-4 profile-box shadow-lg\"\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\n            [style.order]=\"styles?.swap ? '1' : '0'\">\n\n            <!-- Profile Header Section -->\n            <div class=\"d-flex align-items-center profile-header\"\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\n                    <div class=\"online-indicator\"\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\n                    </div>\n                </div>\n\n                <div class=\"profile-details flex-grow-1\">\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\n                        {{getUserDetails?.contact?.name}}</h4>\n\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\n                        </h6>\n\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\n                        </h6>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Navigation Tabs Section -->\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                    <div class=\"d-flex align-items-center tab-item\"\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\n                        <div class=\"tab-icon-wrapper\"\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\n                        </div>\n\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\n                            {{tab.value}}</div>\n\n                        <!-- Hover effect background -->\n                        <div class=\"tab-hover-bg\"\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n\n            <!-- Action Buttons Section -->\n            <div class=\"d-flex action-buttons\"\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                    Edit Profile\n                </button>\n\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\n                    Logout\n                </button>\n            </div>\n        </div>\n\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Transactions'\">\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\n                </ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"isMobile\">\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n            </div>\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"''\">\n                    <section class=\"top-sec\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\n                            style=\"width: 50px; height: 50px;\">\n                        <div class=\"d-flex flex-column align-items-center\">\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\n                                <mat-icon>stay_primary_portrait</mat-icon>\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\n                            </h6>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\n                                <span>{{getUserDetails?.contact?.email}}</span>\n                            </h6>\n                        </div>\n                    </section>\n                    <section class=\"list-sec\">\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\n                                    [style.color]=\"styles?.background?.accentColor\">\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\n                                    {{tab.value}}</div>\n                            </div>\n\n                        </ng-container>\n                    </section>\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Transactions'\">\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\n                </ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n            [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n</section>\n\n<ng-template #OrderSection>\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\n        <ng-container *ngFor=\"let tab of tabs\">\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\n                {{tab.value}}</div>\n        </ng-container>\n    </div> -->\n    <div class=\"order-list\">\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-template #showEmptyScreen>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                    <div class=\"cart-image\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n                    </div>\n                    <div class=\"cart-text \">\n                        <ng-container *ngFor=\"let text of content?.inputText\">\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n                                <simpo-text-editor [(value)]=\"text.value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #OrderDetails>\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n    <div class=\"d-flex justify-content-between mb-2\">\n        <h3 class=\"title-text\">My Address</h3>\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"address-list\">\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\n                    <div class=\"card-body p-3\">\n                        <!-- Header Section -->\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\n                                <div class=\"icon-grp d-flex\">\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"address-content mb-3\">\n                            <div class=\"address-line mb-2\">\n                                <span class=\"text-muted small d-block\">Address</span>\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\n                            </div>\n                            <div class=\"phone-info\">\n                                <span class=\"text-muted small d-block\">Phone</span>\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n\n        <ng-template #showEmptyAddress>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                    <div class=\"cart-image\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n                    </div>\n                    <div class=\"cart-text\">\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\n                        </div>\n                        <!-- </ng-container> -->\n                    </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #AccountsSection>\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\n</ng-template>\n<ng-template #LogoutSection>\n    <h3 class=\"onlyDesktop\">Logout</h3>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\n            <!-- Header Section -->\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\n                <div class=\"order-number\">\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\n                </div>\n                <div class=\"arrow-icon\">\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n                </div>\n            </div>\n            <div class=\"ordered-item row mb-2\">\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            class=\"item-img w-50\">\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\n                    </div>\n                </ng-container>\n            </div>\n            <!-- Middle Section -->\n            <div class=\"order-details\">\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\n                    </span>\n                </div>\n            </div>\n            <div class=\"d-flex justify-content-between align-items-center\">\n                <div class=\"amount-section\">\n                    <span class=\"h5 mb-0 text-success fw-bold\">\n                        <span [innerHTML]=\"currency\"></span>\n                        {{(order.billDetails.discountAmount ?\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\n                        order?.billDetails?.totalTaxAfterDiscount) :\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}\n                    </span>\n                </div>\n                <div class=\"status-section\">\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\n                    </span>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #WishlistDetails>\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n                <div class=\"address-card mb-2\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"row align-items-center\">\n                            <div class=\"col-auto\">\n                                <div class=\"product-image-wrapper\">\n                                    <img loading=\"lazy\"\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\n                                </div>\n                            </div>\n                            <div class=\"col\">\n                                <div class=\"product-details\">\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n                                        <div\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\n                                                {{item.itemName}}\n                                            </h6>\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\n                                                    title=\"Remove from wishlist\">\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\n                                                </button>\n                                            </div>\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\n                                                </button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"product-price mb-3\">\n                                        <span class=\"h5 text-success fw-bold mb-0\">\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\n                                        </span>\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\n                                            ({{item.quantity}} items)\n                                        </span>\n                                    </div>\n                                    <div class=\"action-buttons d-flex  gap-2\">\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\n                                            *ngIf=\"item.quantity\">\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\n                                                -\n                                            </button>\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\n                                                {{item.quantity}}\n                                            </span>\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n                                                (click)=\"addToFav(item, 'ADD')\"> +\n                                            </button>\n                                        </div>\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\n                                            (click)=\"addToFav(item, 'ADD')\">\n                                            + Add Quantity\n                                        </button>\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\n                                            Move to Cart\n                                        </button>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </div>\n    </div>\n    <ng-template #showEmptyWishlistScreen>\n        <section class=\"empty-cart m-auto\">\n            <div>\n                <div class=\"cart-image\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n                </div>\n                <div class=\"cart-text\">\n                    <ng-container>\n                        <div class=\"heading-medium d-flex justify-content-center\">\n                            Your Wishlist is Empty</div>\n                    </ng-container>\n                </div>\n            </div>\n        </section>\n    </ng-template>\n</ng-template>\n\n<ng-template #SchemeDetails>\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\n    <div class=\"row gap-2\">\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\n                <div class=\"card-header row gap-2\">\n                    <div class=\"card-head-left col-7\">\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\n                    </div>\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\n                    </div>\n                </div>\n                <div class=\"card-body d-flex p-0 mb-3\">\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\n                            class=\"w-40 mb-2\">\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\n                    </div>\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\n                            alt=\"\" class=\"w-40 mb-2\">\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\n                        <div class=\"card-sub-text text-center\">Rewards</div>\n                    </div>\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\n                            alt=\"\" class=\"w-40 mb-2\">\n                        <div class=\"card-text text-center fw-600\">8</div>\n                        <div class=\"card-sub-text text-center\">Due Months</div>\n                    </div>\n                </div>\n                <div class=\"card-footer row\">\n                    <div class=\"col-6 d-flex gap-2 p-0\">\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\n                            may 2025</span>\n                    </div>\n                    <div class=\"col-6 d-flex gap-2 p-0\">\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\n                            may 2026</span>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #SchemePassbook>\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\n        <div class=\"header d-flex flex-column\">\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\n                    <option value=\"\">Select Store</option>\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\n                </select></div>\n            <div class=\"scheme-overview d-flex flex-column\">\n                <div class=\"d-flex gap-2\">\n                    <div class=\"available-savings\">\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\n                            <h3>Available Savings</h3>\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\n                        </div>\n\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\n                            '0'}}</div>\n                    </div>\n                    <div class=\"active-schemes\">\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n                            <h3>Active Passbooks</h3>\n                            <div class=\"auto-pay-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                            </div>\n                        </div>\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\n                            totalSchemes.length : '0'}}</div>\n                        <div class=\"subtitle\">On Track</div>\n                    </div>\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n                            <h3>Accumulated Gold </h3>\n                            <div class=\"auto-pay-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\n                            </div>\n                        </div>\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"overAllDues?.length\">\n                    <div class=\"section d-flex-flex-column gap-2\">\n                        <div class=\"section-header\">\n                            <h2 class=\"section-title\">Due Payments</h2>\n                        </div>\n                        <div class=\"payment-list d-flex flex-column gap-2\">\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\n                                    <div class=\"payment-info\">\n                                        <div class=\"payment-icon\"><img\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\n                                        </div>\n                                        <div class=\"payment-details\">\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\n                                                'N/A'}}\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\n                                                ? payment.daysOverdue : 0}}</span> --></span>\n                                        </div>\n                                    </div>\n                                    <div class=\"payment-amount\">\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\n                                            '0'}}\n                                        </div>\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\n                                            (click)=\"payDue(payment)\">\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <ng-template #showEmptyPayment>\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n                                    <span>No Due Payments</span>\n                                </div>\n                            </ng-template>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </div>\n        </div>\n\n        <div class=\"section mt-3\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\n            </div>\n\n            <div class=\"schemes-grid\">\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\n                        <div class=\"scheme-header\">\n                            <div>\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\n                            </div>\n                            <div class=\"scheme-date\">\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\n                                    date:'dd-MM-yyyy') :\n                                    'N/A' }}</span>\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n                                'N/A' }}</span> -->\n                            </div>\n                        </div>\n\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\n                            {{\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\n                            }}\n                        </div>\n\n                        <div class=\"scheme-stats\">\n                            <div class=\"stat\">\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\n                                <div class=\"stat-label\">Deposited Amount</div>\n                            </div>\n                            <div class=\"stat\">\n                                <div class=\"stat-value\">\n                                    {{\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n                                    (scheme?.schemePayments?.length -\n                                    scheme.dueMonths) : 'N/A'\n                                    }}\n                                </div>\n                                <div class=\"stat-label\">Paid Months</div>\n                            </div>\n                            <div class=\"stat\">\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n                                    scheme?.dueMonths : 'N/A' }}</div>\n                                <div class=\"stat-label\">Due Months</div>\n                            </div>\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\n                                <div class=\"stat-label\">Accumulated Gold</div>\n                            </div>\n                        </div>\n\n                        <div class=\"scheme-footer\">\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n                                'N/A' }}</span>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-template #showActiveScheme>\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n                        <span>No Active Scheme</span>\n                    </div>\n                </ng-template>\n            </div>\n\n\n        </div>\n\n        <!-- <div class=\"auto-pay\">\n            <div class=\"auto-pay-icon mobile-icon\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\n            <div class=\"auto-pay-content\">\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\n            </div>\n            <button class=\"manage-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\n        </div> -->\n    </div>\n</ng-template>\n<ng-template #showCharges>\n    <div class=\"payment-dialog\">\n        <div class=\"dialog-header\">\n            <h2>Payment Details</h2>\n            <button class=\"close-btn\" mat-icon-button>\n                <mat-icon>close</mat-icon>\n            </button>\n        </div>\n\n        <div class=\"payment-content\">\n            <div class=\"payment-row\">\n                <span class=\"label\">Installment Amount:</span>\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n            </div>\n\n            <div class=\"payment-row\">\n                <span class=\"label\">Convenience Fee:</span>\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n            </div>\n\n            <div class=\"payment-row\">\n                <span class=\"label\">Payment Service Charges:</span>\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n            </div>\n\n            <div class=\"payment-row total-row\">\n                <span class=\"label total-label\">Total Amount:</span>\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n            </div>\n        </div>\n\n        <div class=\"dialog-actions\">\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #Scheme_Details>\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\n</ng-template>\n<ng-template #Transactions>\n    <simpo-passbook-transactions></simpo-passbook-transactions>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <ng-container *ngIf=\"!isMobile\">\n        <div class=\"p-4 profile-box shadow-lg\"\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\n            [style.order]=\"styles?.swap ? '1' : '0'\">\n\n            <!-- Profile Header Section -->\n            <div class=\"d-flex align-items-center profile-header\"\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\n                    <div class=\"online-indicator\"\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\n                    </div>\n                </div>\n\n                <div class=\"profile-details flex-grow-1\">\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\n                        {{getUserDetails?.contact?.name}}</h4>\n\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\n                        </h6>\n\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\n                            <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\n                        </h6>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Navigation Tabs Section -->\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                    <div class=\"d-flex align-items-center tab-item\"\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\n                        <div class=\"tab-icon-wrapper\"\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\n                        </div>\n\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\n                            {{tab.value}}</div>\n\n                        <!-- Hover effect background -->\n                        <div class=\"tab-hover-bg\"\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n\n            <!-- Action Buttons Section -->\n            <div class=\"d-flex action-buttons\"\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n                    Edit Profile\n                </button>\n\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\n                    Logout\n                </button>\n            </div>\n        </div>\n\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Transactions'\">\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\n                </ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"isMobile\">\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n            </div>\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n                <ng-container *ngSwitchCase=\"''\">\n                    <section class=\"top-sec\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\n                            style=\"width: 50px; height: 50px;\">\n                        <div class=\"d-flex flex-column align-items-center\">\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\n                                <mat-icon>stay_primary_portrait</mat-icon>\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\n                            </h6>\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\n                                <span>{{getUserDetails?.contact?.email}}</span>\n                            </h6>\n                        </div>\n                    </section>\n                    <section class=\"list-sec\">\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\n                                    [style.color]=\"styles?.background?.accentColor\">\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\n                                    {{tab.value}}</div>\n                            </div>\n\n                        </ng-container>\n                    </section>\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n                    </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"'Orders'\">\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Address'\">\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Account Details'\">\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Logout'\">\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Transactions'\">\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\n                </ng-container>\n            </ng-container>\n        </div>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n            [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n</section>\n\n<ng-template #OrderSection>\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\n        <ng-container *ngFor=\"let tab of tabs\">\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\n                {{tab.value}}</div>\n        </ng-container>\n    </div> -->\n    <div class=\"order-list\">\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n            </div>\n        </ng-container>\n        <ng-template #showEmptyScreen>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                    <div class=\"cart-image\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n                    </div>\n                    <div class=\"cart-text \">\n                        <ng-container *ngFor=\"let text of content?.inputText\">\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n                                <simpo-text-editor [(value)]=\"text.value\"\n                                    [editable]=\"edit || false\"></simpo-text-editor>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #OrderDetails>\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n    <div class=\"d-flex justify-content-between mb-2\">\n        <h3 class=\"title-text\">My Address</h3>\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div class=\"address-list\">\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\n                    <div class=\"card-body p-3\">\n                        <!-- Header Section -->\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\n                                <div class=\"icon-grp d-flex\">\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"address-content mb-3\">\n                            <div class=\"address-line mb-2\">\n                                <span class=\"text-muted small d-block\">Address</span>\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\n                            </div>\n                            <div class=\"phone-info\">\n                                <span class=\"text-muted small d-block\">Phone</span>\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n\n        <ng-template #showEmptyAddress>\n            <section class=\"empty-cart m-auto\">\n                <div>\n                    <div class=\"cart-image\">\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n                    </div>\n                    <div class=\"cart-text\">\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\n                        </div>\n                        <!-- </ng-container> -->\n                    </div>\n                </div>\n            </section>\n        </ng-template>\n    </div>\n</ng-template>\n<ng-template #AccountsSection>\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\n</ng-template>\n<ng-template #LogoutSection>\n    <h3 class=\"onlyDesktop\">Logout</h3>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\n            <!-- Header Section -->\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\n                <div class=\"order-number\">\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\n                </div>\n                <div class=\"arrow-icon\">\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n                </div>\n            </div>\n            <div class=\"ordered-item row mb-2\">\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                            class=\"item-img w-50\">\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\n                    </div>\n                </ng-container>\n            </div>\n            <!-- Middle Section -->\n            <div class=\"order-details\">\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\n                    </span>\n                </div>\n            </div>\n            <div class=\"d-flex justify-content-between align-items-center\">\n                <div class=\"amount-section\">\n                    <span class=\"h5 mb-0 text-success fw-bold\">\n                        <span [innerHTML]=\"currency\"></span>\n                        {{(order.billDetails.discountAmount ?\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\n                        order?.billDetails?.totalTaxAfterDiscount) :\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}\n                    </span>\n                </div>\n                <div class=\"status-section\">\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\n                    </span>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #WishlistDetails>\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n                <div class=\"address-card mb-2\">\n                    <div class=\"card-body p-4\">\n                        <div class=\"row align-items-center\">\n                            <div class=\"col-auto\">\n                                <div class=\"product-image-wrapper\">\n                                    <img loading=\"lazy\"\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\n                                </div>\n                            </div>\n                            <div class=\"col\">\n                                <div class=\"product-details\">\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n                                        <div\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\n                                                {{item.itemName}}\n                                            </h6>\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\n                                                    title=\"Remove from wishlist\">\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\n                                                </button>\n                                            </div>\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\n                                                </button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"product-price mb-3\">\n                                        <span class=\"h5 text-success fw-bold mb-0\">\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\n                                        </span>\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\n                                            ({{item.quantity}} items)\n                                        </span>\n                                    </div>\n                                    <div class=\"action-buttons d-flex  gap-2\">\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\n                                            *ngIf=\"item.quantity\">\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\n                                                -\n                                            </button>\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\n                                                {{item.quantity}}\n                                            </span>\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n                                                (click)=\"addToFav(item, 'ADD')\"> +\n                                            </button>\n                                        </div>\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\n                                            (click)=\"addToFav(item, 'ADD')\">\n                                            + Add Quantity\n                                        </button>\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\n                                            Move to Cart\n                                        </button>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </div>\n    </div>\n    <ng-template #showEmptyWishlistScreen>\n        <section class=\"empty-cart m-auto\">\n            <div>\n                <div class=\"cart-image\">\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n                </div>\n                <div class=\"cart-text\">\n                    <ng-container>\n                        <div class=\"heading-medium d-flex justify-content-center\">\n                            Your Wishlist is Empty</div>\n                    </ng-container>\n                </div>\n            </div>\n        </section>\n    </ng-template>\n</ng-template>\n\n<ng-template #SchemeDetails>\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\n    <div class=\"row gap-2\">\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\n                <div class=\"card-header row gap-2\">\n                    <div class=\"card-head-left col-7\">\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\n                    </div>\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\n                    </div>\n                </div>\n                <div class=\"card-body d-flex p-0 mb-3\">\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\n                            class=\"w-40 mb-2\">\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\n                    </div>\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\n                            alt=\"\" class=\"w-40 mb-2\">\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\n                        <div class=\"card-sub-text text-center\">Rewards</div>\n                    </div>\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\n                            alt=\"\" class=\"w-40 mb-2\">\n                        <div class=\"card-text text-center fw-600\">8</div>\n                        <div class=\"card-sub-text text-center\">Due Months</div>\n                    </div>\n                </div>\n                <div class=\"card-footer row\">\n                    <div class=\"col-6 d-flex gap-2 p-0\">\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\n                            may 2025</span>\n                    </div>\n                    <div class=\"col-6 d-flex gap-2 p-0\">\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\n                            may 2026</span>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</ng-template>\n<ng-template #SchemePassbook>\n    <div class=\"w-100 h-100 overflow-scroll passbook_container\">\n        <div class=\"header d-flex flex-column\">\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\n                    <option value=\"\">Select Store</option>\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\n                </select></div>\n            <div class=\"scheme-overview d-flex flex-column\">\n                <div class=\"d-flex gap-2\">\n                    <div class=\"available-savings\">\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\n                            <h3>Available Savings</h3>\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\n                        </div>\n\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\n                            '0'}}</div>\n                    </div>\n                    <div class=\"active-schemes\">\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n                            <h3>Active Passbooks</h3>\n                            <div class=\"auto-pay-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                            </div>\n                        </div>\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\n                            totalSchemes.length : '0'}}</div>\n                        <div class=\"subtitle\">On Track</div>\n                    </div>\n                    <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n                            <h3>Accumulated Gold </h3>\n                            <div class=\"auto-pay-icon\"><img\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\n                            </div>\n                        </div>\n                        <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"overAllDues?.length\">\n                    <div class=\"section d-flex-flex-column gap-2\">\n                        <div class=\"section-header\">\n                            <h2 class=\"section-title\">Due Payments</h2>\n                        </div>\n                        <div class=\"payment-list d-flex flex-column gap-2\">\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\n                                    <div class=\"payment-info\">\n                                        <div class=\"payment-icon\"><img\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\n                                        </div>\n                                        <div class=\"payment-details\">\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\n                                                'N/A'}}\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\n                                                ? payment.daysOverdue : 0}}</span> --></span>\n                                        </div>\n                                    </div>\n                                    <div class=\"payment-amount\">\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\n                                            '0'}}\n                                        </div>\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\n                                            (click)=\"payDue(payment)\">\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <ng-template #showEmptyPayment>\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n                                    <span>No Due Payments</span>\n                                </div>\n                            </ng-template>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </div>\n        </div>\n\n        <div class=\"section mt-3\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\n            </div>\n\n            <div class=\"schemes-grid\">\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\n                        <div class=\"scheme-header\">\n                            <div>\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\n                            </div>\n                            <div class=\"scheme-date\">\n                                <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\n                                    date:'dd-MM-yyyy') :\n                                    'N/A' }}</span>\n                                <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n                                'N/A' }}</span> -->\n                            </div>\n                        </div>\n\n                        <div class=\"scheme-status d-flex justify-content-center align-items-center\"\n                            [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\n                            {{\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\n                            }}\n                        </div>\n\n                        <div class=\"scheme-stats\">\n                            <div class=\"stat\">\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\n                                <div class=\"stat-label\">Deposited Amount</div>\n                            </div>\n                            <div class=\"stat\">\n                                <div class=\"stat-value\">\n                                    {{\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n                                    (scheme?.schemePayments?.length -\n                                    scheme.dueMonths) : 'N/A'\n                                    }}\n                                </div>\n                                <div class=\"stat-label\">Paid Months</div>\n                            </div>\n                            <div class=\"stat\">\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n                                    scheme?.dueMonths : 'N/A' }}</div>\n                                <div class=\"stat-label\">Due Months</div>\n                            </div>\n                            <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\n                                <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\n                                <div class=\"stat-label\">Accumulated Gold</div>\n                            </div>\n                        </div>\n\n                        <div class=\"scheme-footer\">\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n                                'N/A' }}</span>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-template #showActiveScheme>\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n                        <span>No Active Scheme</span>\n                    </div>\n                </ng-template>\n            </div>\n\n\n        </div>\n\n        <!-- <div class=\"auto-pay\">\n            <div class=\"auto-pay-icon mobile-icon\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\n            <div class=\"auto-pay-content\">\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\n            </div>\n            <button class=\"manage-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\n        </div> -->\n    </div>\n</ng-template>\n<ng-template #showCharges>\n    <div class=\"payment-dialog\">\n        <div class=\"dialog-header\">\n            <h2>Payment Details</h2>\n            <button class=\"close-btn\" mat-icon-button>\n                <mat-icon>close</mat-icon>\n            </button>\n        </div>\n\n        <div class=\"payment-content\">\n            <div class=\"payment-row\">\n                <span class=\"label\">Installment Amount:</span>\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n            </div>\n\n            <div class=\"payment-row\">\n                <span class=\"label\">Convenience Fee:</span>\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n            </div>\n\n            <div class=\"payment-row\">\n                <span class=\"label\">Payment Service Charges:</span>\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n            </div>\n\n            <div class=\"payment-row total-row\">\n                <span class=\"label total-label\">Total Amount:</span>\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n            </div>\n        </div>\n\n        <div class=\"dialog-actions\">\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #Scheme_Details>\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\n</ng-template>\n<ng-template #Transactions>\n    <simpo-passbook-transactions></simpo-passbook-transactions>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -19838,7 +19968,7 @@ class AuthenticateUserComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$2.Router }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i6$1.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 14px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    {{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n                    \n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n                    \n                </div>\n                <div class=\"mobile_email\">\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n                </div>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n                \n                <form [formGroup]=\"passwordValidation\">\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                            \n                </div>\n                \n\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n                    \n                    <div class=\"field\">\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                    </div>\n                </div> -->\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n                    WhatsApp</p>\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n                    Email</p> -->\n\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <span>OTP Sent</span>\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    \n                </div>\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" \n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <!-- <span>Email Sent</span> -->\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                </form>\n                \n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number {{ countryCode }}{{ mobile\n                    }} and E-mail</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n\n            \n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                \n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <div>\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n                </div>\n                <div class=\"pass-signin\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n                            \n                        </div>\n                    </div>\n                    \n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n                    \n                        </div>\n                    </div>\n                    <form [formGroup]=\"passwordValidation\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    </form>\n                    <div class=\"password\">\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    \n                    <div class=\"password-1\">\n                        <div>\n                            Already have an account?\n                        </div>\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n                    </div>\n                </div>\n                <div class=\"signin\" (click)=\"createPassword()\">\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n                </div>\n                \n            </section>  \n        </ng-container> \n    </div>\n    \n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </div>\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n        <mat-icon>keyboard_backspace</mat-icon>\n    </div>\n    \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 14px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    {{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n                    \n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n                    \n                </div>\n                <div class=\"mobile_email\">\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n                </div>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n                \n                <form [formGroup]=\"passwordValidation\">\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                            \n                </div>\n                \n\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n                    \n                    <div class=\"field\">\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                    </div>\n                </div> -->\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n                    WhatsApp</p>\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n                    Email</p> -->\n\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <span>OTP Sent</span>\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    \n                </div>\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" \n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <!-- <span>Email Sent</span> -->\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                </form>\n                \n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number {{ countryCode }}{{ mobile\n                    }} and E-mail</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n\n            \n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                \n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <div>\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n                </div>\n                <div class=\"pass-signin\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n                            \n                        </div>\n                    </div>\n                    \n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n                    \n                        </div>\n                    </div>\n                    <form [formGroup]=\"passwordValidation\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    </form>\n                    <div class=\"password\">\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    \n                    <div class=\"password-1\">\n                        <div>\n                            Already have an account?\n                        </div>\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n                    </div>\n                </div>\n                <div class=\"signin\" (click)=\"createPassword()\">\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n                </div>\n                \n            </section>  \n        </ng-container> \n    </div>\n    \n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </div>\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n        <mat-icon>keyboard_backspace</mat-icon>\n    </div>\n    \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type:
                 // FormGroup,
                 // FormBuilder,
                 // Validators,
@@ -20742,6 +20872,8 @@ class StoreListComponent extends BaseSection {
         this.router.navigate(['/store'], { queryParams: { storeId: storeId } });
     }
     getTime(storeHours, type) {
+        if (!storeHours || storeHours?.length == 0)
+            return;
         const today = new Date();
         const dayName = today.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
         for (let ele of storeHours) {
@@ -21519,7 +21651,7 @@ class ReturnsCalculatorComponent extends BaseSection {
         this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: this.enrolledScheme?.id, termsAndCondition: true } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoLayout]=\"stylesLayout\">\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n        </div>\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\n                <div class=\"calculator-header text-center mb-4  w-100\">\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\n                </div>\n                <div class=\"sub-header mb-3 p-3\">\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\n                </div>\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\n                            (click)=\"onSchemeChange(scheme)\">\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\n                            <div class=\"form-check-label ms-2\">\n                                <div class=\"d-flex align-items-center mb-2\">\n                                    \uD83D\uDC64\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\n                                        'N/A'}}</div>\n                                </div>\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"gold-purity\"\n                    *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n                    <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\n                            alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\n                            alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\n                            alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\n                        <div>\n                            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n                            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n                    <p class=\"enrolled-gram\"\n                        *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n                        {{purchasedGram}} gms</p>\n                </div>\n\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\n                    <div class=\"slider-container position-relative\">\n                        <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\n                            (ngModelChange)=\"onAmountChange()\">\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\n                        </div>\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n                    </div>\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\n                            (click)=\"setMonthlyAmount(option)\">\n                            {{option}}\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"calculator-bottom px-3 mb-5\">\n                    <div class=\"scheme-results\">\n                        <!-- <div class=\"d-flex align-items-center mb-3\">\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\n                        </div> -->\n\n                        <div class=\"row mb-3\">\n                            <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\n                                <div class=\"result-card text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\n                                        number}}</div>\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n                                <div class=\"result-card text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\n                                </div>\n                            </div>\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\"\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n                                        maturityCount)+benefitAmount) | number}}</div>\n                                    <div class=\"result-amount fw-bold fs-5\"\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n                                        maturityCount)) | number}}</div>\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\n                                </div>\n                            </div>\n                            <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\n                                <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\n                                    <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\n                                    <div class=\"result-label  small color-white\">Gold Allocation Today\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n                                        Store : </span></div>\n                                <div class=\"store-selector\">\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n                                        (ngModelChange)=\"getMetalPrice()\">\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n                                            {{store.name}} - {{store.storeRefId}}\n                                        </option>\n                                    </select>\n                                </div>\n                            </div>\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n                                        Staff Member : </span></div>\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n                                    <option value=\"\" disabled>Choose a staff member...</option>\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n                                    </option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\n                            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\n                                (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\n                        </div>\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\n                            (click)=\"enrollScheme(enrolledScheme)\"\n                            [style.borderColor]=\"styles?.background?.accentColor\">\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\n                            <ng-container *ngIf=\"enrollButtonLoader\">\n                                <div class=\"d-flex align-items-center justify-content-center\">\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n                                    Loading...\n                                </div>\n                            </ng-container>\n                        </button>\n                    </div>\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n                        <div class=\"d-flex align-items-center mb-3\">\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n                        </div>\n\n                        <div class=\"row mb-3\">\n                            <div class=\"col-6\">\n                                <div class=\"result-card text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n                                </div>\n                            </div>\n                            <div class=\"col-6\">\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n                            Enroll in Scheme\n                        </button>\n                    </div> -->\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-template #showCharges>\n        <div class=\"payment-dialog\">\n            <div class=\"dialog-header\">\n                <h2>Payment Details</h2>\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n\n            <div class=\"payment-content\">\n                <div class=\"payment-row\">\n                    <span class=\"label\">Installment Amount:</span>\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                </div>\n\n                <div class=\"payment-row\">\n                    <span class=\"label\">Convenience Fee:</span>\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                </div>\n\n                <div class=\"payment-row\">\n                    <span class=\"label\">Payment Service Charges:</span>\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                </div>\n\n                <div class=\"payment-row total-row\">\n                    <span class=\"label total-label\">Total Amount:</span>\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                </div>\n            </div>\n\n            <div class=\"dialog-actions\">\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n            </div>\n        </div>\n    </ng-template>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoLayout]=\"stylesLayout\">\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n            </ng-container>\n        </div>\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\n                <div class=\"calculator-header text-center mb-4  w-100\">\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\n                </div>\n                <div class=\"sub-header mb-3 p-3\">\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\n                </div>\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\n                            (click)=\"onSchemeChange(scheme)\">\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\n                            <div class=\"form-check-label ms-2\">\n                                <div class=\"d-flex align-items-center mb-2\">\n                                    \uD83D\uDC64\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\n                                        'N/A'}}</div>\n                                </div>\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n                <div class=\"gold-purity\"\n                    *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n                    <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\n                            alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\n                            alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\n                        <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\n                            alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\n                        <div>\n                            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n                            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n                    <p class=\"enrolled-gram\"\n                        *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n                        {{purchasedGram}} gms</p>\n                </div>\n\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\n                    <div class=\"slider-container position-relative\">\n                        <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\n                            (ngModelChange)=\"onAmountChange()\">\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\n                        </div>\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n                    </div>\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\n                            (click)=\"setMonthlyAmount(option)\">\n                            {{option}}\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"calculator-bottom px-3 mb-5\">\n                    <div class=\"scheme-results\">\n                        <!-- <div class=\"d-flex align-items-center mb-3\">\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\n                        </div> -->\n\n                        <div class=\"row mb-3\">\n                            <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\n                                <div class=\"result-card text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\n                                        number}}</div>\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n                                <div class=\"result-card text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\n                                </div>\n                            </div>\n                            <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\"\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n                                        maturityCount)+benefitAmount) | number}}</div>\n                                    <div class=\"result-amount fw-bold fs-5\"\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n                                        maturityCount)) | number}}</div>\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\n                                </div>\n                            </div>\n                            <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\n                                <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\n                                    <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\n                                    <div class=\"result-label  small color-white\">Gold Allocation Today\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n                                        Store : </span></div>\n                                <div class=\"store-selector\">\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n                                        (ngModelChange)=\"getMetalPrice()\">\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n                                            {{store.name}} - {{store.storeRefId}}\n                                        </option>\n                                    </select>\n                                </div>\n                            </div>\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n                                        Staff Member : </span></div>\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n                                    <option value=\"\" disabled>Choose a staff member...</option>\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n                                    </option>\n                                </select>\n                            </div>\n                        </div>\n\n                        <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\n                            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\n                                (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\n                        </div>\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\n                            (click)=\"enrollScheme(enrolledScheme)\"\n                            [style.borderColor]=\"styles?.background?.accentColor\">\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\n                            <ng-container *ngIf=\"enrollButtonLoader\">\n                                <div class=\"d-flex align-items-center justify-content-center\">\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n                                    Loading...\n                                </div>\n                            </ng-container>\n                        </button>\n                    </div>\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n                        <div class=\"d-flex align-items-center mb-3\">\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n                        </div>\n\n                        <div class=\"row mb-3\">\n                            <div class=\"col-6\">\n                                <div class=\"result-card text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n                                </div>\n                            </div>\n                            <div class=\"col-6\">\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n                            Enroll in Scheme\n                        </button>\n                    </div> -->\n                </div>\n            </div>\n        </div>\n    </div>\n    <ng-template #showCharges>\n        <div class=\"payment-dialog\">\n            <div class=\"dialog-header\">\n                <h2>Payment Details</h2>\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </div>\n\n            <div class=\"payment-content\">\n                <div class=\"payment-row\">\n                    <span class=\"label\">Installment Amount:</span>\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                </div>\n\n                <div class=\"payment-row\">\n                    <span class=\"label\">Convenience Fee:</span>\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                </div>\n\n                <div class=\"payment-row\">\n                    <span class=\"label\">Payment Service Charges:</span>\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                </div>\n\n                <div class=\"payment-row total-row\">\n                    <span class=\"label total-label\">Total Amount:</span>\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                </div>\n            </div>\n\n            <div class=\"dialog-actions\">\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n            </div>\n        </div>\n    </ng-template>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
             type: Component,
@@ -21703,7 +21835,7 @@ class BookAppointmentComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div class=\"container\">\n    <div class=\"content-grid\">\n      <!-- Left Form Section -->\n      <div class=\"form-section\">\n        <!-- Service Description -->\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n          <h2 class=\"section-title\">Try at Home Service</h2>\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\n        </div>\n\n        <!-- Pincode Section -->\n        <!-- <div class=\"card\">\n          <h3 class=\"section-title\">\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\n            </svg>\n            Service Location\n          </h3>\n          <div class=\"form-group\">\n            <label class=\"form-label\">Enter your pincode</label>\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\n              maxlength=\"6\" />\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\n              \u2713 Service available in your area\n            </div>\n          </div>\n        </div> -->\n\n        <!-- Date Selection -->\n        <div class=\"card\">\n          <h3 class=\"section-title\">Select a Date</h3>\n          <div class=\"date-grid\">\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\n              <div class=\"time\">\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\n                <div class=\"date\">{{day.date}}</div>\n              </div>\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\n                Designs</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Time Selection -->\n        <div class=\"card\" *ngIf=\"customerDetails.date\">\n          <div class=\"section\">\n            <h2 class=\"section-title\">Select a Time</h2>\n            <div class=\"time-grid\">\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots ?? []\" (click)=\"selectTime(time)\"\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\n                <div class=\"more-slot-badge\">More Slot Left</div>\n                <div class=\"time-text\">{{time}}</div>\n              </div>\n              <div *ngIf=\"timeSlots?.length == 0\">No slots available</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Customer Details -->\n        <div class=\"card\">\n          <h3 class=\"section-title\">Contact Details</h3>\n          <div class=\"form-row\">\n            <div class=\"form-group\">\n              <label class=\"form-label\">Full Name *</label>\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\n                placeholder=\"Enter your full name\" />\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">Phone Number *</label>\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\n                placeholder=\"Enter your phone number\" />\n            </div>\n          </div>\n          <div class=\"form-row\">\n            <div class=\"form-group\">\n              <label class=\"form-label\">Email *</label>\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\n                placeholder=\"Enter your full name\" />\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">City *</label>\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\n                placeholder=\"Enter your city\" />\n            </div>\n          </div>\n          <div class=\"form-row\">\n            <div class=\"form-group\">\n              <label class=\"form-label\">State *</label>\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\n                placeholder=\"Enter your full name\" />\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">Pincode *</label>\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\n                placeholder=\"Enter your phone number\" />\n            </div>\n          </div>\n          <div class=\"form-group\">\n            <label class=\"form-label\">Complete Address *</label>\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\n              placeholder=\"Enter your complete address\"></textarea>\n          </div>\n\n        </div>\n      </div>\n\n      <!-- Sidebar -->\n      <div class=\"sidebar\">\n        <div class=\"card\">\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\n\n          <div class=\"design-parent\">\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\n              <div class=\"design-content\">\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  alt=\"\">\n                <!-- <div class=\"\">Design Image</div> -->\n\n                <div class=\"design-info\">\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\n                  <div class=\"item-price\">\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\n                      number:\n                      '1.0-2'}}</span>\n                  </div>\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\n                      item.itemVariant.properties[varient] | uppercase }}</span>\n                  </div>\n                </div>\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\n                {{ design.selected ? 'Selected' : 'Select' }}\n              </button> -->\n              </div>\n            </div>\n          </div>\n\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n            </svg>\n            Add More Designs\n          </button>\n\n          <div class=\"summary\">\n            <!-- <div class=\"summary-row\">\n              <span class=\"summary-label\">Selected Designs:</span>\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\n            </div> -->\n            <div class=\"summary-row\">\n              <span class=\"summary-label\">Service:</span>\n              <span class=\"summary-value free-service\">FREE</span>\n            </div>\n          </div>\n\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\n          </button>\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n      [isEcommerce]=\"true\"></simpo-hover-elements>\n  </div>\n</main>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$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: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div class=\"container\">\n    <div class=\"content-grid\">\n      <!-- Left Form Section -->\n      <div class=\"form-section\">\n        <!-- Service Description -->\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n          <h2 class=\"section-title\">Try at Home Service</h2>\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\n        </div>\n\n        <!-- Pincode Section -->\n        <!-- <div class=\"card\">\n          <h3 class=\"section-title\">\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\n            </svg>\n            Service Location\n          </h3>\n          <div class=\"form-group\">\n            <label class=\"form-label\">Enter your pincode</label>\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\n              maxlength=\"6\" />\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\n              \u2713 Service available in your area\n            </div>\n          </div>\n        </div> -->\n\n        <!-- Date Selection -->\n        <div class=\"card\">\n          <h3 class=\"section-title\">Select a Date</h3>\n          <div class=\"date-grid\">\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\n              <div class=\"time\">\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\n                <div class=\"date\">{{day.date}}</div>\n              </div>\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\n                Designs</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Time Selection -->\n        <div class=\"card\" *ngIf=\"customerDetails.date\">\n          <div class=\"section\">\n            <h2 class=\"section-title\">Select a Time</h2>\n            <div class=\"time-grid\">\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots ?? []\" (click)=\"selectTime(time)\"\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\n                <div class=\"more-slot-badge\">More Slot Left</div>\n                <div class=\"time-text\">{{time}}</div>\n              </div>\n              <div *ngIf=\"timeSlots?.length == 0\">No slots available</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Customer Details -->\n        <div class=\"card\">\n          <h3 class=\"section-title\">Contact Details</h3>\n          <div class=\"form-row\">\n            <div class=\"form-group\">\n              <label class=\"form-label\">Full Name *</label>\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\n                placeholder=\"Enter your full name\" />\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">Phone Number *</label>\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\n                placeholder=\"Enter your phone number\" />\n            </div>\n          </div>\n          <div class=\"form-row\">\n            <div class=\"form-group\">\n              <label class=\"form-label\">Email *</label>\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\n                placeholder=\"Enter your full name\" />\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">City *</label>\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\n                placeholder=\"Enter your city\" />\n            </div>\n          </div>\n          <div class=\"form-row\">\n            <div class=\"form-group\">\n              <label class=\"form-label\">State *</label>\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\n                placeholder=\"Enter your full name\" />\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">Pincode *</label>\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\n                placeholder=\"Enter your phone number\" />\n            </div>\n          </div>\n          <div class=\"form-group\">\n            <label class=\"form-label\">Complete Address *</label>\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\n              placeholder=\"Enter your complete address\"></textarea>\n          </div>\n\n        </div>\n      </div>\n\n      <!-- Sidebar -->\n      <div class=\"sidebar\">\n        <div class=\"card\">\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\n\n          <div class=\"design-parent\">\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\n              <div class=\"design-content\">\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  alt=\"\">\n                <!-- <div class=\"\">Design Image</div> -->\n\n                <div class=\"design-info\">\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\n                  <div class=\"item-price\">\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\n                      number:\n                      '1.0-2'}}</span>\n                  </div>\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\n                      item.itemVariant.properties[varient] | uppercase }}</span>\n                  </div>\n                </div>\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\n                {{ design.selected ? 'Selected' : 'Select' }}\n              </button> -->\n              </div>\n            </div>\n          </div>\n\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n            </svg>\n            Add More Designs\n          </button>\n\n          <div class=\"summary\">\n            <!-- <div class=\"summary-row\">\n              <span class=\"summary-label\">Selected Designs:</span>\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\n            </div> -->\n            <div class=\"summary-row\">\n              <span class=\"summary-label\">Service:</span>\n              <span class=\"summary-value free-service\">FREE</span>\n            </div>\n          </div>\n\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\n          </button>\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n      [isEcommerce]=\"true\"></simpo-hover-elements>\n  </div>\n</main>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$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: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, decorators: [{
             type: Component,