npm - simpo-component-library - Versions diffs - 3.6.125 → 3.6.127 - Mend

simpo-component-library 3.6.125 → 3.6.127

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 (20) hide show

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

@@ -29,7 +29,7 @@ import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { fromCognitoIdentityPool } from '@aws-sdk/credential-provider-cognito-identity';
 import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
 import * as i2$2 from '@angular/material/snack-bar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i2$3 from '@angular/router';
 import * as i1$1 from '@angular/platform-browser';
 import * as i7$1 from 'ngx-skeleton-loader';
@@ -47,7 +47,7 @@ import * as i8$3 from '@angular/material/bottom-sheet';
 import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
 import * as i17 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import * as i9$1 from '@angular/material/progress-spinner';
+import * as i10$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2$4 from 'ngx-cookie-service';
 import * as i4 from 'primeng/api';
@@ -6989,7 +6989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.CookieService }, { type: RestService }, { type: i2$3.Router }] });
 class AddressComponent extends BaseSection {
-    constructor(ngZone, restService, matDialog, matBottomsheet, router, storageService, _eventService, matData, matDialogRef) {
+    constructor(ngZone, restService, matDialog, matBottomsheet, router, storageService, _eventService, snackBar, matData, matDialogRef) {
         super();
         this.ngZone = ngZone;
         this.restService = restService;
@@ -6998,6 +6998,7 @@ class AddressComponent extends BaseSection {
         this.router = router;
         this.storageService = storageService;
         this._eventService = _eventService;
+        this.snackBar = snackBar;
         this.matData = matData;
         this.matDialogRef = matDialogRef;
         this.addressList = [];
@@ -7158,6 +7159,13 @@ class AddressComponent extends BaseSection {
     }
     updateAddress() {
         this.isLoading = true;
+        if (!this.validatePincode()) {
+            this.isLoading = false;
+            this.snackBar.open("Please enter a valid pincode", "Close", {
+                duration: 3000,
+            });
+            return;
+        }
         const userDetails = this.storageService.getUser();
         this.addressList = [...userDetails?.addressDetailsList];
         if (userDetails) {
@@ -7219,6 +7227,10 @@ class AddressComponent extends BaseSection {
         }
         event.preventDefault();
     }
+    validatePincode() {
+        const regex = /^[1-9][0-9]{5}$/;
+        return regex.test(this.address.zipCode);
+    }
     editSection() {
         if (window.innerWidth <= 475)
             return;
@@ -7233,8 +7245,10 @@ class AddressComponent extends BaseSection {
     get isMobile() {
         return window.innerWidth <= 475;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i2$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.Router }, { token: StorageServiceService }, { token: EventsService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i2$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", index: "index", customClass: "customClass", edit: "edit", delete: "delete", isCart: "isCart" }, outputs: { selectedAddress: "selectedAddress" }, providers: [], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div class=\"header\">\r\n        <div class=\"new-address-header\">\r\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n            <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n        </div>\r\n        <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"addNewAddress\">\r\n        <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"addressSelected(idx)\"  [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n        <div class=\"error-message\">\r\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n        </div>\r\n        <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n            !address.receiverName ||\r\n            !address.receiverPhone ||\r\n            address.receiverPhone?.length != 10 ||\r\n            !isEmailValid ||\r\n            !address.addressLine1 ||\r\n            !address.localityName ||\r\n            !address.zipCode ||\r\n            !address.cityName ||\r\n            !address.stateName ||\r\n            !address.addressType || isLoading\r\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n    </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n  <div class=\"header\">\r\n    <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n    <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n  </div>\r\n\r\n  <div class=\"form-content\">\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Contact Details</h2>\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"firstName\">Name</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"lastName\">Mobile</label>\r\n          <input type=\"number\" class=\"form-control\" placeholder=\"Enter Mobile number\" [(ngModel)]=\"address.receiverPhone\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"mobile\">Email</label>\r\n        <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Shipping Address</h2>\r\n      <div class=\"form-group\">\r\n        <label for=\"address\">Address</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\">\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"landmark\">Locality</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"city\">Landmark</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"pincode\">Pincode</label>\r\n          <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"state\">City</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"country\">State</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Address Type</h2>\r\n      <select class=\"form-control\" [(ngModel)]=\"address.addressType\">\r\n        <option value=\"\">Select address type</option>\r\n        <option value=\"HOME\">Home</option>\r\n        <option value=\"WORK\">Work</option>\r\n        <option value=\"OTHER\">Other</option>\r\n      </select>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' : 'Update'}}</button>\r\n    <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{background:linear-gradient(135deg,#9333ea,#7c3aed);transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i2$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.Router }, { token: StorageServiceService }, { token: EventsService }, { token: i2$2.MatSnackBar }, { token: MAT_DIALOG_DATA, optional: true }, { token: i2$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", index: "index", customClass: "customClass", edit: "edit", delete: "delete", isCart: "isCart" }, outputs: { selectedAddress: "selectedAddress" }, providers: [
+            MatSnackBar
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div class=\"header\">\r\n        <div class=\"new-address-header\">\r\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n            <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n        </div>\r\n        <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"addNewAddress\">\r\n        <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"addressSelected(idx)\"  [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n        <div class=\"error-message\">\r\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n        </div>\r\n        <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n            !address.receiverName ||\r\n            !address.receiverPhone ||\r\n            address.receiverPhone?.length != 10 ||\r\n            !isEmailValid ||\r\n            !address.addressLine1 ||\r\n            !address.localityName ||\r\n            !address.zipCode ||\r\n            !address.cityName ||\r\n            !address.stateName ||\r\n            !address.addressType || isLoading\r\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n    </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n  <div class=\"header\">\r\n    <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n    <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n  </div>\r\n\r\n  <div class=\"form-content\">\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Contact Details</h2>\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"firstName\">Name</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"lastName\">Mobile</label>\r\n          <input type=\"number\" class=\"form-control\" placeholder=\"Enter Mobile number\" [(ngModel)]=\"address.receiverPhone\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"mobile\">Email</label>\r\n        <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Shipping Address</h2>\r\n      <div class=\"form-group\">\r\n        <label for=\"address\">Address</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\">\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"landmark\">Locality</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"city\">Landmark</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"pincode\">Pincode</label>\r\n          <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"state\">City</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"country\">State</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Address Type</h2>\r\n      <select class=\"form-control\" [(ngModel)]=\"address.addressType\">\r\n        <option value=\"\">Select address type</option>\r\n        <option value=\"HOME\">Home</option>\r\n        <option value=\"WORK\">Work</option>\r\n        <option value=\"OTHER\">Other</option>\r\n      </select>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' : 'Update'}}</button>\r\n    <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{background:linear-gradient(135deg,#9333ea,#7c3aed);transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, decorators: [{
             type: Component,
@@ -7247,9 +7261,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         DeleteHoverElementComponent,
                         HoverElementsComponent,
-                        MatProgressSpinnerModule
-                    ], providers: [], template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div class=\"header\">\r\n        <div class=\"new-address-header\">\r\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n            <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n        </div>\r\n        <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"addNewAddress\">\r\n        <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"addressSelected(idx)\"  [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n        <div class=\"error-message\">\r\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n        </div>\r\n        <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n            !address.receiverName ||\r\n            !address.receiverPhone ||\r\n            address.receiverPhone?.length != 10 ||\r\n            !isEmailValid ||\r\n            !address.addressLine1 ||\r\n            !address.localityName ||\r\n            !address.zipCode ||\r\n            !address.cityName ||\r\n            !address.stateName ||\r\n            !address.addressType || isLoading\r\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n    </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n  <div class=\"header\">\r\n    <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n    <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n  </div>\r\n\r\n  <div class=\"form-content\">\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Contact Details</h2>\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"firstName\">Name</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"lastName\">Mobile</label>\r\n          <input type=\"number\" class=\"form-control\" placeholder=\"Enter Mobile number\" [(ngModel)]=\"address.receiverPhone\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"mobile\">Email</label>\r\n        <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Shipping Address</h2>\r\n      <div class=\"form-group\">\r\n        <label for=\"address\">Address</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\">\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"landmark\">Locality</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"city\">Landmark</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"pincode\">Pincode</label>\r\n          <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"state\">City</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"country\">State</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Address Type</h2>\r\n      <select class=\"form-control\" [(ngModel)]=\"address.addressType\">\r\n        <option value=\"\">Select address type</option>\r\n        <option value=\"HOME\">Home</option>\r\n        <option value=\"WORK\">Work</option>\r\n        <option value=\"OTHER\">Other</option>\r\n      </select>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' : 'Update'}}</button>\r\n    <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{background:linear-gradient(135deg,#9333ea,#7c3aed);transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i2$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.Router }, { type: StorageServiceService }, { type: EventsService }, { type: undefined, decorators: [{
+                        MatProgressSpinnerModule,
+                    ], providers: [
+                        MatSnackBar
+                    ], template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div class=\"header\">\r\n        <div class=\"new-address-header\">\r\n            <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n            <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n        </div>\r\n        <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"addNewAddress\">\r\n        <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"addressSelected(idx)\"  [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n        <div class=\"error-message\">\r\n            <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n            <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n        </div>\r\n        <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n            !address.receiverName ||\r\n            !address.receiverPhone ||\r\n            address.receiverPhone?.length != 10 ||\r\n            !isEmailValid ||\r\n            !address.addressLine1 ||\r\n            !address.localityName ||\r\n            !address.zipCode ||\r\n            !address.cityName ||\r\n            !address.stateName ||\r\n            !address.addressType || isLoading\r\n            \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n    </div>\r\n</section>\r\n\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div> -->\r\n\r\n<div class=\"form-container\">\r\n  <div class=\"header\">\r\n    <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n    <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n  </div>\r\n\r\n  <div class=\"form-content\">\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Contact Details</h2>\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"firstName\">Name</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"lastName\">Mobile</label>\r\n          <input type=\"number\" class=\"form-control\" placeholder=\"Enter Mobile number\" [(ngModel)]=\"address.receiverPhone\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"mobile\">Email</label>\r\n        <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Shipping Address</h2>\r\n      <div class=\"form-group\">\r\n        <label for=\"address\">Address</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\">\r\n      </div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"landmark\">Locality</label>\r\n        <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"city\">Landmark</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"pincode\">Pincode</label>\r\n          <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\">\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"form-row\">\r\n        <div class=\"form-group\">\r\n          <label for=\"state\">City</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\">\r\n        </div>\r\n        <div class=\"form-group\">\r\n          <label for=\"country\">State</label>\r\n          <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"section\">\r\n      <h2 class=\"section-title\">Address Type</h2>\r\n      <select class=\"form-control\" [(ngModel)]=\"address.addressType\">\r\n        <option value=\"\">Select address type</option>\r\n        <option value=\"HOME\">Home</option>\r\n        <option value=\"WORK\">Work</option>\r\n        <option value=\"OTHER\">Other</option>\r\n      </select>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"footer\">\r\n    <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' : 'Update'}}</button>\r\n    <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;appearance:none;cursor:pointer}.save-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;width:90%!important}.save-btn:hover{background:linear-gradient(135deg,#9333ea,#7c3aed);transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i2$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.Router }, { type: StorageServiceService }, { type: EventsService }, { type: i2$2.MatSnackBar }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -7350,7 +7366,7 @@ class AddressListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressListComponent, deps: [{ token: i2$1.MatDialog }, { token: MAT_DIALOG_DATA }, { token: i2$1.MatDialogRef }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressListComponent, isStandalone: true, selector: "simpo-address-list", ngImport: i0, template: "<div class=\"address-selection-container\">\r\n  <!-- Header -->\r\n  <div class=\"header\">\r\n    <h2 class=\"title\">Select Address</h2>\r\n    <button class=\"close-btn\" (click)=\"closeDialog()\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- Add New Address Button -->\r\n  <div class=\"content\">\r\n    <button class=\"add-new-address-btn\" (click)=\"addOrEditAddress(-1)\">\r\n      ADD NEW ADDRESS\r\n    </button>\r\n\r\n    <!-- Currently Selected Section -->\r\n    <div class=\"currently-selected-section\">\r\n      <h3 class=\"section-title\">Currently Selected</h3>\r\n\r\n      <div class=\"address-card selected\">\r\n        <div class=\"address-header\">\r\n          <span class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</span>\r\n          <!-- <div class=\"radio-button checked\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div> -->\r\n        </div>\r\n\r\n        <p class=\"address-text\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n          {{defaultAddress?.stateName}}</p>\r\n\r\n        <p class=\"mobile-text\">\r\n          <strong>Mobile: {{defaultAddress?.receiverPhone}}</strong>\r\n        </p>\r\n\r\n        <div class=\"address-actions\">\r\n          <button class=\"action-btn delete-btn\" (click)=\"deleteAddress(defaultAddressIndex)\"\r\n            *ngIf=\"(this.addressList?.length || 0) > 1 && !deleteLoading\">\r\n            DELETE\r\n          </button>\r\n          <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n            <mat-spinner></mat-spinner> Loading\r\n          </button>\r\n          <button class=\"action-btn edit-btn\"\r\n            (click)=\"addOrEditAddress(defaultAddressIndex != -1 ? defaultAddressIndex : 0, defaultAddress)\">\r\n            EDIT\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"(addressList?.length || 0) > 1\">\r\n        <h3 class=\"section-title\">Others Address</h3>\r\n        <div>\r\n          <ng-container *ngFor=\"let address of addressList;let i = index\">\r\n            <div class=\"other-address-card\" (click)=\"selectedAddressIndex = i\"\r\n              [ngClass]=\"{'selected-address': selectedAddressIndex === i}\" *ngIf=\"!address.default\">\r\n              <div class=\"address-header\">\r\n                <span class=\"address-name\">{{address?.receiverName}} ({{address?.addressType}})</span>\r\n                <!-- <div class=\"radio-button checked\">\r\n                  <div class=\"radio-inner\"></div>\r\n                </div> -->\r\n              </div>\r\n\r\n              <p class=\"address-text\">{{address?.addressLine1}}, {{address?.cityName}},\r\n                {{defaultAddress?.stateName}}</p>\r\n\r\n              <p class=\"mobile-text\">\r\n                <strong>Mobile: {{address.receiverPhone}}</strong>\r\n              </p>\r\n\r\n              <div class=\"address-actions\">\r\n                <button class=\"action-btn delete-btn other-address-btn\" (click)=\"deleteAddress(i)\" *ngIf=\"!deleteLoading\">\r\n                  DELETE\r\n                </button>\r\n                <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n                  <mat-spinner></mat-spinner> Loading\r\n                </button>\r\n                <button class=\"action-btn edit-btn other-address-btn\" (click)=\"addOrEditAddress(i, address)\">\r\n                  EDIT\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Confirm Button -->\r\n  <div class=\"footer\">\r\n    <button class=\"confirm-btn\" *ngIf=\"!isLoading\" (click)=\"markAddressAsDefault()\">\r\n      CONFIRM\r\n    </button>\r\n    <button class=\"confirm-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.address-selection-container{background:#fff;border-radius:12px;width:100%;max-width:500px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.title{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.close-btn:hover{color:#333}.add-new-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;width:100%}.add-new-address-btn:hover{border-color:#fbf9ff;background-color:#faf7ff}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.address-card{border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.other-address-card{border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.address-card.selected,.selected-address{border-color:#000}.address-card:hover{border-color:#fbf9ff}.address-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.address-name{font-size:16px;font-weight:600;color:#000}.radio-button{width:20px;height:20px;border:2px solid #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all .2s}.radio-button.checked{border-color:#000;background-color:#000}.radio-inner{width:8px;height:8px;background-color:#fff;border-radius:50%}.address-text{color:#000;font-size:14px;line-height:1.4;margin-bottom:8px}.mobile-text{color:#000;font-size:14px;margin-bottom:16px}.address-actions{display:flex;gap:24px}.action-btn{background:none;border:none;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;transition:opacity .2s}.delete-btn,.edit-btn{box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;color:#000;font-size:14px!important;border-radius:5px}.action-btn:hover{opacity:.7}.confirm-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;width:90%!important}.confirm-btn:hover{background:#fbf9ff}@media (max-width: 480px){.title{font-size:18px}}.other-address-btn{background-color:#fff!important}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressListComponent, isStandalone: true, selector: "simpo-address-list", ngImport: i0, template: "<div class=\"address-selection-container\">\r\n  <!-- Header -->\r\n  <div class=\"header\">\r\n    <h2 class=\"title\">Select Address</h2>\r\n    <button class=\"close-btn\" (click)=\"closeDialog()\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- Add New Address Button -->\r\n  <div class=\"content\">\r\n    <button class=\"add-new-address-btn\" (click)=\"addOrEditAddress(-1)\">\r\n      ADD NEW ADDRESS\r\n    </button>\r\n\r\n    <!-- Currently Selected Section -->\r\n    <div class=\"currently-selected-section\">\r\n      <h3 class=\"section-title\">Currently Selected</h3>\r\n\r\n      <div class=\"address-card selected\">\r\n        <div class=\"address-header\">\r\n          <span class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</span>\r\n          <!-- <div class=\"radio-button checked\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div> -->\r\n        </div>\r\n\r\n        <p class=\"address-text\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n          {{defaultAddress?.stateName}}</p>\r\n\r\n        <p class=\"mobile-text\">\r\n          <strong>Mobile: {{defaultAddress?.receiverPhone}}</strong>\r\n        </p>\r\n\r\n        <div class=\"address-actions\">\r\n          <button class=\"action-btn delete-btn\" (click)=\"deleteAddress(defaultAddressIndex)\"\r\n            *ngIf=\"(this.addressList?.length || 0) > 1 && !deleteLoading\">\r\n            DELETE\r\n          </button>\r\n          <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n            <mat-spinner></mat-spinner> Loading\r\n          </button>\r\n          <button class=\"action-btn edit-btn\"\r\n            (click)=\"addOrEditAddress(defaultAddressIndex != -1 ? defaultAddressIndex : 0, defaultAddress)\">\r\n            EDIT\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"(addressList?.length || 0) > 1\">\r\n        <h3 class=\"section-title\">Others Address</h3>\r\n        <div>\r\n          <ng-container *ngFor=\"let address of addressList;let i = index\">\r\n            <div class=\"other-address-card\" (click)=\"selectedAddressIndex = i\"\r\n              [ngClass]=\"{'selected-address': selectedAddressIndex === i}\" *ngIf=\"!address.default\">\r\n              <div class=\"address-header\">\r\n                <span class=\"address-name\">{{address?.receiverName}} ({{address?.addressType}})</span>\r\n                <!-- <div class=\"radio-button checked\">\r\n                  <div class=\"radio-inner\"></div>\r\n                </div> -->\r\n              </div>\r\n\r\n              <p class=\"address-text\">{{address?.addressLine1}}, {{address?.cityName}},\r\n                {{defaultAddress?.stateName}}</p>\r\n\r\n              <p class=\"mobile-text\">\r\n                <strong>Mobile: {{address.receiverPhone}}</strong>\r\n              </p>\r\n\r\n              <div class=\"address-actions\">\r\n                <button class=\"action-btn delete-btn other-address-btn\" (click)=\"deleteAddress(i)\" *ngIf=\"!deleteLoading\">\r\n                  DELETE\r\n                </button>\r\n                <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n                  <mat-spinner></mat-spinner> Loading\r\n                </button>\r\n                <button class=\"action-btn edit-btn other-address-btn\" (click)=\"addOrEditAddress(i, address)\">\r\n                  EDIT\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Confirm Button -->\r\n  <div class=\"footer\">\r\n    <button class=\"confirm-btn\" *ngIf=\"!isLoading\" (click)=\"markAddressAsDefault()\">\r\n      CONFIRM\r\n    </button>\r\n    <button class=\"confirm-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.address-selection-container{background:#fff;border-radius:12px;width:100%;max-width:500px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.title{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.close-btn:hover{color:#333}.add-new-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;width:100%}.add-new-address-btn:hover{border-color:#fbf9ff;background-color:#faf7ff}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.address-card{border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.other-address-card{border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.address-card.selected,.selected-address{border-color:#000}.address-card:hover{border-color:#fbf9ff}.address-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.address-name{font-size:16px;font-weight:600;color:#000}.radio-button{width:20px;height:20px;border:2px solid #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all .2s}.radio-button.checked{border-color:#000;background-color:#000}.radio-inner{width:8px;height:8px;background-color:#fff;border-radius:50%}.address-text{color:#000;font-size:14px;line-height:1.4;margin-bottom:8px}.mobile-text{color:#000;font-size:14px;margin-bottom:16px}.address-actions{display:flex;gap:24px}.action-btn{background:none;border:none;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;transition:opacity .2s}.delete-btn,.edit-btn{box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;color:#000;font-size:14px!important;border-radius:5px}.action-btn:hover{opacity:.7}.confirm-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;width:90%!important}.confirm-btn:hover{background:#fbf9ff}@media (max-width: 480px){.title{font-size:18px}}.other-address-btn{background-color:#fff!important}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressListComponent, decorators: [{
             type: Component,
@@ -7500,7 +7516,7 @@ class CartComponent extends BaseSection {
         this.dialogRef = dialogRef;
         this.edit = false;
         this.isLoading = false;
-        this.currentTab = "ADDRESS";
+        this.currentTab = "BAG";
         this.userDetails = null;
         this.USER_CART_ITEMS = null;
         this.selectedAddressIdx = 0;
@@ -13562,14 +13578,14 @@ class HeaderSectionComponent {
             this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, minPrice: obj?.minPrice, maxPrice: obj?.maxPrice, pageNo: 1 } });
         }
         if (type == 'collection') {
-            this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, collection: obj, pageNo: 1 } });
+            this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, collections: obj?.replaceAll(" ", '_'), pageNo: 1 } });
         }
         if (type == 'collections') {
-            this.router.navigate(['/list'], { queryParams: { collection: obj, pageNo: 1 } });
+            this.router.navigate(['/list'], { queryParams: { collections: obj?.replaceAll(" ", '_'), pageNo: 1 } });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i2$1.MatDialog }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n    [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <ng-container *ngIf=\"style?.headline?.display\">\r\n      <div>\r\n        <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n      </div>\r\n    </ng-container>\r\n    <div>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isEcommerceWebsite\">\r\n      <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"showSearchBar\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n        [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n      <i class=\"fa fa-search h-100\" aria-hidden=\"true\"\r\n        [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\"></i>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n      <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n      (click)=\"goToCart()\">\r\n      <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n      <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3 px-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      {{ele?.categoryName}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\" *ngIf=\"selectedCategory?.byStyle\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n<!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3\" (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of collectionList?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:400px;outline:none;border-radius:12px;height:38px;display:flex;align-items:center;background-color:#f1f1f1;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { 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: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n    [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <ng-container *ngIf=\"style?.headline?.display\">\r\n      <div>\r\n        <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n      </div>\r\n    </ng-container>\r\n    <div>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isEcommerceWebsite\">\r\n      <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"showSearchBar\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n        [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n      <i class=\"fa fa-search h-100\" aria-hidden=\"true\"\r\n        [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\"></i>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n      <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n      (click)=\"goToCart()\">\r\n      <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n      <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      {{ele?.categoryName}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\" *ngIf=\"selectedCategory?.byStyle\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n<!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3\" (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of collectionList?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:400px;outline:none;border-radius:12px;height:38px;display:flex;align-items:center;background-color:#f1f1f1;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { 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: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -13607,7 +13623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SpacingHorizontalDirective,
                         MovingTextComponent,
                         ContentFitDirective
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n    [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <ng-container *ngIf=\"style?.headline?.display\">\r\n      <div>\r\n        <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n      </div>\r\n    </ng-container>\r\n    <div>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isEcommerceWebsite\">\r\n      <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"showSearchBar\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n        [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n      <i class=\"fa fa-search h-100\" aria-hidden=\"true\"\r\n        [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\"></i>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n      <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n      (click)=\"goToCart()\">\r\n      <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n      <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3 px-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      {{ele?.categoryName}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\" *ngIf=\"selectedCategory?.byStyle\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n<!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3\" (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of collectionList?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:400px;outline:none;border-radius:12px;height:38px;display:flex;align-items:center;background-color:#f1f1f1;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n    [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <ng-container *ngIf=\"style?.headline?.display\">\r\n      <div>\r\n        <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n      </div>\r\n    </ng-container>\r\n    <div>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isEcommerceWebsite\">\r\n      <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"showSearchBar\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n        [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n      <i class=\"fa fa-search h-100\" aria-hidden=\"true\"\r\n        [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\"></i>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n      <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n      (click)=\"goToCart()\">\r\n      <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n      <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n      <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0\" [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      {{ele?.categoryName}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\" *ngIf=\"selectedCategory?.byStyle\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n<!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3\" (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of collectionList?.imageUrls; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:400px;outline:none;border-radius:12px;height:38px;display:flex;align-items:center;background-color:#f1f1f1;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i2$1.MatDialog }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -14113,7 +14129,7 @@ class SmallProductListingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }, { token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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}\"\r\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" (click)=\"goToProductDetail(product)\"\r\n  [attr.style]=\"customClass\">\r\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\r\n      [theme]=\"data?.styles?.theme\"></image-loading>\r\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n      off</div>\r\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"p-2 h-40\">\r\n    <span class=\"trim-text color\">{{product.name}}</span>\r\n    <div class=\"bottom\">\r\n      <span class=\"m-1\">\r\n        <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n        <span class=\"color\"\r\n          [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n      </span>\r\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n        <div class=\"total-ratings\">{{product?.totalReviewCount == 1 ? '1 Rating' :\r\n          getRatings(500000)}}</div>\r\n      </div>\r\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n        (click)=\"removeDefault($event)\">\r\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n          <ng-container *ngIf=\"!product.quantity\">\r\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">\r\n              Add to Cart</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"product.quantity\">\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n            <mat-icon>notification_important</mat-icon>\r\n            <span class=\"ml-2\">Notify</span>\r\n          </span>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n</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}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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}\"\r\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\"\r\n  [attr.style]=\"customClass\">\r\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\" (click)=\"goToProductDetail(product)\"\r\n      [theme]=\"data?.styles?.theme\"></image-loading>\r\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n      off</div>\r\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"p-2 h-40\">\r\n    <span class=\"trim-text color\">{{product.name}}</span>\r\n    <div class=\"bottom\">\r\n      <span class=\"m-1\">\r\n        <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n        <span class=\"color\"\r\n          [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n      </span>\r\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n        <div class=\"total-ratings\">{{product?.totalReviewCount == 1 ? '1 Rating' :\r\n          getRatings(product?.totalReviewCount)}}</div>\r\n      </div>\r\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n        (click)=\"removeDefault($event)\">\r\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n          <ng-container *ngIf=\"!product.quantity\">\r\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">\r\n              Add to Cart</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"product.quantity\">\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n            <mat-icon>notification_important</mat-icon>\r\n            <span class=\"ml-2\">Notify</span>\r\n          </span>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n</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}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, decorators: [{
             type: Component,
@@ -14124,7 +14140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ColorDirective,
                         RatingModule,
                         FormsModule
-                    ], template: "<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\r\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\" (click)=\"goToProductDetail(product)\"\r\n  [attr.style]=\"customClass\">\r\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\"\r\n      [theme]=\"data?.styles?.theme\"></image-loading>\r\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n      off</div>\r\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"p-2 h-40\">\r\n    <span class=\"trim-text color\">{{product.name}}</span>\r\n    <div class=\"bottom\">\r\n      <span class=\"m-1\">\r\n        <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n        <span class=\"color\"\r\n          [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n      </span>\r\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n        <div class=\"total-ratings\">{{product?.totalReviewCount == 1 ? '1 Rating' :\r\n          getRatings(500000)}}</div>\r\n      </div>\r\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n        (click)=\"removeDefault($event)\">\r\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n          <ng-container *ngIf=\"!product.quantity\">\r\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">\r\n              Add to Cart</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"product.quantity\">\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n            <mat-icon>notification_important</mat-icon>\r\n            <span class=\"ml-2\">Notify</span>\r\n          </span>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n</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}.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"] }]
+                    ], template: "<div class=\"product hover-effect\" [ngClass]=\"{'width' : isScrollable, 'adjustHeightWidth': isCategoryProductList}\"\r\n  [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\"\r\n  [attr.style]=\"customClass\">\r\n  <div class=\"prod-img\" [class.fade-out]=\"imageIndex == index\">\r\n    <image-loading [imageUrl]=\"getProductImages(product)\" [hash]=\"product.itemImages?.[0]?.blurhash\" (click)=\"goToProductDetail(product)\"\r\n      [theme]=\"data?.styles?.theme\"></image-loading>\r\n    <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n      [simpoColor]=\"data?.styles?.background?.color\" *ngIf=\"getPercentage(product) > '0'\">{{getPercentage(product)}}%\r\n      off</div>\r\n    <div class=\"carousel-buttons\" *ngIf=\"(product?.itemImages?.length || 0) > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV')\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT')\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"p-2 h-40\">\r\n    <span class=\"trim-text color\">{{product.name}}</span>\r\n    <div class=\"bottom\">\r\n      <span class=\"m-1\">\r\n        <span class=\"color\" *ngIf=\"product?.price?.discountedPrice && product.price.discountedPrice > 0\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.discountedPrice ?? 0}}</span>\r\n        <span class=\"color\"\r\n          [ngClass]=\"{'strike-through' : product?.price?.discountedPrice && product.price.discountedPrice > 0 }\"><span\r\n            [innerHTML]=\"currency\"></span> {{product?.price?.sellingPrice ?? 0}}</span>\r\n      </span>\r\n      <div class=\"review-rating d-flex gap-2 align-items-center justify-content-between\" *ngIf=\"product?.averageRating\">\r\n        <p-rating [(ngModel)]=\"product.averageRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n        <div class=\"total-ratings\">{{product?.totalReviewCount == 1 ? '1 Rating' :\r\n          getRatings(product?.totalReviewCount)}}</div>\r\n      </div>\r\n      <div class=\"add-to-cart\" [style.borderColor]=\"data.styles?.background?.accentColor\"\r\n        [ngClass]=\"{'justify-content-between p-0 d-flex': product.quantity, 'justify-content-center': !product.quantity}\"\r\n        (click)=\"removeDefault($event)\">\r\n        <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n          <ng-container *ngIf=\"!product.quantity\">\r\n            <div (click)=\"addItemToCart($event, product, 'ADD')\" [style.color]=\"data.styles?.background?.accentColor\">\r\n              Add to Cart</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"product.quantity\">\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">-</span>\r\n            <span class=\"quantity\" [style.color]=\"data.styles?.background?.accentColor\">{{product.quantity}}</span>\r\n            <span class=\"quantity-btn\" (click)=\"addItemToCart($event, product, 'ADD')\"\r\n              [style.backgroundColor]=\"getSupportingColor(data.styles?.background?.accentColor)\"\r\n              [style.color]=\"data.styles?.background?.accentColor\">+</span>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!product?.itemInventory?.openingStock\">\r\n          <span class=\"d-flex align-items-center justify-content-center w-100\">\r\n            <mat-icon>notification_important</mat-icon>\r\n            <span class=\"ml-2\">Notify</span>\r\n          </span>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- <ng-template #loadingScreen>\r\n  <ngx-skeleton-loader *ngIf=\"filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '100%',\r\n          height: '100%',\r\n          'border-radius': '10px',\r\n          'position': 'relative',\r\n          'right': '5px'\r\n        }\" />\r\n</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}.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$3.Router }], propDecorators: { product: [{
                 type: Input
             }], data: [{
@@ -14725,7 +14741,7 @@ class ProductDescComponent extends BaseSection {
             mobileNumber: "",
             pincode: "",
             username: "",
-            message: `Hi, I've just scheduled a video call with you. It's important and I'd appreciate your time — looking forward to connecting as soon as possible`,
+            message: `Hi, I've just scheduled a video call with you for this product ${this.responseData?.name}. It's important and I'd appreciate your time — looking forward to connecting as soon as possible`,
         };
         this.validationErrors = {
             username: false,
@@ -15187,8 +15203,8 @@ class ProductDescComponent extends BaseSection {
         else
             return 'width-max';
     }
-    onFindInStore() {
-        console.log('Find in store clicked');
+    onFindInStore(id) {
+        this.router.navigate(['/store'], { queryParams: { storeId: id } });
     }
     onBookAppointment() {
         console.log('Book appointment clicked');
@@ -15350,7 +15366,7 @@ class ProductDescComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i4.MessageService }, { token: i1$1.Meta }, { token: i1$1.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i2$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\" #d2>\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">Out of\r\n      Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\" simpoButtonDirective\r\n      [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [color]=\"data?.styles?.background?.accentColor\"   (click)=\"opendailogbox(dialogBox)\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\" *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\">\r\n    <div class=\"rating d-flex justify-content-center gap-2\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{\"\u2B50\" + (responseData?.averageRating | number:'1.1-2')}}</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' : getRatings(responseData?.totalReviewCount) + \" \" +  \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" [style.color]=\"data?.styles?.background?.accentColor\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          + PRICE BREAKUP\r\n        </div>\r\n      </div>\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n                [style.color]=\"ele.materialType == 'DIAMOND' ? '#fff' : ''\">\r\n                {{ele.materialType | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\" (wheel)=\"scroll($event)\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n    <div class=\"row h-100 overflow-scroll mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"col-4\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/275354c1750835096471Animation - 1750835001220.gif\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <div class=\"sch-btn text-center cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          (click)=\"opendailogbox(dialogBox)\">\r\n          Schedule a Video Call\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\" [style.color]=\"data?.styles?.background?.accentColor\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\">\r\n        <div class=\"d-flex align-items-center w-90\">\r\n          <div class=\"d-flex mx-1\"><mat-icon [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isDetails\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Nearest Store Section -->\r\n      <div class=\"store-section\">\r\n        <div class=\"d-flex align-items-start store-item\">\r\n          <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n          <div class=\"store-details\">\r\n            <div class=\"store-text\">\r\n              <span class=\"store-label\">Nearest Store - </span>\r\n              <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n              <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n            </div>\r\n            <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n            <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center w-100\">\r\n          <button class=\"find-store-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getButtonId(2)\" (click)=\"onFindInStore()\">FIND IN STORE</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Try At Home Section -->\r\n      <div class=\"try-home-section\">\r\n        <div class=\"d-flex align-items-start try-home-item\">\r\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n          <div class=\"try-home-details\">\r\n            <div class=\"try-home-header\">\r\n              <span class=\"try-home-text\">Try At Home</span>\r\n              <span class=\"free-text\"> (It's Free)</span>\r\n            </div>\r\n            <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n          <button class=\"book-appointment-btn\">BOOK HOME APPOINTMENT</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n\r\n    <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n      <mat-icon (click)=\"closeDialog()\"\r\n        class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n\r\n    <div class=\"modal-body h-100 p-0\">\r\n\r\n      <div class=\"row h-100 w-100 mt-3\">\r\n        <div class=\"col-6\">\r\n          <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/603782c1750925995765Animation - 1750925947618.gif\"\r\n            alt=\"\" class=\"h-100 w-100\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100\">\r\n\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-10-20\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3\">COMPONENT</div>\r\n          <div class=\"col-3\">RATE</div>\r\n          <div class=\"col-3\">WEIGHT</div>\r\n          <div class=\"col-3\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3\">{{ ele.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) | number:'1.2-2' }}</div>\r\n          <div class=\"col-3\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".product-desc{display:flex}*{font-family:Mulish!important}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}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700}.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}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:22px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:2%;border-radius:8px}.img-list{display:flex;gap:5px;max-height:460px;overflow:scroll}.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:32px}.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;color:#848484;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#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:5px 15px;cursor:pointer}.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:16px!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{overflow-y:scroll}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600}.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,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}.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}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 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:1500px;width:100%}}.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}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{overflow:scroll;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;margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:13px}.sch-btn{width:100%;color:#fff;padding:10px 0;margin-top:5px;border-radius:12px;font-size:18px}.tax-text{font-size:12px}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.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:15px 0;background-color:transparent}.delivery-title{font-size:22px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:12px 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:16px;font-weight:600;color:#374151;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{color:#9ca3af;font-weight:500}.locate-btn{background:none!important;border:none!important;color:#6b7280!important;font-weight:500;font-size:15px!important;padding:0!important;box-shadow:none!important;width:20%!important}.locate-btn:hover{color:#374151!important}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid #cfcfcf;padding:12px 8px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:16px;font-weight:700}.store-section{border:1px solid #cfcfcf;padding:12px 2px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:20px;padding-left:8px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:16px;margin-bottom:8px;line-height:1.4}.store-label{color:#374151}.store-name{font-weight:700;color:#374151}.store-distance{color:#6b7280}.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:95%!important;padding:8px 20px;font-weight:600;font-size:16px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:12px;border:1px solid #cfcfcf}.try-home-item{margin-bottom:20px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-header{margin-bottom:4px;line-height:1.4}.try-home-text{font-size:16px;font-weight:700;color:#374151}.free-text{font-size:16px;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:16px!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){.delivery-container{padding:12px}.location-section{padding:12px 20px}.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:15%;width:35%}.rating{width:max-content;border:1px solid;border-radius:50px;padding:2px}.rating-no{padding-right:12px;margin:2px 0;border-right:1px solid}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.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: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: 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: i17.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.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\" #d2>\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">Out of\r\n      Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\" simpoButtonDirective\r\n      [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [color]=\"data?.styles?.background?.accentColor\"   (click)=\"opendailogbox(dialogBox)\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\" *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\">\r\n    <div class=\"rating d-flex justify-content-center gap-2\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{\"\u2B50\" + (responseData?.averageRating | number:'1.1-2')}}</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' : getRatings(responseData?.totalReviewCount) + \" \" +  \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" [style.color]=\"data?.styles?.background?.accentColor\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          + PRICE BREAKUP\r\n        </div>\r\n      </div>\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n                [style.color]=\"ele.materialType == 'DIAMOND' ? '#fff' : ''\">\r\n                {{ele.materialType | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\" (wheel)=\"scroll($event)\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n    <div class=\"row h-100 overflow-scroll mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"col-4\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/275354c1750835096471Animation - 1750835001220.gif\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <div class=\"sch-btn text-center cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          (click)=\"opendailogbox(dialogBox)\">\r\n          Schedule a Video Call\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\" [style.color]=\"data?.styles?.background?.accentColor\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\">\r\n        <div class=\"d-flex align-items-center w-90\">\r\n          <div class=\"d-flex mx-1\"><mat-icon [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isDetails\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Nearest Store Section -->\r\n      <div class=\"store-section\">\r\n        <div class=\"d-flex align-items-start store-item\">\r\n          <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n          <div class=\"store-details\">\r\n            <div class=\"store-text\">\r\n              <span class=\"store-label\">Nearest Store - </span>\r\n              <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n              <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n            </div>\r\n            <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n            <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center w-100\">\r\n          <button class=\"find-store-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getButtonId(2)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN STORE</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Try At Home Section -->\r\n      <!-- <div class=\"try-home-section\">\r\n        <div class=\"d-flex align-items-start try-home-item\">\r\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n          <div class=\"try-home-details\">\r\n            <div class=\"try-home-header\">\r\n              <span class=\"try-home-text\">Try At Home</span>\r\n              <span class=\"free-text\"> (It's Free)</span>\r\n            </div>\r\n            <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n          <button class=\"book-appointment-btn\">BOOK HOME APPOINTMENT</button>\r\n        </div>\r\n      </div> -->\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n\r\n    <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n      <mat-icon (click)=\"closeDialog()\"\r\n        class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n\r\n    <div class=\"modal-body h-100 p-0\">\r\n\r\n      <div class=\"row h-100 w-100 mt-3\">\r\n        <div class=\"col-6\">\r\n          <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/603782c1750925995765Animation - 1750925947618.gif\"\r\n            alt=\"\" class=\"h-100 w-100\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100\">\r\n\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-10-20\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3\">COMPONENT</div>\r\n          <div class=\"col-3\">RATE</div>\r\n          <div class=\"col-3\">WEIGHT</div>\r\n          <div class=\"col-3\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3\">{{ ele.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) | number:'1.2-2' }}</div>\r\n          <div class=\"col-3\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".product-desc{display:flex}*{font-family:Mulish!important}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}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700}.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}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:22px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:2%;border-radius:8px}.img-list{display:flex;gap:5px;max-height:460px;overflow:scroll}.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:32px}.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;color:#848484;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#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:5px 15px;cursor:pointer}.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:16px!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{overflow-y:scroll}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600}.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,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}.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}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 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:1500px;width:100%}}.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}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{overflow:scroll;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;margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:13px}.sch-btn{width:100%;color:#fff;padding:10px 0;margin-top:5px;border-radius:12px;font-size:18px}.tax-text{font-size:12px}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.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:15px 0;background-color:transparent}.delivery-title{font-size:22px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:12px 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:16px;font-weight:600;color:#374151;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{color:#9ca3af;font-weight:500}.locate-btn{background:none!important;border:none!important;color:#6b7280!important;font-weight:500;font-size:15px!important;padding:0!important;box-shadow:none!important;width:20%!important}.locate-btn:hover{color:#374151!important}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid #cfcfcf;padding:12px 8px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:16px;font-weight:700}.store-section{border:1px solid #cfcfcf;padding:12px 2px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:20px;padding-left:8px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:16px;margin-bottom:8px;line-height:1.4}.store-label{color:#374151}.store-name{font-weight:700;color:#374151}.store-distance{color:#6b7280}.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:95%!important;padding:8px 20px;font-weight:600;font-size:16px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:12px;border:1px solid #cfcfcf}.try-home-item{margin-bottom:20px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-header{margin-bottom:4px;line-height:1.4}.try-home-text{font-size:16px;font-weight:700;color:#374151}.free-text{font-size:16px;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:16px!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){.delivery-container{padding:12px}.location-section{padding:12px 20px}.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:15%;width:35%}.rating{width:max-content;border:1px solid;border-radius:50px;padding:2px}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:12px;margin:2px 0;border-right:1px solid}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.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: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: 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: i17.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.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -15379,7 +15395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SvgDividerComponent,
                         CornerDirective,
                         ButtonEditorDirective
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\" #d2>\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">Out of\r\n      Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\" simpoButtonDirective\r\n      [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [color]=\"data?.styles?.background?.accentColor\"   (click)=\"opendailogbox(dialogBox)\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\" *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\">\r\n    <div class=\"rating d-flex justify-content-center gap-2\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{\"\u2B50\" + (responseData?.averageRating | number:'1.1-2')}}</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' : getRatings(responseData?.totalReviewCount) + \" \" +  \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" [style.color]=\"data?.styles?.background?.accentColor\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          + PRICE BREAKUP\r\n        </div>\r\n      </div>\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n                [style.color]=\"ele.materialType == 'DIAMOND' ? '#fff' : ''\">\r\n                {{ele.materialType | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\" (wheel)=\"scroll($event)\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n    <div class=\"row h-100 overflow-scroll mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"col-4\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/275354c1750835096471Animation - 1750835001220.gif\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <div class=\"sch-btn text-center cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          (click)=\"opendailogbox(dialogBox)\">\r\n          Schedule a Video Call\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\" [style.color]=\"data?.styles?.background?.accentColor\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\">\r\n        <div class=\"d-flex align-items-center w-90\">\r\n          <div class=\"d-flex mx-1\"><mat-icon [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isDetails\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Nearest Store Section -->\r\n      <div class=\"store-section\">\r\n        <div class=\"d-flex align-items-start store-item\">\r\n          <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n          <div class=\"store-details\">\r\n            <div class=\"store-text\">\r\n              <span class=\"store-label\">Nearest Store - </span>\r\n              <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n              <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n            </div>\r\n            <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n            <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center w-100\">\r\n          <button class=\"find-store-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getButtonId(2)\" (click)=\"onFindInStore()\">FIND IN STORE</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Try At Home Section -->\r\n      <div class=\"try-home-section\">\r\n        <div class=\"d-flex align-items-start try-home-item\">\r\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n          <div class=\"try-home-details\">\r\n            <div class=\"try-home-header\">\r\n              <span class=\"try-home-text\">Try At Home</span>\r\n              <span class=\"free-text\"> (It's Free)</span>\r\n            </div>\r\n            <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n          <button class=\"book-appointment-btn\">BOOK HOME APPOINTMENT</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n\r\n    <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n      <mat-icon (click)=\"closeDialog()\"\r\n        class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n\r\n    <div class=\"modal-body h-100 p-0\">\r\n\r\n      <div class=\"row h-100 w-100 mt-3\">\r\n        <div class=\"col-6\">\r\n          <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/603782c1750925995765Animation - 1750925947618.gif\"\r\n            alt=\"\" class=\"h-100 w-100\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100\">\r\n\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-10-20\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3\">COMPONENT</div>\r\n          <div class=\"col-3\">RATE</div>\r\n          <div class=\"col-3\">WEIGHT</div>\r\n          <div class=\"col-3\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3\">{{ ele.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) | number:'1.2-2' }}</div>\r\n          <div class=\"col-3\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".product-desc{display:flex}*{font-family:Mulish!important}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}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700}.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}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:22px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:2%;border-radius:8px}.img-list{display:flex;gap:5px;max-height:460px;overflow:scroll}.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:32px}.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;color:#848484;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#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:5px 15px;cursor:pointer}.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:16px!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{overflow-y:scroll}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600}.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,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}.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}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 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:1500px;width:100%}}.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}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{overflow:scroll;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;margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:13px}.sch-btn{width:100%;color:#fff;padding:10px 0;margin-top:5px;border-radius:12px;font-size:18px}.tax-text{font-size:12px}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.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:15px 0;background-color:transparent}.delivery-title{font-size:22px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:12px 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:16px;font-weight:600;color:#374151;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{color:#9ca3af;font-weight:500}.locate-btn{background:none!important;border:none!important;color:#6b7280!important;font-weight:500;font-size:15px!important;padding:0!important;box-shadow:none!important;width:20%!important}.locate-btn:hover{color:#374151!important}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid #cfcfcf;padding:12px 8px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:16px;font-weight:700}.store-section{border:1px solid #cfcfcf;padding:12px 2px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:20px;padding-left:8px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:16px;margin-bottom:8px;line-height:1.4}.store-label{color:#374151}.store-name{font-weight:700;color:#374151}.store-distance{color:#6b7280}.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:95%!important;padding:8px 20px;font-weight:600;font-size:16px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:12px;border:1px solid #cfcfcf}.try-home-item{margin-bottom:20px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-header{margin-bottom:4px;line-height:1.4}.try-home-text{font-size:16px;font-weight:700;color:#374151}.free-text{font-size:16px;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:16px!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){.delivery-container{padding:12px}.location-section{padding:12px 20px}.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:15%;width:35%}.rating{width:max-content;border:1px solid;border-radius:50px;padding:2px}.rating-no{padding-right:12px;margin:2px 0;border-right:1px solid}.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}.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}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\" #d2>\r\n          <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">Out of\r\n      Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\" simpoButtonDirective\r\n      [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n      [color]=\"data?.styles?.background?.accentColor\"   (click)=\"opendailogbox(dialogBox)\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\" *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\">\r\n    <div class=\"rating d-flex justify-content-center gap-2\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{\"\u2B50\" + (responseData?.averageRating | number:'1.1-2')}}</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' : getRatings(responseData?.totalReviewCount) + \" \" +  \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" [style.color]=\"data?.styles?.background?.accentColor\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          + PRICE BREAKUP\r\n        </div>\r\n      </div>\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n                [style.color]=\"ele.materialType == 'DIAMOND' ? '#fff' : ''\">\r\n                {{ele.materialType | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\" (wheel)=\"scroll($event)\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n    <div class=\"row h-100 overflow-scroll mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"col-4\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/275354c1750835096471Animation - 1750835001220.gif\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <div class=\"sch-btn text-center cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n          (click)=\"opendailogbox(dialogBox)\">\r\n          Schedule a Video Call\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\" [style.color]=\"data?.styles?.background?.accentColor\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\">\r\n        <div class=\"d-flex align-items-center w-90\">\r\n          <div class=\"d-flex mx-1\"><mat-icon [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n    </div>\r\n    <ng-container *ngIf=\"isDetails\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Nearest Store Section -->\r\n      <div class=\"store-section\">\r\n        <div class=\"d-flex align-items-start store-item\">\r\n          <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n          <div class=\"store-details\">\r\n            <div class=\"store-text\">\r\n              <span class=\"store-label\">Nearest Store - </span>\r\n              <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n              <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n            </div>\r\n            <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n            <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-center w-100\">\r\n          <button class=\"find-store-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getButtonId(2)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN STORE</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Try At Home Section -->\r\n      <!-- <div class=\"try-home-section\">\r\n        <div class=\"d-flex align-items-start try-home-item\">\r\n          <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n          <div class=\"try-home-details\">\r\n            <div class=\"try-home-header\">\r\n              <span class=\"try-home-text\">Try At Home</span>\r\n              <span class=\"free-text\"> (It's Free)</span>\r\n            </div>\r\n            <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n          <button class=\"book-appointment-btn\">BOOK HOME APPOINTMENT</button>\r\n        </div>\r\n      </div> -->\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-15\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n\r\n    <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n      <mat-icon (click)=\"closeDialog()\"\r\n        class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n\r\n    <div class=\"modal-body h-100 p-0\">\r\n\r\n      <div class=\"row h-100 w-100 mt-3\">\r\n        <div class=\"col-6\">\r\n          <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/603782c1750925995765Animation - 1750925947618.gif\"\r\n            alt=\"\" class=\"h-100 w-100\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100\">\r\n\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-10-20\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3\">COMPONENT</div>\r\n          <div class=\"col-3\">RATE</div>\r\n          <div class=\"col-3\">WEIGHT</div>\r\n          <div class=\"col-3\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3\">{{ ele.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) | number:'1.2-2' }}</div>\r\n          <div class=\"col-3\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".product-desc{display:flex}*{font-family:Mulish!important}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}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700}.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}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:22px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:2%;border-radius:8px}.img-list{display:flex;gap:5px;max-height:460px;overflow:scroll}.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:32px}.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;color:#848484;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#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:5px 15px;cursor:pointer}.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:16px!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{overflow-y:scroll}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600}.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,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}.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}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 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:1500px;width:100%}}.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}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{overflow:scroll;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;margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:13px}.sch-btn{width:100%;color:#fff;padding:10px 0;margin-top:5px;border-radius:12px;font-size:18px}.tax-text{font-size:12px}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.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:15px 0;background-color:transparent}.delivery-title{font-size:22px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:12px 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:16px;font-weight:600;color:#374151;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{color:#9ca3af;font-weight:500}.locate-btn{background:none!important;border:none!important;color:#6b7280!important;font-weight:500;font-size:15px!important;padding:0!important;box-shadow:none!important;width:20%!important}.locate-btn:hover{color:#374151!important}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid #cfcfcf;padding:12px 8px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:16px;font-weight:700}.store-section{border:1px solid #cfcfcf;padding:12px 2px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:20px;padding-left:8px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:16px;margin-bottom:8px;line-height:1.4}.store-label{color:#374151}.store-name{font-weight:700;color:#374151}.store-distance{color:#6b7280}.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:95%!important;padding:8px 20px;font-weight:600;font-size:16px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:12px;border:1px solid #cfcfcf}.try-home-item{margin-bottom:20px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-header{margin-bottom:4px;line-height:1.4}.try-home-text{font-size:16px;font-weight:700;color:#374151}.free-text{font-size:16px;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:16px!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){.delivery-container{padding:12px}.location-section{padding:12px 20px}.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:15%;width:35%}.rating{width:max-content;border:1px solid;border-radius:50px;padding:2px}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:12px;margin:2px 0;border-right:1px solid}.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}.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}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -15558,7 +15574,7 @@ class ProductListComponent extends BaseSection {
         this.getAllCategories();
         this.getAllCollections();
         this.minProductPrice = this.pricingMin = this.data?.styles.minPrice ?? 0;
-        this.maxProductPrice = this.pricingMax = this.data?.styles.maxPrice ?? 1000;
+        this.maxProductPrice = this.pricingMax = this.data?.styles.maxPrice ?? 30000;
         this.searchText = this.activatedRoute.snapshot.queryParams["searchTxt"];
         this.activatedRoute.queryParams.subscribe((qParam) => {
             this.searchTxt = qParam["searchTxt"];
@@ -15859,7 +15875,7 @@ class ProductListComponent extends BaseSection {
         this.imageIndex = -1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i2$1.MatDialog }, { token: CartService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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:scroll": "onWindowScroll($event)", "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\r\n              <div *ngFor=\"let product of responseData;let i = index\" class=\"product\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\" [index]=\"i\"></simpo-small-product-listing>\r\n                </ng-container>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex m-auto gap-15 flex-wrap\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\"  >\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\">\r\n    <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div class=\"mt-2 w-100\">\r\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n      <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n        <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.value}}</div>\r\n        <div>\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n\r\n        <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div>\r\n        <!-- <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span>{{product.quantity}}</span>\r\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div> -->\r\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%;transition:opacity .3s ease-in-out,transform .4s ease-in-out}.product-img.fade-out{opacity:0;transform:scale(.95)}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;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}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:5px 15px;border-radius:20px;gap:15px;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;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.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}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.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}.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:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}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%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;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}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.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;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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSelectModule }, { 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.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: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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:scroll": "onWindowScroll($event)", "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\r\n              <div *ngFor=\"let product of responseData;let i = index\" class=\"product\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\" [index]=\"i\"></simpo-small-product-listing>\r\n                </ng-container>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex m-auto gap-15 flex-wrap\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\"  >\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative box-shadow\">\r\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative box-shadow\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"  (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div class=\"mt-2 w-100\">\r\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n      <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n        <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.value}}</div>\r\n        <div>\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n\r\n        <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div>\r\n        <!-- <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span>{{product.quantity}}</span>\r\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div> -->\r\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%;transition:opacity .3s ease-in-out,transform .4s ease-in-out}.product-img.fade-out{opacity:0;transform:scale(.95)}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;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}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:5px 15px;border-radius:20px;gap:15px;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;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.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}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.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}.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:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}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%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;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}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.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;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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSelectModule }, { 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.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: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
                 //directive
                 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"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.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: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatChipsModule }] }); }
 }
@@ -15889,7 +15905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SmallProductListingComponent,
                         ColorDirective,
                         MatChipsModule
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\r\n              <div *ngFor=\"let product of responseData;let i = index\" class=\"product\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\" [index]=\"i\"></simpo-small-product-listing>\r\n                </ng-container>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex m-auto gap-15 flex-wrap\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\"  >\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\">\r\n    <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div class=\"mt-2 w-100\">\r\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n      <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n        <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.value}}</div>\r\n        <div>\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n\r\n        <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div>\r\n        <!-- <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span>{{product.quantity}}</span>\r\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div> -->\r\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%;transition:opacity .3s ease-in-out,transform .4s ease-in-out}.product-img.fade-out{opacity:0;transform:scale(.95)}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;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}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:5px 15px;border-radius:20px;gap:15px;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;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.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}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.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}.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:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}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%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;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}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.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;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"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n        <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\r\n        <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\r\n      <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n              <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n            <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\r\n              <div *ngFor=\"let product of responseData;let i = index\" class=\"product\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n                <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                  <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                  <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\" [index]=\"i\"></simpo-small-product-listing>\r\n                </ng-container>\r\n              </div>\r\n              <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n            </div>\r\n\r\n            <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n              <div>\r\n                <div class=\"cart-image\">\r\n                  <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                  <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Product list is empty\r\n                  </div>\r\n                  <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n                    Looks like no item is present with filter. Go ahead & explore top categories.\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex m-auto gap-15 flex-wrap\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\"  >\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n        <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative box-shadow\">\r\n    <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative box-shadow\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"  (click)=\"proceedToProductDesc(product.itemId)\">\r\n    <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n      <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n      <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n  </div>\r\n  <div class=\"mt-2 w-100\">\r\n    <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n    <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n      <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n      <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n        <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.value}}</div>\r\n        <div>\r\n          <span [innerHTML]='currency'></span>\r\n          {{product.price.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n        <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n          [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n\r\n        <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n          <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div>\r\n        <!-- <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n          <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n          <span>{{product.quantity}}</span>\r\n          <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n        </div> -->\r\n        <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%;transition:opacity .3s ease-in-out,transform .4s ease-in-out}.product-img.fade-out{opacity:0;transform:scale(.95)}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;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}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:5px 15px;border-radius:20px;gap:15px;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;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.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}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.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}.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:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}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%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;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}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.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;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: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -16291,7 +16307,7 @@ class OrderDetailsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\">\r\n    <section class=\"d-flex justify-content-between main-section\" [style.width.vw]=\"isMobile ? '100' : '65'\"\r\n        style=\"margin: auto;\" [attr.style]=\"customClass\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\"\r\n                style=\"left: -35px;\">\r\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end orderNum\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{\r\n                        orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span\r\n                            [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"!isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\" class=\"d-flex mb-2\"\r\n                    style=\"gap: 10px; width: 100%;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fs-6\">{{item.itemName}}</span>\r\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span\r\n                                    class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice *\r\n                                    item.quantity) | number: '1.0-2'}}</span></span>\r\n                        </div>\r\n                        <div class=\"review-rating d-flex justify-content-between\">\r\n                            <div class=\"w-75\">\r\n                                <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\" />\r\n                                <div class=\"message w-100\">\r\n                                    <div class=\"f-13\">Add a Detailed Review</div>\r\n                                    <textarea class=\"w-100 br-6 f-13\" [(ngModel)]=\"item.review\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex align-items-end\">\r\n                                <div (click)=\"submitReview(item)\" class=\"d-flex align-items-end f-16 fw-800\">Submit</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"fs-6 mt-25\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\" *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                    <span class=\"fw-normal\">Discount</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Total Tax</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ?\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                        orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ? (orderDetailData?.billDetails?.totalNetValue -\r\n                        orderDetailData?.billDetails?.discountAmount +\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount) :\r\n                        orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\">\r\n            <div class=\"right\">\r\n                <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px;\">Name:</span>\r\n                    <span class=\"fw-bold pl-2\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Phone:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Address:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderAddress }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Payment:</span>\r\n                    <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n                </div>\r\n                <a (click)=\"trackOrder()\" class=\"track-order\" *ngIf=\"orderDetailData?.orderTrackingLink\">Track Order\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ng-template #timelineContainer>\r\n    <hr />\r\n    <div class=\"timeline\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <div class=\"d-flex time-line\">\r\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n                    <div class=\"d-flex flex-column ml-2\">\r\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\r\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\r\n                        <!-- <div class=\"action-btn\">\r\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n                        </div> -->\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n    <hr />\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.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: i7$3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i4.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\">\r\n    <section class=\"d-flex justify-content-between main-section\" [style.width.vw]=\"isMobile ? '100' : '65'\"\r\n        style=\"margin: auto;\" [attr.style]=\"customClass\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\"\r\n                style=\"left: -35px;\">\r\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end orderNum\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{\r\n                        orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span\r\n                            [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"!isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\" class=\"d-flex mb-2\"\r\n                    style=\"gap: 10px; width: 100%;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fs-6\">{{item.itemName}}</span>\r\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span\r\n                                    class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice *\r\n                                    item.quantity) | number: '1.0-2'}}</span></span>\r\n                        </div>\r\n                        <div class=\"review-rating d-flex justify-content-between flex-column\">\r\n                            <div class=\"w-75\">\r\n                                <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\" />\r\n                                <div class=\"message w-100\">\r\n                                    <div class=\"f-13\">Add a Detailed Review</div>\r\n                                    <textarea class=\"w-100 br-6 f-13\" [(ngModel)]=\"item.review\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex align-items-end\">\r\n                                <div (click)=\"submitReview(item)\" class=\"d-flex align-items-end f-16 fw-800\">Submit</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"fs-6 mt-25\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\" *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                    <span class=\"fw-normal\">Discount</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Total Tax</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ?\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                        orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ? (orderDetailData?.billDetails?.totalNetValue -\r\n                        orderDetailData?.billDetails?.discountAmount +\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount) :\r\n                        orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\">\r\n            <div class=\"right\">\r\n                <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px;\">Name:</span>\r\n                    <span class=\"fw-bold pl-2\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Phone:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Address:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderAddress }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Payment:</span>\r\n                    <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n                </div>\r\n                <a (click)=\"trackOrder()\" class=\"track-order\" *ngIf=\"orderDetailData?.orderTrackingLink\">Track Order\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ng-template #timelineContainer>\r\n    <hr />\r\n    <div class=\"timeline\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <div class=\"d-flex time-line\">\r\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n                    <div class=\"d-flex flex-column ml-2\">\r\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\r\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\r\n                        <!-- <div class=\"action-btn\">\r\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n                        </div> -->\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n    <hr />\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.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: i7$3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i4.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, decorators: [{
             type: Component,
@@ -16303,7 +16319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PanelModule,
                         RatingModule,
                         FormsModule
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between main-section\" [style.width.vw]=\"isMobile ? '100' : '65'\"\r\n        style=\"margin: auto;\" [attr.style]=\"customClass\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\"\r\n                style=\"left: -35px;\">\r\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end orderNum\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{\r\n                        orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span\r\n                            [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"!isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\" class=\"d-flex mb-2\"\r\n                    style=\"gap: 10px; width: 100%;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fs-6\">{{item.itemName}}</span>\r\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span\r\n                                    class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice *\r\n                                    item.quantity) | number: '1.0-2'}}</span></span>\r\n                        </div>\r\n                        <div class=\"review-rating d-flex justify-content-between\">\r\n                            <div class=\"w-75\">\r\n                                <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\" />\r\n                                <div class=\"message w-100\">\r\n                                    <div class=\"f-13\">Add a Detailed Review</div>\r\n                                    <textarea class=\"w-100 br-6 f-13\" [(ngModel)]=\"item.review\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex align-items-end\">\r\n                                <div (click)=\"submitReview(item)\" class=\"d-flex align-items-end f-16 fw-800\">Submit</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"fs-6 mt-25\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\" *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                    <span class=\"fw-normal\">Discount</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Total Tax</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ?\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                        orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ? (orderDetailData?.billDetails?.totalNetValue -\r\n                        orderDetailData?.billDetails?.discountAmount +\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount) :\r\n                        orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\">\r\n            <div class=\"right\">\r\n                <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px;\">Name:</span>\r\n                    <span class=\"fw-bold pl-2\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Phone:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Address:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderAddress }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Payment:</span>\r\n                    <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n                </div>\r\n                <a (click)=\"trackOrder()\" class=\"track-order\" *ngIf=\"orderDetailData?.orderTrackingLink\">Track Order\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ng-template #timelineContainer>\r\n    <hr />\r\n    <div class=\"timeline\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <div class=\"d-flex time-line\">\r\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n                    <div class=\"d-flex flex-column ml-2\">\r\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\r\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\r\n                        <!-- <div class=\"action-btn\">\r\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n                        </div> -->\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n    <hr />\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}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}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between main-section\" [style.width.vw]=\"isMobile ? '100' : '65'\"\r\n        style=\"margin: auto;\" [attr.style]=\"customClass\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop position-relative\"\r\n                style=\"left: -35px;\">\r\n                <mat-icon style=\"cursor: pointer;\" (click)=\"goBack()\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end orderNum\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\"fs-6\">{{ orderDetailData?.createdTimeStamp | date: 'medium' }}, {{\r\n                        orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | <span\r\n                            [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"!isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems\" class=\"d-flex mb-2\"\r\n                    style=\"gap: 10px; width: 100%;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px; border-radius: 5px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fs-6\">{{item.itemName}}</span>\r\n                        <!-- <span class=\"fs-6\">Size: XS</span> -->\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X <span [innerHTML]=\"currency\"></span> <span\r\n                                    class=\"fw-bold\">{{(item.discountedPrice) | number: '1.0-2'}}</span></span>\r\n                            <span> <span [innerHTML]=\"currency\"></span> <span class=\"fw-bold\">{{(item.discountedPrice *\r\n                                    item.quantity) | number: '1.0-2'}}</span></span>\r\n                        </div>\r\n                        <div class=\"review-rating d-flex justify-content-between flex-column\">\r\n                            <div class=\"w-75\">\r\n                                <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\" [readonly]=\"false\" />\r\n                                <div class=\"message w-100\">\r\n                                    <div class=\"f-13\">Add a Detailed Review</div>\r\n                                    <textarea class=\"w-100 br-6 f-13\" [(ngModel)]=\"item.review\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex align-items-end\">\r\n                                <div (click)=\"submitReview(item)\" class=\"d-flex align-items-end f-16 fw-800\">Submit</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *ngIf=\"isMobile\">\r\n                <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n            </ng-container>\r\n            <div class=\"fs-6 mt-25\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\" *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                    <span class=\"fw-normal\">Discount</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount | number:'1.0-2'}}</span>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Total Tax</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ?\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                        orderDetailData?.billDetails?.totalTax | number:'1.0-2'}}</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\"><span [innerHTML]=\"currency\"></span>\r\n                        {{orderDetailData?.billDetails?.discountAmount ? (orderDetailData?.billDetails?.totalNetValue -\r\n                        orderDetailData?.billDetails?.discountAmount +\r\n                        orderDetailData?.billDetails?.totalTaxAfterDiscount) :\r\n                        orderDetailData?.billDetails?.totalGrossValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\">\r\n            <div class=\"right\">\r\n                <h1 class=\"mb-3 fs-5\">User Details</h1>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px;\">Name:</span>\r\n                    <span class=\"fw-bold pl-2\">{{orderDetailData?.addressDetails?.receiverName}}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Phone:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderDetailData?.addressDetails?.receiverPhone }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Address:</span>\r\n                    <span class=\"fw-bold pl-2\">{{ orderAddress }}</span>\r\n                </div>\r\n                <div class=\"my-2 fs-6\">\r\n                    <span style=\"margin-right: 10px\">Payment:</span>\r\n                    <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n                </div>\r\n                <a (click)=\"trackOrder()\" class=\"track-order\" *ngIf=\"orderDetailData?.orderTrackingLink\">Track Order\r\n                </a>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ng-template #timelineContainer>\r\n    <hr />\r\n    <div class=\"timeline\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <div class=\"d-flex time-line\">\r\n                    <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon>\r\n                    <div class=\"d-flex flex-column ml-2\">\r\n                        <span class=\"fw-normal fs-6\">{{ event.name?.replaceAll(\"_\", \" \") }}</span>\r\n                        <div class=\"fs-6 \">{{event.desc?.replaceAll(\"_\", \" \")}}</div>\r\n                        <!-- <div class=\"action-btn\">\r\n                            <button *ngIf=\"canCancelOrder\">Cancel Order</button>\r\n                        </div> -->\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n    <hr />\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}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}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i4.MessageService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -16634,7 +16650,7 @@ class UserProfileComponent extends BaseSection {
     editProfile() {
         if (this.screenWidth > 475) {
             this.matDialog.open(UserBasicInfoComponent, {
-                height: '50vh',
+                height: '75vh',
                 width: '40vw',
                 data: {}
             }).afterClosed().subscribe((response) => {
@@ -17967,7 +17983,7 @@ class StoreListComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StoreListComponent, deps: [{ token: RestService }, { token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n            <ng-container *ngIf=\"!loader\">\r\n                <div class=\"store-header mb-3\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? \"Stores in \" +\r\n                    pincode :\r\n                    \"Find a Store Near You\"}}\r\n                </div>\r\n                <div class=\"sub-text\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? 'We have ' +\r\n                    totalCount\r\n                    + ' stores in this locality, scroll down to view the stores\r\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n                    and\r\n                    we look forward to serving you.' }}\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '3vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n                <div class=\"sub-text w-75\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '2vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\" [class.error-border]=\"error\">\r\n                <div class=\"d-flex align-items-center w-90\">\r\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n                    </div>\r\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n                        [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n                        [style.color]=\"getTextColor(data?.styles?.background?.color)\"\r\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false\"/>\r\n                </div>\r\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-container row w-75 mx-auto\">\r\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n            </div>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text w-100 text-center\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '6vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"bottom-sub-text mb-3 w-100 f-20\">Showing Stores</div>\r\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n                <div class=\"col-4 p-2\" style=\"border-radius: 12px; border: none;\"\r\n                    *ngFor=\"let ele of storesList; let i = index\">\r\n                    <div class=\"card-body p-4 h-100 position-relative\">\r\n                        <div class=\"d-flex justify-content-between align-items-start mb-3\">\r\n                            <div>\r\n                                <h5 class=\"card-title fw-bold mb-1\">{{ele?.name}}</h5>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"mb-3\">\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.address}},</p>\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.city}},\r\n                                {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},</p>\r\n                            <p class=\"mb-0\">Phone-<span [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.phone}}</span></p>\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <p class=\"mb-0\" [style.color]=\"data?.styles?.background?.accentColor\">STORE HOURS -\r\n                                {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"d-flex gap-3 align-items-center card-bottom\">\r\n                            <div class=\"rounded-circle d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 30px; background-color: #25d366;\"\r\n                                (click)=\"openWhatsapp(ele?.phone)\">\r\n                                <i class=\"fab fa-whatsapp text-white fs-5\"></i>\r\n                            </div>\r\n                            <!-- <button class=\"btn flex-fill py-2 fw-semibold\"\r\n                            style=\"background-color: #e8e3ff; color: #6b46c1; border: none; border-radius: 25px;font-size: 12px !important;\">\r\n                            BOOK A VISIT\r\n                        </button> -->\r\n                            <button class=\"btn flex-fill py-2 fw-semibold text-white\"\r\n                                style=\"background: linear-gradient(135deg, #a855f7, #ec4899); border: none; border-radius: 25px;font-size: 12px !important;\"\r\n                                (click)=\"viewStore(ele.storeId)\">\r\n                                VIEW STORE\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #loaderScreen>\r\n                <div class=\"row\">\r\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n                        <ngx-skeleton-loader class=\"col-4\" [theme]=\"{\r\n                width: '100%',\r\n                height: '40vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px}.location-container input{border:unset;appearance:unset;outline:unset;font-size:13px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{border:1px solid;border-radius:18px;height:100%}.cdk-virtual-scroll-viewport{display:unset}.cdk-virtual-scroll-content-wrapper{position:unset!important}.card-bottom{position:absolute;bottom:8px;left:25px;width:90%}.error-border{border:2px solid #dc3545!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: 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: 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n            <ng-container *ngIf=\"!loader\">\r\n                <div class=\"store-header mb-3\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? \"Stores in \" +\r\n                    pincode :\r\n                    \"Find a Store Near You\"}}\r\n                </div>\r\n                <div class=\"sub-text\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? 'We have ' +\r\n                    totalCount\r\n                    + ' stores in this locality, scroll down to view the stores\r\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n                    and\r\n                    we look forward to serving you.' }}\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '3vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n                <div class=\"sub-text w-75\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '2vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n                [class.error-border]=\"error\">\r\n                <div class=\"d-flex align-items-center w-90\">\r\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n                    </div>\r\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n                        [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n                        [style.color]=\"getTextColor(data?.styles?.background?.color)\"\r\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false\" />\r\n                </div>\r\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-container row w-75 mx-auto mt-3\">\r\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n            </div>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text w-100 text-center\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '6vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"bottom-sub-text mb-3 w-100 f-20\"> {{ submit && showMessage == true && pincode &&\r\n                pincode.toString().length == 6 ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n                \"Showing All Stores\"}}</div>\r\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n                <div class=\"col-4 p-2\" style=\"border-radius: 12px; border: none;\"\r\n                    *ngFor=\"let ele of storesList; let i = index\">\r\n                    <div class=\"card-body p-4 h-100 position-relative\">\r\n                        <div class=\"d-flex justify-content-between align-items-start mb-3\">\r\n                            <div>\r\n                                <h5 class=\"card-title fw-bold mb-1\">{{ele?.name}}</h5>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"mb-3\">\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.address}},</p>\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.city}},\r\n                                {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},</p>\r\n                            <p class=\"mb-0\">Phone-<span\r\n                                    [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.phone}}</span></p>\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <p class=\"mb-0\" [style.color]=\"data?.styles?.background?.accentColor\">STORE HOURS -\r\n                                {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"d-flex gap-3 align-items-center card-bottom\">\r\n                            <div class=\"rounded-circle d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 30px; background-color: #25d366;\"\r\n                                (click)=\"openWhatsapp(ele?.phone)\">\r\n                                <i class=\"fab fa-whatsapp text-white fs-5\"></i>\r\n                            </div>\r\n                            <!-- <button class=\"btn flex-fill py-2 fw-semibold\"\r\n                            style=\"background-color: #e8e3ff; color: #6b46c1; border: none; border-radius: 25px;font-size: 12px !important;\">\r\n                            BOOK A VISIT\r\n                        </button> -->\r\n                            <button class=\"btn flex-fill py-2 fw-semibold text-white\"\r\n                                style=\"background: linear-gradient(135deg, #a855f7, #ec4899); border: none; border-radius: 25px;font-size: 12px !important;\"\r\n                                (click)=\"viewStore(ele.storeId)\">\r\n                                VIEW STORE\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #loaderScreen>\r\n                <div class=\"row\">\r\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n                        <ngx-skeleton-loader class=\"col-4\" [theme]=\"{\r\n                width: '100%',\r\n                height: '40vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px}.location-container input{border:unset;appearance:unset;outline:unset;font-size:13px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{border:1px solid;border-radius:18px;height:100%}.cdk-virtual-scroll-viewport{display:unset}.cdk-virtual-scroll-content-wrapper{position:unset!important}.card-bottom{position:absolute;bottom:8px;left:25px;width:90%}.error-border{border:2px solid #dc3545!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: 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: 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StoreListComponent, decorators: [{
             type: Component,
@@ -17983,7 +17999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ButtonDirectiveDirective,
                         ContentFitDirective,
                         NgxSkeletonLoaderModule,
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n            <ng-container *ngIf=\"!loader\">\r\n                <div class=\"store-header mb-3\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? \"Stores in \" +\r\n                    pincode :\r\n                    \"Find a Store Near You\"}}\r\n                </div>\r\n                <div class=\"sub-text\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? 'We have ' +\r\n                    totalCount\r\n                    + ' stores in this locality, scroll down to view the stores\r\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n                    and\r\n                    we look forward to serving you.' }}\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '3vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n                <div class=\"sub-text w-75\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '2vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\" [class.error-border]=\"error\">\r\n                <div class=\"d-flex align-items-center w-90\">\r\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n                    </div>\r\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n                        [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n                        [style.color]=\"getTextColor(data?.styles?.background?.color)\"\r\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false\"/>\r\n                </div>\r\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-container row w-75 mx-auto\">\r\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n            </div>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text w-100 text-center\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '6vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"bottom-sub-text mb-3 w-100 f-20\">Showing Stores</div>\r\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n                <div class=\"col-4 p-2\" style=\"border-radius: 12px; border: none;\"\r\n                    *ngFor=\"let ele of storesList; let i = index\">\r\n                    <div class=\"card-body p-4 h-100 position-relative\">\r\n                        <div class=\"d-flex justify-content-between align-items-start mb-3\">\r\n                            <div>\r\n                                <h5 class=\"card-title fw-bold mb-1\">{{ele?.name}}</h5>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"mb-3\">\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.address}},</p>\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.city}},\r\n                                {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},</p>\r\n                            <p class=\"mb-0\">Phone-<span [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.phone}}</span></p>\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <p class=\"mb-0\" [style.color]=\"data?.styles?.background?.accentColor\">STORE HOURS -\r\n                                {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"d-flex gap-3 align-items-center card-bottom\">\r\n                            <div class=\"rounded-circle d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 30px; background-color: #25d366;\"\r\n                                (click)=\"openWhatsapp(ele?.phone)\">\r\n                                <i class=\"fab fa-whatsapp text-white fs-5\"></i>\r\n                            </div>\r\n                            <!-- <button class=\"btn flex-fill py-2 fw-semibold\"\r\n                            style=\"background-color: #e8e3ff; color: #6b46c1; border: none; border-radius: 25px;font-size: 12px !important;\">\r\n                            BOOK A VISIT\r\n                        </button> -->\r\n                            <button class=\"btn flex-fill py-2 fw-semibold text-white\"\r\n                                style=\"background: linear-gradient(135deg, #a855f7, #ec4899); border: none; border-radius: 25px;font-size: 12px !important;\"\r\n                                (click)=\"viewStore(ele.storeId)\">\r\n                                VIEW STORE\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #loaderScreen>\r\n                <div class=\"row\">\r\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n                        <ngx-skeleton-loader class=\"col-4\" [theme]=\"{\r\n                width: '100%',\r\n                height: '40vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px}.location-container input{border:unset;appearance:unset;outline:unset;font-size:13px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{border:1px solid;border-radius:18px;height:100%}.cdk-virtual-scroll-viewport{display:unset}.cdk-virtual-scroll-content-wrapper{position:unset!important}.card-bottom{position:absolute;bottom:8px;left:25px;width:90%}.error-border{border:2px solid #dc3545!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n            <ng-container *ngIf=\"!loader\">\r\n                <div class=\"store-header mb-3\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? \"Stores in \" +\r\n                    pincode :\r\n                    \"Find a Store Near You\"}}\r\n                </div>\r\n                <div class=\"sub-text\">\r\n                    {{ submit && showMessage == true && pincode && pincode.toString().length == 6 ? 'We have ' +\r\n                    totalCount\r\n                    + ' stores in this locality, scroll down to view the stores\r\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n                    and\r\n                    we look forward to serving you.' }}\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '3vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n                <div class=\"sub-text w-75\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '2vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n                [class.error-border]=\"error\">\r\n                <div class=\"d-flex align-items-center w-90\">\r\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n                    </div>\r\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n                        [style.backgroundColor]=\"data?.styles?.background?.color\"\r\n                        [style.color]=\"getTextColor(data?.styles?.background?.color)\"\r\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false\" />\r\n                </div>\r\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-container row w-75 mx-auto mt-3\">\r\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n            </div>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text w-100 text-center\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '6vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"bottom-sub-text mb-3 w-100 f-20\"> {{ submit && showMessage == true && pincode &&\r\n                pincode.toString().length == 6 ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n                \"Showing All Stores\"}}</div>\r\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n                <div class=\"col-4 p-2\" style=\"border-radius: 12px; border: none;\"\r\n                    *ngFor=\"let ele of storesList; let i = index\">\r\n                    <div class=\"card-body p-4 h-100 position-relative\">\r\n                        <div class=\"d-flex justify-content-between align-items-start mb-3\">\r\n                            <div>\r\n                                <h5 class=\"card-title fw-bold mb-1\">{{ele?.name}}</h5>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"mb-3\">\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.address}},</p>\r\n                            <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.city}},\r\n                                {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},</p>\r\n                            <p class=\"mb-0\">Phone-<span\r\n                                    [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.phone}}</span></p>\r\n                        </div>\r\n                        <div class=\"mb-4\">\r\n                            <p class=\"mb-0\" [style.color]=\"data?.styles?.background?.accentColor\">STORE HOURS -\r\n                                {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n                            </p>\r\n                        </div>\r\n                        <div class=\"d-flex gap-3 align-items-center card-bottom\">\r\n                            <div class=\"rounded-circle d-flex align-items-center justify-content-center\"\r\n                                style=\"width: 40px; height: 30px; background-color: #25d366;\"\r\n                                (click)=\"openWhatsapp(ele?.phone)\">\r\n                                <i class=\"fab fa-whatsapp text-white fs-5\"></i>\r\n                            </div>\r\n                            <!-- <button class=\"btn flex-fill py-2 fw-semibold\"\r\n                            style=\"background-color: #e8e3ff; color: #6b46c1; border: none; border-radius: 25px;font-size: 12px !important;\">\r\n                            BOOK A VISIT\r\n                        </button> -->\r\n                            <button class=\"btn flex-fill py-2 fw-semibold text-white\"\r\n                                style=\"background: linear-gradient(135deg, #a855f7, #ec4899); border: none; border-radius: 25px;font-size: 12px !important;\"\r\n                                (click)=\"viewStore(ele.storeId)\">\r\n                                VIEW STORE\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <ng-template #loaderScreen>\r\n                <div class=\"row\">\r\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n                        <ngx-skeleton-loader class=\"col-4\" [theme]=\"{\r\n                width: '100%',\r\n                height: '40vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px}.location-container input{border:unset;appearance:unset;outline:unset;font-size:13px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{border:1px solid;border-radius:18px;height:100%}.cdk-virtual-scroll-viewport{display:unset}.cdk-virtual-scroll-content-wrapper{position:unset!important}.card-bottom{position:absolute;bottom:8px;left:25px;width:90%}.error-border{border:2px solid #dc3545!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -18030,6 +18046,9 @@ class StorePageComponent extends BaseSection {
         return "#ffffff;";
     }
     getTime(storeHours, type) {
+        if (storeHours == null) {
+            return;
+        }
         const today = new Date();
         const dayName = today.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
         for (let ele of storeHours) {
@@ -18048,7 +18067,8 @@ class StorePageComponent extends BaseSection {
     }
     openWhatsapp(phone) {
         if (phone) {
-            const whatsappUrl = `https://wa.me/${phone}`;
+            const message = encodeURIComponent('I want to visit your store');
+            const whatsappUrl = `https://wa.me/${phone}?text=${message}`;
             window.open(whatsappUrl, '_blank');
         }
     }
@@ -18056,7 +18076,7 @@ class StorePageComponent extends BaseSection {
         window.location.href = `tel:${phone}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorePageComponent, deps: [{ token: RestService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n        <div class=\"w-100 row\">\r\n            <div class=\"col-4\">\r\n                <img [src]=\"storeData?.images[0]\" alt=\"Image\" class=\"w-100 h-100\">\r\n            </div>\r\n            <div class=\"col-8 px-3\">\r\n                <div class=\"address-container\">\r\n                    <div class=\"d-flex align-items-start mb-4 p-2 mt-3 store-container\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <h2 class=\"store-name mb-2\">{{storeData?.name}}\r\n                            </h2>\r\n                            <p class=\"store-address mb-2\">{{storeData?.addressDetails?.address}}</p>\r\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n                                DIRECTIONS</a>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n                                (click)=\"openWhatsapp(storeData?.phone)\">\r\n                                <i class=\"fab fa-whatsapp\"></i>\r\n                            </button>\r\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.phone)\">\r\n                                <i class=\"fas fa-phone text-muted\"></i>\r\n                            </button>\r\n                            <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-4\">\r\n                        <h3 class=\"mb-3\">Facilities</h3>\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <div class=\"d-flex align-items-center gap-2 facility-text\">\r\n                                <i class=\"fas fa-clock text-purple\"></i>\r\n                                <span class=\"facility-text\"> {{getTime(storeData?.storeHours,'OPEN')}} to\r\n                                    {{getTime(storeData?.storeHours,'CLOSE')}}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"facility-text align-content-center\"\r\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <h3 class=\"mb-2\">Walk-In Services</h3>\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n                                    <p class=\"mb-2 text-hidden\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n                                    <p class=\"mb-0 text-hidden\">{{ele?.description}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n\r\n\r\n    </div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:2px 5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n        <div class=\"w-100 row\">\r\n            <div class=\"col-4\">\r\n                <img [src]=\"storeData?.images[0]\" alt=\"Image\" class=\"w-100 h-100\">\r\n            </div>\r\n            <div class=\"col-8 px-3\">\r\n                <div class=\"address-container\">\r\n                    <div class=\"d-flex align-items-start mb-4 p-2 mt-3 store-container\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <h2 class=\"store-name mb-2\">{{storeData?.name}}\r\n                            </h2>\r\n                            <p class=\"store-address mb-2\">{{storeData?.addressDetails?.address}}</p>\r\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n                                DIRECTIONS</a>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n                                (click)=\"openWhatsapp(storeData?.phone)\">\r\n                                <i class=\"fab fa-whatsapp\"></i>\r\n                            </button>\r\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.phone)\">\r\n                                <mat-icon> phone</mat-icon>\r\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-4\">\r\n                        <h3 class=\"mb-3\">Facilities</h3>\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <div class=\"d-flex align-items-center gap-2 facility-text\">\r\n                                <i class=\"fas fa-clock text-purple\"></i>\r\n                                <span class=\"facility-text\"> {{getTime(storeData?.storeHours,'OPEN')}} to\r\n                                    {{getTime(storeData?.storeHours,'CLOSE')}}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"facility-text align-content-center\"\r\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <h3 class=\"mb-2\">Walk-In Services</h3>\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n                                    <p class=\"mb-2 text-hidden\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n                                    <p class=\"mb-0 text-hidden\">{{ele?.description}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n\r\n\r\n    </div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:2px 5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorePageComponent, decorators: [{
             type: Component,
@@ -18072,8 +18092,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         HoverDirective,
                         ButtonDirectiveDirective,
                         ContentFitDirective,
-                        SpacingHorizontalDirective
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n        <div class=\"w-100 row\">\r\n            <div class=\"col-4\">\r\n                <img [src]=\"storeData?.images[0]\" alt=\"Image\" class=\"w-100 h-100\">\r\n            </div>\r\n            <div class=\"col-8 px-3\">\r\n                <div class=\"address-container\">\r\n                    <div class=\"d-flex align-items-start mb-4 p-2 mt-3 store-container\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <h2 class=\"store-name mb-2\">{{storeData?.name}}\r\n                            </h2>\r\n                            <p class=\"store-address mb-2\">{{storeData?.addressDetails?.address}}</p>\r\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n                                DIRECTIONS</a>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n                                (click)=\"openWhatsapp(storeData?.phone)\">\r\n                                <i class=\"fab fa-whatsapp\"></i>\r\n                            </button>\r\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.phone)\">\r\n                                <i class=\"fas fa-phone text-muted\"></i>\r\n                            </button>\r\n                            <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-4\">\r\n                        <h3 class=\"mb-3\">Facilities</h3>\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <div class=\"d-flex align-items-center gap-2 facility-text\">\r\n                                <i class=\"fas fa-clock text-purple\"></i>\r\n                                <span class=\"facility-text\"> {{getTime(storeData?.storeHours,'OPEN')}} to\r\n                                    {{getTime(storeData?.storeHours,'CLOSE')}}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"facility-text align-content-center\"\r\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <h3 class=\"mb-2\">Walk-In Services</h3>\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n                                    <p class=\"mb-2 text-hidden\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n                                    <p class=\"mb-0 text-hidden\">{{ele?.description}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n\r\n\r\n    </div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:2px 5px}\n"] }]
+                        SpacingHorizontalDirective,
+                        MatIcon
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n        <div class=\"w-100 row\">\r\n            <div class=\"col-4\">\r\n                <img [src]=\"storeData?.images[0]\" alt=\"Image\" class=\"w-100 h-100\">\r\n            </div>\r\n            <div class=\"col-8 px-3\">\r\n                <div class=\"address-container\">\r\n                    <div class=\"d-flex align-items-start mb-4 p-2 mt-3 store-container\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <h2 class=\"store-name mb-2\">{{storeData?.name}}\r\n                            </h2>\r\n                            <p class=\"store-address mb-2\">{{storeData?.addressDetails?.address}}</p>\r\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n                                DIRECTIONS</a>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n                                (click)=\"openWhatsapp(storeData?.phone)\">\r\n                                <i class=\"fab fa-whatsapp\"></i>\r\n                            </button>\r\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0\"\r\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.phone)\">\r\n                                <mat-icon> phone</mat-icon>\r\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-4\">\r\n                        <h3 class=\"mb-3\">Facilities</h3>\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <div class=\"d-flex align-items-center gap-2 facility-text\">\r\n                                <i class=\"fas fa-clock text-purple\"></i>\r\n                                <span class=\"facility-text\"> {{getTime(storeData?.storeHours,'OPEN')}} to\r\n                                    {{getTime(storeData?.storeHours,'CLOSE')}}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"facility-text align-content-center\"\r\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div>\r\n                        <h3 class=\"mb-2\">Walk-In Services</h3>\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n                                    <p class=\"mb-2 text-hidden\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n                                    <p class=\"mb-0 text-hidden\">{{ele?.description}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n\r\n\r\n    </div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:2px 5px}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], edit: [{