simpo-component-library 3.6.731 → 3.6.732

package/fesm2022/simpo-component-library.mjs

@@ -62,7 +62,7 @@ import moment from 'moment';
 import { isBlurhashValid, decode } from 'blurhash';
 import * as i3$1 from 'primeng/rating';
 import { RatingModule } from 'primeng/rating';
-import * as i15$1 from 'ngx-image-zoom';
+import * as i16 from 'ngx-image-zoom';
 import { NgxImageZoomModule } from 'ngx-image-zoom';
 import { SpeedDialModule } from 'primeng/speeddial';
 import * as i6$2 from 'primeng/progressbar';
@@ -3323,7 +3323,6 @@ class Product {
         this.varientId = json?.["itemId"];
         this.businessId = json?.["businessId"];
         this.name = json?.["name"];
-        this.slugifiedName = json?.["slugifiedName"];
         this.itemCategorisation = json?.["itemCategorisation"];
         this.itemInventory = json?.["itemInventory"];
         this.itemStatus = json?.["itemStatus"];
@@ -3438,7 +3437,7 @@ class RestService {
         let subIndustryId = this.storage.getItem("subIndustryId");
         if (!subIndustryId)
             subIndustryId = "";
-        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId}&isJewellery=false`).pipe(map((response) => response.data?.map((product) => new Product(product))));
+        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId}&isJewellery=${this.isJewellery}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
     }
     getCategoriesByCollectionId(collectionId) {
         return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
@@ -3478,18 +3477,6 @@ class RestService {
         };
         return this.http.put(this.BASE_URL + `ecommerce/product/item/search?isJewellery=${this.isJewellery}`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
     }
-    getProductDetailsV2(slugName = null) {
-        this.getBusinessDetails();
-        const payload = {
-            pageNo: 0,
-            pageSize: 1,
-            slugifiedName: slugName,
-            subIndustryId: this.storage.getItem("subIndustryId"),
-            userId: this.storage.getItem("perId") ?? null,
-            request: "USER"
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/itemV2/search?isJewellery=${this.isJewellery}`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
-    }
     getCollectionByIds(collectionIds) {
         const payload = {
             ids: collectionIds
@@ -10253,9 +10240,7 @@ class AuthenticationRequiredComponent extends BaseSection {
     isEmailValid() {
         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
         this.emailCheck = !emailRegex.test(this.email);
-        const mobileRegex = /^[6-9]\d{9}$/;
-        this.mobileCheck = !mobileRegex.test(this.mobile);
-        return emailRegex.test(this.email) || mobileRegex.test(this.mobile);
+        return emailRegex.test(this.email);
     }
     onPasswordChange() {
         clearTimeout(this.passwordDebounceTimer);
@@ -10336,7 +10321,7 @@ class AuthenticationRequiredComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"area w-100\">\r\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n        </ul>\r\n      </div>\r\n      <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\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  <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</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email/Mobile</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com / 9876543210\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n        contain 1 Uppercase , 1\r\n        Lowercase , 1 Special\r\n        Character , 1 Digit and Minimum 8 Characters*</span>\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n      Forgot Password?</div> -->\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\" login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"getOTP()\">Generate Otp</button> -->\r\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n        <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n      </div>\r\n      <div class=\" input-box position-relative\">\r\n        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\r\n        </div>\r\n        <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n          Lowercase , 1 Special\r\n          Character , 1 Digit and Minimum 8 Characters*</span>\r\n        <!-- <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div> -->\r\n      </div>\r\n    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button> -->\r\n    <!-- <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      *ngIf=\"buttonLoading\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email or Phone number</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n    </div>\r\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Submit</button>\r\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"area w-100\">\r\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n        </ul>\r\n      </div>\r\n      <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\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  <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</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n        contain 1 Uppercase , 1\r\n        Lowercase , 1 Special\r\n        Character , 1 Digit and Minimum 8 Characters*</span>\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n      Forgot Password?</div> -->\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\" login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"getOTP()\">Generate Otp</button> -->\r\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n        <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n      </div>\r\n      <div class=\" input-box position-relative\">\r\n        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\r\n        </div>\r\n        <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n          Lowercase , 1 Special\r\n          Character , 1 Digit and Minimum 8 Characters*</span>\r\n        <!-- <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div> -->\r\n      </div>\r\n    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button> -->\r\n    <!-- <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      *ngIf=\"buttonLoading\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email or Phone number</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n    </div>\r\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Submit</button>\r\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
@@ -10358,7 +10343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         OverlayDirective,
                         SpacingAroundDirective,
                         ButtonEditorDirective
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"area w-100\">\r\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n        </ul>\r\n      </div>\r\n      <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\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  <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</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email/Mobile</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com / 9876543210\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n        contain 1 Uppercase , 1\r\n        Lowercase , 1 Special\r\n        Character , 1 Digit and Minimum 8 Characters*</span>\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n      Forgot Password?</div> -->\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\" login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"getOTP()\">Generate Otp</button> -->\r\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n        <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n      </div>\r\n      <div class=\" input-box position-relative\">\r\n        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\r\n        </div>\r\n        <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n          Lowercase , 1 Special\r\n          Character , 1 Digit and Minimum 8 Characters*</span>\r\n        <!-- <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div> -->\r\n      </div>\r\n    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button> -->\r\n    <!-- <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      *ngIf=\"buttonLoading\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email or Phone number</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n    </div>\r\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Submit</button>\r\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"area w-100\">\r\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n        </ul>\r\n      </div>\r\n      <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\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  <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</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n        contain 1 Uppercase , 1\r\n        Lowercase , 1 Special\r\n        Character , 1 Digit and Minimum 8 Characters*</span>\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n      Forgot Password?</div> -->\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\" login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"getOTP()\">Generate Otp</button> -->\r\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n        <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n      </div>\r\n      <div class=\" input-box position-relative\">\r\n        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\r\n        </div>\r\n        <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n          Lowercase , 1 Special\r\n          Character , 1 Digit and Minimum 8 Characters*</span>\r\n        <!-- <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div> -->\r\n      </div>\r\n    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button> -->\r\n    <!-- <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      *ngIf=\"buttonLoading\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email or Phone number</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n    </div>\r\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Submit</button>\r\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: i8$3.MatBottomSheetRef, decorators: [{
@@ -10739,7 +10724,7 @@ class ContactUsComponent extends BaseSection {
         return this.styles?.layout?.align === 'left' ? 'justify-content-start' : this.styles?.layout?.align === 'right' ? 'justify-content-end' : 'justify-content-center';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n      <div *ngIf=\"!content?.image?.showImage\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n            [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n            <div class=\"d-flex flex-column col-5 content-side\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                  [feild]=\"feild\"\r\n                  [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n                  [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                <!-- *ngIf=\"shouldShowDropdown(feild)\" -->\r\n              </ng-container>\r\n              <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n                <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                  [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n                  <div>{{button?.content?.label}}</div>\r\n                  <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n                                                 'background': button?.styles?.textColor,\r\n                                                 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n                                                 'mask-repeat': 'no-repeat',\r\n                                                 'mask-size': 'cover',\r\n                                                 'width': '25px',\r\n                                                 'height': '25px',\r\n                                                                    }\">\r\n                  </div>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.layout?.fit !== 'screen' && (styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'), 'align-items-center text-center': styles?.layout?.fit !== 'screen' && styles?.positionLayout?.value === 'top'}\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n            [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n            <div class=\"d-flex flex-column content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <ng-container *ngIf=\"feild.options?.length != 0\">\r\n                  <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                    [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n              <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n                [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n                <div>{{button?.content?.label}}</div>\r\n                <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n    'background': button?.styles?.textColor,\r\n    'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n    'mask-repeat': 'no-repeat',\r\n    'mask-size': 'cover',\r\n    'width': '25px',\r\n    'height': '25px',\r\n  }\">\r\n                </div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n      <div *ngIf=\"!content?.image?.showImage\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n            [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n            <div class=\"d-flex flex-column col-5 content-side\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                  [feild]=\"feild\"\r\n                  [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n                  [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                  <!-- *ngIf=\"shouldShowDropdown(feild)\" -->\r\n              </ng-container>\r\n              <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n                <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                  [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n                  <div>{{button?.content?.label}}</div>\r\n                  <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n                                                 'background': button?.styles?.textColor,\r\n                                                 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n                                                 'mask-repeat': 'no-repeat',\r\n                                                 'mask-size': 'cover',\r\n                                                 'width': '25px',\r\n                                                 'height': '25px',\r\n                                                                    }\">\r\n                  </div>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n            [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n            <div class=\"d-flex flex-column content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <ng-container *ngIf=\"feild.options?.length != 0\">\r\n                  <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                    [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n              <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n                [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n                <div>{{button?.content?.label}}</div>\r\n                <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n    'background': button?.styles?.textColor,\r\n    'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n    'mask-repeat': 'no-repeat',\r\n    'mask-size': 'cover',\r\n    'width': '25px',\r\n    'height': '25px',\r\n  }\">\r\n                </div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
 }
@@ -10778,7 +10763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SimpoContainerAligment,
                         ButtonEditorDirective,
                         ImageEditorDirective
-                    ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n      <div *ngIf=\"!content?.image?.showImage\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n            [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n            <div class=\"d-flex flex-column col-5 content-side\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                  [feild]=\"feild\"\r\n                  [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n                  [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                <!-- *ngIf=\"shouldShowDropdown(feild)\" -->\r\n              </ng-container>\r\n              <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n                <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                  [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n                  <div>{{button?.content?.label}}</div>\r\n                  <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n                                                 'background': button?.styles?.textColor,\r\n                                                 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n                                                 'mask-repeat': 'no-repeat',\r\n                                                 'mask-size': 'cover',\r\n                                                 'width': '25px',\r\n                                                 'height': '25px',\r\n                                                                    }\">\r\n                  </div>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.layout?.fit !== 'screen' && (styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'), 'align-items-center text-center': styles?.layout?.fit !== 'screen' && styles?.positionLayout?.value === 'top'}\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n            [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n            <div class=\"d-flex flex-column content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <ng-container *ngIf=\"feild.options?.length != 0\">\r\n                  <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                    [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n              <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n                [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n                <div>{{button?.content?.label}}</div>\r\n                <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n    'background': button?.styles?.textColor,\r\n    'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n    'mask-repeat': 'no-repeat',\r\n    'mask-size': 'cover',\r\n    'width': '25px',\r\n    'height': '25px',\r\n  }\">\r\n                </div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n    <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n      <div *ngIf=\"!content?.image?.showImage\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n            [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n            <div class=\"d-flex flex-column col-5 content-side\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n              [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                  [feild]=\"feild\"\r\n                  [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n                  [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                  <!-- *ngIf=\"shouldShowDropdown(feild)\" -->\r\n              </ng-container>\r\n              <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n                <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                  simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                  [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n                  <div>{{button?.content?.label}}</div>\r\n                  <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n                                                 'background': button?.styles?.textColor,\r\n                                                 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n                                                 'mask-repeat': 'no-repeat',\r\n                                                 'mask-size': 'cover',\r\n                                                 'width': '25px',\r\n                                                 'height': '25px',\r\n                                                                    }\">\r\n                  </div>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n        [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n            [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n            <div class=\"d-flex flex-column content-side\">\r\n              <div *ngFor=\"let item of content?.inputText\"\r\n                [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n              <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                <ng-container *ngIf=\"feild.options?.length != 0\">\r\n                  <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n                    [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n              <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n                [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n                [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n                <div>{{button?.content?.label}}</div>\r\n                <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n    'background': button?.styles?.textColor,\r\n    'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n    'mask-repeat': 'no-repeat',\r\n    'mask-size': 'cover',\r\n    'width': '25px',\r\n    'height': '25px',\r\n  }\">\r\n                </div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -16711,7 +16696,7 @@ class NewTestimonialsComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n                        [simpoAnimation]=\"styles?.animation\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\" [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex gap-2\">\r\n                            <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                <mat-icon>keyboard_arrow_left</mat-icon>\r\n                            </div>\r\n\r\n                            <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                <mat-icon>keyboard_arrow_right</mat-icon>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\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\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n                        [simpoAnimation]=\"styles?.animation\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex gap-2\">\r\n                            <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                <mat-icon>keyboard_arrow_left</mat-icon>\r\n                            </div>\r\n\r\n                            <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                <mat-icon>keyboard_arrow_right</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\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\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 // directives
                 SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: 
                 // components
@@ -16748,7 +16733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         SimpoButtonComponent,
                         ImageEditorDirective,
-                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n                        [simpoAnimation]=\"styles?.animation\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\" [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex gap-2\">\r\n                            <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                <mat-icon>keyboard_arrow_left</mat-icon>\r\n                            </div>\r\n\r\n                            <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                <mat-icon>keyboard_arrow_right</mat-icon>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\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\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
+                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n        <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n                [id]=\"data?.id\">\r\n                <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </ng-container>\r\n                </div>\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n                        [simpoAnimation]=\"styles?.animation\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                    [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n                    [class.flex-column]=\"screenWidth < 475\">\r\n                    <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n                        [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\"\r\n                        [simpoCorner]=\"styles?.corners\">\r\n                        <ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n                                <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    [simpoCorner]=\"styles?.corners\">\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n                                <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                                    [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n                                    controls></video>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div id=\"carouselExampleIndicators\" data-bs-keyboard=\"false\"\r\n                        class=\"carousel slide w-65 d-flex flex-column\"\r\n                        [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                        <div class=\"carousel-inner overflow-unset\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n                            <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n                                    <div class=\"quote-image mb-2\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n                                            viewBox=\"0 0 36 31\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n                                                [attr.fill]=\"styles?.background?.accentColor\" />\r\n                                        </svg>\r\n                                    </div>\r\n                                    <div class=\"item mb-3\">\r\n                                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"prev-next d-flex gap-2\">\r\n                            <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n                                <mat-icon>keyboard_arrow_left</mat-icon>\r\n                            </div>\r\n\r\n                            <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                                data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                                (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n                                <mat-icon>keyboard_arrow_right</mat-icon>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\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\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{width:100%}.overflow-visible{overflow:visible!important}.overflow-unset{overflow:unset!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -18011,7 +17996,7 @@ class FeaturedProductsComponent extends BaseSection {
             this.changeDetailProduct.emit(product);
         }
         else {
-            this.router.navigate(['details', product.slugifiedName], {});
+            this.router.navigate([`details`], { queryParams: { id: product.itemId, varientId: product.varientId } });
         }
     }
     isItemOutOfStock(product) {
@@ -18453,8 +18438,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+class AnalyticsService {
+    constructor(http, platformId, document, storageService, API_URL, storage, router) {
+        this.http = http;
+        this.platformId = platformId;
+        this.document = document;
+        this.storageService = storageService;
+        this.API_URL = API_URL;
+        this.storage = storage;
+        this.router = router;
+        this.eventQueue = [];
+        this.BATCH_SIZE = 10;
+        this.FLUSH_INTERVAL = 5000; // 5 seconds
+        // ===== Duration Tracking =====
+        this.currentPage = '';
+        this.currentContextMetadata = null;
+        this.contextStartTime = null;
+        this.contextActiveTime = 0;
+        this.currentEvent = '';
+        this.startAutoFlush();
+        this.listenToUnload();
+        this.listenToRouteChange();
+    }
+    startNewContext(metadata, event) {
+        this.closeCurrentContext(); // close previous filter session
+        this.currentContextMetadata = metadata;
+        this.contextStartTime = Date.now();
+        this.contextActiveTime = 0;
+        this.currentEvent = event;
+    }
+    getCurrentContext() {
+        return this.currentContextMetadata;
+    }
+    closeCurrentContext(useBeacon = false) {
+        if (!this.currentContextMetadata)
+            return;
+        if (this.contextStartTime) {
+            this.contextActiveTime += Date.now() - this.contextStartTime;
+        }
+        const user = this.storageService.getUser();
+        const requestFrom = this.storage.getItem('REQUEST_FROM');
+        if (!user || requestFrom === 'ECOMMERCE')
+            return;
+        const event = {
+            businessId: this.storage.getItem('bId') || '',
+            businessName: this.storage.getItem('bName') || '',
+            userId: user.userId,
+            createdTimeStamp: new Date().toISOString(),
+            page: this.currentPage,
+            duration: this.contextActiveTime,
+            eventType: this.currentEvent,
+            metadata: this.currentContextMetadata
+        };
+        if (useBeacon) {
+            fetch(this.API_URL + 'ecommerce/analytics/batch', {
+                method: 'POST',
+                body: JSON.stringify([event]),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                keepalive: true
+            });
+        }
+        else {
+            this.eventQueue.push(event);
+        }
+        this.currentContextMetadata = null;
+        this.contextStartTime = null;
+        this.contextActiveTime = 0;
+        this.currentEvent = '';
+    }
+    // ===============================
+    // 🔥 ROUTE CHANGE LISTENER
+    // ===============================
+    listenToRouteChange() {
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                // Close previous page context
+                this.closeCurrentContext();
+                this.currentPage = this.router.url.split('?')[0];
+                this.contextStartTime = Date.now();
+                this.contextActiveTime = 0;
+            }
+        });
+    }
+    trackUser(event, eventType) {
+        const user = this.storageService.getUser();
+        const requestFrom = this.storage.getItem('REQUEST_FROM');
+        if (user === null || requestFrom === 'ECOMMERCE') {
+            return;
+        }
+        const page = this.router.url.split('?')[0];
+        this.eventQueue.push({
+            businessId: this.storage.getItem('bId') || '',
+            businessName: this.storage.getItem('bName') || '',
+            userId: user?.userId,
+            createdTimeStamp: new Date().toISOString(),
+            page: page,
+            metadata: event,
+            eventType: eventType
+        });
+        if (this.eventQueue.length >= this.BATCH_SIZE) {
+            this.flush();
+        }
+    }
+    startAutoFlush() {
+        interval(this.FLUSH_INTERVAL).subscribe(() => {
+            if (this.eventQueue.length > 0) {
+                this.flush();
+            }
+        });
+    }
+    flush() {
+        const eventsToSend = [...this.eventQueue];
+        this.eventQueue = [];
+        this.http.post(this.API_URL + 'ecommerce/analytics/batch', eventsToSend)
+            .subscribe({ error: () => { } });
+    }
+    listenToUnload() {
+        this.document.addEventListener('visibilitychange', () => {
+            if (this.document.visibilityState === 'visible') {
+                this.contextStartTime = Date.now();
+            }
+            else {
+                if (this.contextStartTime) {
+                    this.contextActiveTime += Date.now() - this.contextStartTime;
+                }
+                this.closeCurrentContext(true);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, deps: [{ token: i1.HttpClient }, { token: PLATFORM_ID }, { token: DOCUMENT }, { token: StorageServiceService }, { token: API_URL }, { token: LOCAL_STORAGE }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: StorageServiceService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_URL]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }, { type: i2$2.Router }] });
+
 class ProductDescComponent extends BaseSection {
-    constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog) {
+    constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService, messageService, metaTagService, titleService, bottomSheet, renderer, matDialog, analyticsService) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
@@ -18469,6 +18604,7 @@ class ProductDescComponent extends BaseSection {
         this.bottomSheet = bottomSheet;
         this.renderer = renderer;
         this.matDialog = matDialog;
+        this.analyticsService = analyticsService;
         this.isLoading = false;
         this.featureProductData = null;
         this.recentViewedData = null;
@@ -18582,21 +18718,16 @@ class ProductDescComponent extends BaseSection {
             this.isLoading = response;
         });
         this.IsEcommerce = localStorage.getItem("websiteType") != 'STATIC' ? true : false;
-        this.activatedRoute.url.subscribe(() => {
-            const currentUrl = window.location.pathname || '';
-            const cleanUrl = currentUrl.split('?')[0].split('#')[0];
-            const segments = cleanUrl.split('/').filter(Boolean).map((segment) => decodeURIComponent(segment));
-            const detailsIndex = segments.findIndex((segment) => segment === 'details');
-            const slugName = detailsIndex >= 0 ? segments[detailsIndex + 1] : undefined;
-            const routeVarientId = detailsIndex >= 0 ? segments[detailsIndex + 2] : undefined;
-            if (slugName) {
+        this.activatedRoute.queryParams.subscribe((qParam) => {
+            const productId = qParam["id"];
+            if (productId) {
                 this.isLoading = true;
                 // Tracking Analytics
-                // this.analyticsService.startNewContext({
-                //   'PRODUCT_ID': slugName
-                // }, 'PRODUCT_VIEW')
+                this.analyticsService.startNewContext({
+                    'PRODUCT_ID': productId
+                }, 'PRODUCT_VIEW');
                 this.isItemAsFavorite = false;
-                this.restService.getProductDetailsV2(slugName).subscribe((response) => {
+                this.restService.getProductDetails(productId).subscribe((response) => {
                     this.isLoading = false;
                     this.responseData = response[0];
                     this.responseData?.itemVariant.forEach((varient, idx) => {
@@ -18623,7 +18754,7 @@ class ProductDescComponent extends BaseSection {
                             cartResponse.onsuccess = (cartData) => {
                                 this.USER_CART = cartData.target.result;
                                 this.USER_CART?.forEach((item) => {
-                                    if (item.itemId == this.responseData?.itemId) {
+                                    if (item.itemId == productId) {
                                         if (this.responseData?.itemVariant?.length > 0) {
                                             if (itemVariant && item.varientId == itemVariant.variantId) {
                                                 itemVariant.quantity = item.quantity;
@@ -18641,7 +18772,7 @@ class ProductDescComponent extends BaseSection {
                             wishlistResponse.onsuccess = (whislistData) => {
                                 this.USER_WISHLIST = whislistData.target.result;
                                 this.USER_WISHLIST?.forEach((item) => {
-                                    if (item.itemId == this.responseData?.itemId) {
+                                    if (item.itemId == productId) {
                                         if (this.responseData?.itemVariant?.length > 0) {
                                             const itemVariant = this.getItemVarient();
                                             if (itemVariant && itemVariant.variantId == item.varientId) {
@@ -18914,7 +19045,7 @@ class ProductDescComponent extends BaseSection {
         });
     }
     changeProduct(product) {
-        this.router.navigate(['/details', product.slugifiedName, product.varientId]);
+        this.router.navigate(['/details'], { queryParams: { id: product.itemId } });
         document.body.scrollTop = 0;
         document.documentElement.scrollTop = 0;
     }
@@ -19323,8 +19454,8 @@ class ProductDescComponent extends BaseSection {
         currentDate.setDate(currentDate.getDate() + (this.ecomConfigs?.expectedDeliveryDate ?? 7));
         return currentDate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], 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  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\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 m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\r\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\r\n          <div class=\"h-100 d-flex flex-column flex-lg-column-reverse justify-content-start gap-1\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\r\n          <div class=\"product-hero-card-modern\">\r\n            <ng-container *ngIf=\"isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.appointmentBookingEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.appointmentBookingEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <!-- Moved descriptors to Details tab below -->\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <!-- Moved tags to Details tab below -->\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      <!-- Tabs Navigation -->\r\n      <div class=\"product-tabs-container\">\r\n        <ul class=\"tabs-list\">\r\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\r\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Details')\">Details</li>\r\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\r\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Reviews')\">Reviews</li>\r\n        </ul>\r\n      </div>\r\n\r\n      <!-- Tab Content -->\r\n      <div class=\"tab-content-pane\">\r\n        <div *ngIf=\"activeTab == 'Details'\">\r\n          <div [innerHTML]=\"responseData?.brief | sanitizeHtml\" class=\"mt-2 text-justify line-height-24 font-14\"></div>\r\n\r\n          <!-- Integrated descriptors and tags here -->\r\n          <div class=\"mt-2\">\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'Reviews'\">\r\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></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  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\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\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(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\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\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\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    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\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\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\r\n      <mat-icon [style.color]=\"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-3\">\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\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-semibold\">\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=\"product-info-minimal\">\r\n    <!-- Title and Price Row -->\r\n    <div class=\"title-price-row-modern\">\r\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\r\n      <div class=\"product-price-modern\">\r\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Rating Row -->\r\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\r\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n      <span class=\"separator\">|</span>\r\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\r\n        {{responseData?.totalReviewCount}} reviews</span>\r\n    </div>\r\n\r\n    <!-- Brief Description -->\r\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">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          <mat-icon>add</mat-icon> 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 | sanitizeHtml\"\r\n          [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                {{ele?.materialName | 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 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\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 && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\r\n      <div class=\"main-image-container p-0\">\r\n        <div class=\"item-img rounded-3\">\r\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n            [magnification]=\"2\" [enableScrollZoom]=\"true\">\r\n          </lib-ngx-image-zoom>\r\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\r\n            class=\"w-100 h-100 object-fit-cover\">\r\n        </div>\r\n      </div>\r\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\r\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\r\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\r\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"bento-masonry-container\">\r\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\" [class.featured]=\"i === 0\">\r\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\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    }\">\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 rounded-circle\">\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\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\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        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\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\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section mb-2\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\r\n            style=\"width: 100%;\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\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 d-flex align-items-center\">\r\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\r\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\r\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\r\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\r\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\r\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\r\n            </svg>\r\n          </span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\r\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            expected Order will\r\n            Deliver by {{ getDateAfterxDays() | 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    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #TryAtHome>\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 d-flex align-items-center\">\r\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\r\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n        </svg>\r\n      </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=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></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\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n        HOME</button>\r\n      <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #StoreSection>\r\n  <!-- Nearest Store Section -->\r\n  <ng-container\r\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0;else emptyStore\">\r\n    <div class=\"store-section\">\r\n      <div class=\"d-flex align-items-center store-item\">\r\n        <span class=\"store-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </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?.storeName | 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 w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\r\n          STORE</button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #emptyStore>\r\n    <div class=\"delivery-section\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <span class=\"delivery-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <span class=\"delivery-text\">No Stores are available</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\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 fs-5\">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]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\r\n          [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=\"varient-data\">\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    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\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          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\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\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-0\">\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\" [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              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\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-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">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 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</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>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\r\n\r\n    <!-- Header: Title + Average | Bar Chart -->\r\n    <div class=\"rv-header\">\r\n      <div class=\"rv-header-left\">\r\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\r\n        <div class=\"rv-average-row\">\r\n          <!-- filled stars -->\r\n          <div class=\"rv-stars\">\r\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                  fill=\"#eab308\" />\r\n              </svg>\r\n            </ng-container>\r\n          </div>\r\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n          <span class=\"rv-avg-label\">average</span>\r\n        </div>\r\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\r\n          {{responseData?.totalReviewCount | number}} Reviews\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"rv-bars\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"rv-bar-row\">\r\n            <span class=\"rv-bar-label\">{{rating}}</span>\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                fill=\"#eab308\" />\r\n            </svg>\r\n            <div class=\"rv-bar-track\">\r\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Cards Grid -->\r\n    <div class=\"rv-grid\">\r\n      <ng-container *ngFor=\"let review of reviewsData\">\r\n        <ng-container *ngIf=\"review.review\">\r\n          <div class=\"rv-card\">\r\n            <div class=\"rv-card-top\">\r\n              <div class=\"rv-reviewer\">\r\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\r\n                  class=\"rv-avatar\" alt=\"\">\r\n                <div class=\"rv-name-date\">\r\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\r\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\r\n                </div>\r\n              </div>\r\n              <!-- Star rating -->\r\n              <div class=\"rv-card-stars\">\r\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\r\n                    <path\r\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\r\n\r\n            <!-- Review Images -->\r\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\r\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\r\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\r\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:40px;width:40px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top: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{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.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}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.total-container,.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:600px;margin:0 auto;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:block;column-count:2;column-gap:20px;width:100%}.bento-item-modern{break-inside:avoid;margin-bottom:20px;border-radius:24px;overflow:hidden;background:#fdfdfd;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-item-modern.featured{margin-bottom:25px;border-radius:28px}.bento-img-modern{width:100%;height:auto;max-height:500px;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-5px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{column-count:1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column;gap:1rem}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}\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.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: i15$1.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.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: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }, { token: AnalyticsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], 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  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\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 m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\r\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\r\n          <div class=\"h-100 d-flex flex-column flex-lg-column-reverse justify-content-start gap-1\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\r\n          <div class=\"product-hero-card-modern\">\r\n            <ng-container *ngIf=\"isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.appointmentBookingEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.appointmentBookingEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <!-- Moved descriptors to Details tab below -->\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <!-- Moved tags to Details tab below -->\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      <!-- Tabs Navigation -->\r\n      <div class=\"product-tabs-container\">\r\n        <ul class=\"tabs-list\">\r\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\r\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Details')\">Details</li>\r\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\r\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Reviews')\">Reviews</li>\r\n        </ul>\r\n      </div>\r\n\r\n      <!-- Tab Content -->\r\n      <div class=\"tab-content-pane\">\r\n        <div *ngIf=\"activeTab == 'Details'\">\r\n          <div [innerHTML]=\"responseData?.brief | sanitizeHtml\" class=\"mt-2 text-justify line-height-24 font-14\"></div>\r\n\r\n          <!-- Integrated descriptors and tags here -->\r\n          <div class=\"mt-2\">\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'Reviews'\">\r\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></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  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\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\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(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\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\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\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    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\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\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\r\n      <mat-icon [style.color]=\"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-3\">\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\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-semibold\">\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=\"product-info-minimal\">\r\n    <!-- Title and Price Row -->\r\n    <div class=\"title-price-row-modern\">\r\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\r\n      <div class=\"product-price-modern\">\r\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Rating Row -->\r\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\r\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n      <span class=\"separator\">|</span>\r\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\r\n        {{responseData?.totalReviewCount}} reviews</span>\r\n    </div>\r\n\r\n    <!-- Brief Description -->\r\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">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          <mat-icon>add</mat-icon> 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 | sanitizeHtml\"\r\n          [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                {{ele?.materialName | 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 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\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 && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\r\n      <div class=\"main-image-container p-0\">\r\n        <div class=\"item-img rounded-3\">\r\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n            [magnification]=\"2\" [enableScrollZoom]=\"true\">\r\n          </lib-ngx-image-zoom>\r\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\r\n            class=\"w-100 h-100 object-fit-cover\">\r\n        </div>\r\n      </div>\r\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\r\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\r\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\r\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"bento-masonry-container\">\r\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\" [class.featured]=\"i === 0\">\r\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\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    }\">\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 rounded-circle\">\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\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\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        <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\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\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section mb-2\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\r\n            style=\"width: 100%;\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\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 d-flex align-items-center\">\r\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\r\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\r\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\r\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\r\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\r\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\r\n            </svg>\r\n          </span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\r\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            expected Order will\r\n            Deliver by {{ getDateAfterxDays() | 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    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #TryAtHome>\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 d-flex align-items-center\">\r\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\r\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n        </svg>\r\n      </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=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></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\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n        HOME</button>\r\n      <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #StoreSection>\r\n  <!-- Nearest Store Section -->\r\n  <ng-container\r\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0;else emptyStore\">\r\n    <div class=\"store-section\">\r\n      <div class=\"d-flex align-items-center store-item\">\r\n        <span class=\"store-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </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?.storeName | 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 w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\r\n          STORE</button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #emptyStore>\r\n    <div class=\"delivery-section\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <span class=\"delivery-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <span class=\"delivery-text\">No Stores are available</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\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 fs-5\">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]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\r\n          [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=\"varient-data\">\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    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\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          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\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\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-0\">\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\" [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              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\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-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">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 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</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>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\r\n\r\n    <!-- Header: Title + Average | Bar Chart -->\r\n    <div class=\"rv-header\">\r\n      <div class=\"rv-header-left\">\r\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\r\n        <div class=\"rv-average-row\">\r\n          <!-- filled stars -->\r\n          <div class=\"rv-stars\">\r\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                  fill=\"#eab308\" />\r\n              </svg>\r\n            </ng-container>\r\n          </div>\r\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n          <span class=\"rv-avg-label\">average</span>\r\n        </div>\r\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\r\n          {{responseData?.totalReviewCount | number}} Reviews\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"rv-bars\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"rv-bar-row\">\r\n            <span class=\"rv-bar-label\">{{rating}}</span>\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                fill=\"#eab308\" />\r\n            </svg>\r\n            <div class=\"rv-bar-track\">\r\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Cards Grid -->\r\n    <div class=\"rv-grid\">\r\n      <ng-container *ngFor=\"let review of reviewsData\">\r\n        <ng-container *ngIf=\"review.review\">\r\n          <div class=\"rv-card\">\r\n            <div class=\"rv-card-top\">\r\n              <div class=\"rv-reviewer\">\r\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\r\n                  class=\"rv-avatar\" alt=\"\">\r\n                <div class=\"rv-name-date\">\r\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\r\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\r\n                </div>\r\n              </div>\r\n              <!-- Star rating -->\r\n              <div class=\"rv-card-stars\">\r\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\r\n                    <path\r\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\r\n\r\n            <!-- Review Images -->\r\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\r\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\r\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\r\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:40px;width:40px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top: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{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.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}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.total-container,.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:600px;margin:0 auto;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:block;column-count:2;column-gap:20px;width:100%}.bento-item-modern{break-inside:avoid;margin-bottom:20px;border-radius:24px;overflow:hidden;background:#fdfdfd;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-item-modern.featured{margin-bottom:25px;border-radius:28px}.bento-img-modern{width:100%;height:auto;max-height:500px;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-5px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{column-count:1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column;gap:1rem}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}\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.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: i16.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.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: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -19360,7 +19491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }], propDecorators: { reviewComponent: [{
+                }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }, { type: AnalyticsService }], propDecorators: { reviewComponent: [{
                 type: ViewChild,
                 args: [CustomerReviewComponent, { static: false }]
             }], aboveHeight: [{
@@ -19427,156 +19558,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class AnalyticsService {
-    constructor(http, platformId, document, storageService, API_URL, storage, router) {
-        this.http = http;
-        this.platformId = platformId;
-        this.document = document;
-        this.storageService = storageService;
-        this.API_URL = API_URL;
-        this.storage = storage;
-        this.router = router;
-        this.eventQueue = [];
-        this.BATCH_SIZE = 10;
-        this.FLUSH_INTERVAL = 5000; // 5 seconds
-        // ===== Duration Tracking =====
-        this.currentPage = '';
-        this.currentContextMetadata = null;
-        this.contextStartTime = null;
-        this.contextActiveTime = 0;
-        this.currentEvent = '';
-        this.startAutoFlush();
-        this.listenToUnload();
-        this.listenToRouteChange();
-    }
-    startNewContext(metadata, event) {
-        this.closeCurrentContext(); // close previous filter session
-        this.currentContextMetadata = metadata;
-        this.contextStartTime = Date.now();
-        this.contextActiveTime = 0;
-        this.currentEvent = event;
-    }
-    getCurrentContext() {
-        return this.currentContextMetadata;
-    }
-    closeCurrentContext(useBeacon = false) {
-        if (!this.currentContextMetadata)
-            return;
-        if (this.contextStartTime) {
-            this.contextActiveTime += Date.now() - this.contextStartTime;
-        }
-        const user = this.storageService.getUser();
-        const requestFrom = this.storage.getItem('REQUEST_FROM');
-        if (!user || requestFrom === 'ECOMMERCE')
-            return;
-        const event = {
-            businessId: this.storage.getItem('bId') || '',
-            businessName: this.storage.getItem('bName') || '',
-            userId: user.userId,
-            createdTimeStamp: new Date().toISOString(),
-            page: this.currentPage,
-            duration: this.contextActiveTime,
-            eventType: this.currentEvent,
-            metadata: this.currentContextMetadata
-        };
-        if (useBeacon) {
-            fetch(this.API_URL + 'ecommerce/analytics/batch', {
-                method: 'POST',
-                body: JSON.stringify([event]),
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                keepalive: true
-            });
-        }
-        else {
-            this.eventQueue.push(event);
-        }
-        this.currentContextMetadata = null;
-        this.contextStartTime = null;
-        this.contextActiveTime = 0;
-        this.currentEvent = '';
-    }
-    // ===============================
-    // 🔥 ROUTE CHANGE LISTENER
-    // ===============================
-    listenToRouteChange() {
-        this.router.events.subscribe(event => {
-            if (event instanceof NavigationEnd) {
-                // Close previous page context
-                this.closeCurrentContext();
-                this.currentPage = this.router.url.split('?')[0];
-                this.contextStartTime = Date.now();
-                this.contextActiveTime = 0;
-            }
-        });
-    }
-    trackUser(event, eventType) {
-        const user = this.storageService.getUser();
-        const requestFrom = this.storage.getItem('REQUEST_FROM');
-        if (user === null || requestFrom === 'ECOMMERCE') {
-            return;
-        }
-        const page = this.router.url.split('?')[0];
-        this.eventQueue.push({
-            businessId: this.storage.getItem('bId') || '',
-            businessName: this.storage.getItem('bName') || '',
-            userId: user?.userId,
-            createdTimeStamp: new Date().toISOString(),
-            page: page,
-            metadata: event,
-            eventType: eventType
-        });
-        if (this.eventQueue.length >= this.BATCH_SIZE) {
-            this.flush();
-        }
-    }
-    startAutoFlush() {
-        interval(this.FLUSH_INTERVAL).subscribe(() => {
-            if (this.eventQueue.length > 0) {
-                this.flush();
-            }
-        });
-    }
-    flush() {
-        const eventsToSend = [...this.eventQueue];
-        this.eventQueue = [];
-        this.http.post(this.API_URL + 'ecommerce/analytics/batch', eventsToSend)
-            .subscribe({ error: () => { } });
-    }
-    listenToUnload() {
-        this.document.addEventListener('visibilitychange', () => {
-            if (this.document.visibilityState === 'visible') {
-                this.contextStartTime = Date.now();
-            }
-            else {
-                if (this.contextStartTime) {
-                    this.contextActiveTime += Date.now() - this.contextStartTime;
-                }
-                this.closeCurrentContext(true);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, deps: [{ token: i1.HttpClient }, { token: PLATFORM_ID }, { token: DOCUMENT }, { token: StorageServiceService }, { token: API_URL }, { token: LOCAL_STORAGE }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnalyticsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: StorageServiceService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [API_URL]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCAL_STORAGE]
-                }] }, { type: i2$2.Router }] });
-
 class ProductListComponent extends BaseSection {
     getScreenSize() {
         this.screenWidth = window.innerWidth;
@@ -19857,21 +19838,22 @@ class ProductListComponent extends BaseSection {
         const el = this.listScrollContainer?.nativeElement;
         if (!el || this.isListLoading || this.isAllListLoaded)
             return;
-        const threshold = 150; // Increased threshold for smoother loading
+        const threshold = 100;
+        console.log('scrolling:', el.scrollTop, el.scrollHeight, el.clientHeight);
         if (el.scrollHeight - el.scrollTop - el.clientHeight < threshold) {
+            console.log('Attempting to load more...');
             this.loadMoreProductsToList();
         }
     }
     loadMoreProductsToList() {
         if (this.isListLoading || this.isAllListLoaded)
             return;
-        this.isListLoading = true;
         this.pageNo++;
         if (this.responseData && this.responseData.length >= this.totalCount) {
             this.isAllListLoaded = true;
-            this.isListLoading = false;
             return;
         }
+        this.isListLoading = true;
         this.restService.getFilteredProduct(this.collections.filter((x) => x.status).map((x) => x.id), this.categories.filter((x) => x.status).map((x) => x.id), this.searchText, this.pricingMin, this.pricingMax, this.sortBy ?? "", this.pageNo - 1, this.size).subscribe((response) => {
             this.responseData = [...(this.responseData ?? []), ...(response.data ?? [])];
             this.totalCount = response.count;
@@ -20121,8 +20103,8 @@ class ProductListComponent extends BaseSection {
     getProductWidth() {
         return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '98%' : '48%');
     }
-    proceedToProductDesc(product) {
-        this.router.navigate(['details', product.slugifiedName]);
+    proceedToProductDesc(productId) {
+        this.router.navigate(['details'], { queryParams: { id: productId } });
     }
     toggleMetalSize(size) {
         size.status = !size.status;
@@ -20150,7 +20132,6 @@ class ProductListComponent extends BaseSection {
         this.shopForData.forEach((size) => size.status = false);
         this.materialSizeData.forEach((size) => size.status = false);
         this.metalSizeData.forEach((size) => size.status = false);
-        this.filteredChips = [];
         // this.router.navigate(['list']);
         this.navigateFilter(this.sortBy);
     }
@@ -20536,7 +20517,7 @@ class ProductListComponent extends BaseSection {
         return brightness > threshold ? '#000000' : '#ffffff';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }, { token: AnalyticsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(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\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\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\">\r\n        <div class=\"filter body-large\">\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\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of filteredChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (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 class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of filteredChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\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        (scroll)=\"handleProductListScroll()\" #listScrollContainer>\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\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\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\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\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\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\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\"\r\n        [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\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n        <div class=\"trim-text\">{{ range.label }}</div>\r\n      </label>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\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\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{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  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\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        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\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'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (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 g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.2-2'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.2-2'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\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          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\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\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>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!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: "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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(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\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\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\">\r\n        <div class=\"filter body-large\">\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\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of filteredChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (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 class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of filteredChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\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            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\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\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\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\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\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\"\r\n        [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\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n        <div class=\"trim-text\">{{ range.label }}</div>\r\n      </label>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\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\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{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  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\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        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\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'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (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 g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.2-2'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.2-2'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\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          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\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\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>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!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: "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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
@@ -20563,7 +20544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatChipsModule,
                         ButtonEditorDirective,
                         SpacingHorizontalDirective,
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(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\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\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\">\r\n        <div class=\"filter body-large\">\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\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of filteredChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (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 class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of filteredChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\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        (scroll)=\"handleProductListScroll()\" #listScrollContainer>\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\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\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\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\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\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\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\"\r\n        [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\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n        <div class=\"trim-text\">{{ range.label }}</div>\r\n      </label>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\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\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{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  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\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        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\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'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (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 g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.2-2'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.2-2'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\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          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\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\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>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(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\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\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\">\r\n        <div class=\"filter body-large\">\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\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of filteredChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (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 class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of filteredChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\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            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\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\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\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\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\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\"\r\n        [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\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n        [style.color]=\"styles?.background?.accentColor\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n        <div class=\"trim-text\">{{ range.label }}</div>\r\n      </label>\r\n    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n          [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n        <div class=\"trim-text\">{{ size.size }}</div>\r\n      </div>\r\n    </div>\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\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{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  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\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        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\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'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (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 g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.2-2'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.2-2'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product.itemId)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\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          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\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\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>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -20840,7 +20821,7 @@ class WhislistComponent extends BaseSection {
         this.router.navigate(['/details'], { queryParams: { id: product.itemId, varientId: product.varientId } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i6$1.MessageService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div class=\"wishlist-wrapper\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n\r\n      <div class=\"container container-custom\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n\r\n        <div class=\"wishlist-header\">\r\n          <h1 class=\"wishlist-title\">\r\n            Your Wishlist <span class=\"item-count\">({{responseData?.orderedItems?.length}} Items)</span>\r\n          </h1>\r\n        </div>\r\n\r\n        <div class=\"wishlist-items-container\">\r\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"wishlist-item-row\" [ngClass]=\"{ 'single-item': responseData?.orderedItems?.length === 1 }\">\r\n\r\n              <div class=\"item-left\">\r\n                <div class=\"item-image\" (click)=\"redirectToProduct(item)\">\r\n                  <img loading=\"lazy\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n                    alt=\"{{item.itemName}}\">\r\n                </div>\r\n\r\n                <div class=\"item-details\">\r\n                  <h3 class=\"product-name\" (click)=\"redirectToProduct(item)\">\r\n                    {{item.itemName}}\r\n                  </h3>\r\n\r\n                  <div class=\"variants-box\" *ngIf=\"item.itemVariant\">\r\n                    <div class=\"variant-item\" *ngFor=\"let variant of getKeys(item.itemVariant.properties)\">\r\n                      <span class=\"variant-value\">{{ item.itemVariant.properties[variant] | titlecase }}</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"item-right\">\r\n                <div class=\"quantity-control-wrapper\">\r\n                  <div class=\"quantity-control\" *ngIf=\"item.quantity\">\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                      <mat-icon>remove</mat-icon>\r\n                    </button>\r\n                    <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'ADD')\">\r\n                      <mat-icon>add</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"add-qty-trigger\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">\r\n                    Add Quantity\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"price-section\">\r\n                  <div class=\"product-price\">\r\n                    <span class=\"currency\" [innerHTML]=\"currency\"></span>\r\n                    <span class=\"amount\">{{item.discountedPrice ?? item.sellingPrice}}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"actions-group\">\r\n                  <div class=\"action-btn move-to-cart-svg\" (click)=\"moveToCart(item)\" pTooltip=\"Move to Cart\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                      class=\"lucide lucide-shopping-cart\">\r\n                      <circle cx=\"8\" cy=\"21\" r=\"1\" />\r\n                      <circle cx=\"19\" cy=\"21\" r=\"1\" />\r\n                      <path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\" />\r\n                    </svg>\r\n                  </div>\r\n\r\n                  <div class=\"delete-btn-circle\" (click)=\"deleteFromWhislist(item)\" pTooltip=\"Remove\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                      stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n                      <path d=\"M3 6h18\" />\r\n                      <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n                      <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n                      <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n                      <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n                    </svg>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Empty Wishlist State -->\r\n      <section class=\"empty-wishlist\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-container\">\r\n          <div class=\"empty-icon-wrapper\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n              alt=\"Empty Wishlist\" class=\"empty-img\">\r\n          </div>\r\n          <div class=\"empty-content\">\r\n            <h2 class=\"empty-title\" [style.color]=\"styles?.background?.accentColor\">Your Wishlist is Empty</h2>\r\n            <p class=\"empty-desc\" [style.color]=\"styles?.background?.accentColor\">\r\n              Seems like you haven't discovered your favorites yet. Explore our top collections and add what you love!\r\n            </p>\r\n            <!-- <button class=\"explore-btn\" (click)=\"redirectToProduct({itemId: '', varientId: ''})\">Explore Now</button> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n\r\n    <!-- Editors -->\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  </section>\r\n</ng-container>\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}\"></ngx-skeleton-loader>", styles: [":host{--wishlist-bg: #f8fafc;--wishlist-card-bg: #ffffff;--wishlist-border: #e2e8f0;--wishlist-text-main: #0f172a;--wishlist-text-muted: #64748b;--wishlist-accent: var(--accent-color, #1e293b);--wishlist-danger: #ef4444;--wishlist-transition: all .2s cubic-bezier(.4, 0, .2, 1);font-family:var(--website-font-family, \"Inter\", -apple-system, sans-serif)}.total-container{min-height:75vh;background:var(--wishlist-bg)}.wishlist-header{margin-bottom:24px}.wishlist-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin:0;letter-spacing:-.02em}.item-count{font-size:14px;font-weight:500;color:var(--wishlist-text-muted);margin-left:8px}.wishlist-items-container{background:var(--wishlist-card-bg);border:1px solid var(--wishlist-border);border-radius:12px;box-shadow:0 1px 3px #00000005;overflow:hidden}.wishlist-header-row{display:flex;padding:16px 24px;background:#fff;border-bottom:1px solid var(--wishlist-border);font-size:16px;font-weight:600;color:var(--wishlist-text-main)}.wishlist-item-row{display:flex;align-items:center;padding:14px;border-bottom:1px solid #f1f5f9;transition:var(--wishlist-transition)}.wishlist-item-row:hover{background:#fbfcfe}.wishlist-item-row:last-child{border-bottom:none}.item-left{display:flex;align-items:center;flex:2;gap:20px}.item-image{width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#f8fafc;border:1px solid #f1f5f9}.product-image{width:100%;height:100%;object-fit:cover}.item-details{display:flex;flex-direction:column;gap:6px}.product-name{font-size:14px;font-weight:600;color:var(--wishlist-text-main);margin:0;cursor:pointer;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.variants-box{display:flex;flex-wrap:wrap;gap:8px}.variant-value{font-size:14px;color:var(--wishlist-text-muted);font-weight:400}.item-right{display:flex;align-items:center;flex:2;gap:40px;justify-content:flex-end}.quantity-control-wrapper{flex:1;display:flex;justify-content:center}.quantity-control{display:flex;align-items:center;border:1px solid var(--wishlist-border);border-radius:8px;background:#fff;height:36px;overflow:hidden}.qty-btn{width:40px;height:100%;background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-text-main);transition:var(--wishlist-transition)}.qty-btn:hover{background:#f8fafc}.qty-btn mat-icon{font-size:18px;width:18px;height:18px}.qty-value{width:36px;text-align:center;font-size:15px;font-weight:600;color:var(--wishlist-text-main);border-left:1px solid var(--wishlist-border);border-right:1px solid var(--wishlist-border);height:100%;display:flex;align-items:center;justify-content:center}.add-qty-trigger{padding:8px 16px;border:1px solid var(--wishlist-border);border-radius:8px;font-size:13px;font-weight:600;color:var(--wishlist-text-main);cursor:pointer;transition:var(--wishlist-transition)}.add-qty-trigger:hover{background:#f8fafc}.price-section{min-width:100px;text-align:right}.product-price{font-size:18px;font-weight:700;color:var(--wishlist-text-main)}.currency{font-size:16px;margin-right:2px}.actions-group{display:flex;align-items:center;gap:16px}.action-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--wishlist-transition)}.move-to-cart-svg{background:#f1f5f9;color:var(--wishlist-text-main);border:1px solid transparent}.move-to-cart-svg:hover{background:#e2e8f0;transform:translateY(-2px)}.delete-btn-circle{width:40px;height:40px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-danger);transition:var(--wishlist-transition)}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:translateY(-2px)}.delete-btn-circle svg,.move-to-cart-svg svg{width:20px;height:20px}.empty-wishlist{padding:100px 0;text-align:center}.empty-container{max-width:400px;margin:0 auto}.empty-img{width:200px;margin-bottom:32px;opacity:.9}.empty-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin-bottom:12px}.empty-desc{font-size:16px;color:var(--wishlist-text-muted);line-height:1.6}@media (max-width: 900px){.wishlist-item-row{flex-direction:column;align-items:stretch;gap:20px}.item-right{justify-content:space-between;width:100%;flex:auto}}@media (max-width: 600px){.item-left{gap:12px}.item-image{width:80px;height:80px}.product-name{font-size:15px}.item-right{flex-wrap:wrap;gap:16px}.quantity-control-wrapper{order:2;justify-content:flex-start}.price-section{order:1;min-width:0}.actions-group{order:3;width:100%;justify-content:flex-end}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: 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: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\"  [simpoLayout]=\"styles?.layout\" >\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <div class=\"left-panel\" [ngClass]=\"{ 'mobile-height': isMobile && responseData?.orderedItems?.length === 1 }\">\r\n          <div class=\"my-bag\" [style.color]=\"styles?.background?.accentColor\">\r\n            My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n\r\n          <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"cart-items\"\r\n                [ngClass]=\"{ 'mobile-height': isMobile && (responseData?.orderedItems?.length ?? 0) === 1, 'multiple-items': (responseData?.orderedItems?.length ?? 0) > 1 }\">\r\n                <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\r\n                <div class=\"d-flex item-parent\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100 item-desc\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name heading-large trim-text\" [style.color]=\"styles?.background?.accentColor\"\r\n                        (click)=\"redirectToProduct(item)\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <span [innerHTML]='currency'></span> {{item.discountedPrice ?? item.sellingPrice}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <div class=\"fw-bold\" [style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                          <div class=\"fw-normal\" style=\"margin-left: 5px;\"\r\n                            [style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] |\r\n                            uppercase }}</div>\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"d-flex action-btn\" class=\"options\" style=\"gap: 5px;   \">\r\n                        <div class=\"item-quantity\" *ngIf=\"item.quantity\"\r\n                          [style.color]=\"styles?.background?.accentColor\">\r\n                          <div class=\"count\">\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                            <span>{{item.quantity}}</span>\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\"\r\n                          [style.color]=\"styles?.background?.accentColor\">Add Quantity\r\n                        </div>\r\n                        <div class=\"item-quantity\" (click)=\"moveToCart(item)\"\r\n                          [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                    <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n                      {{(item.discountedPrice ?? item.sellingPrice) * item.quantity}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n              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              Your Wishlist is empty\r\n            </div>\r\n            <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n              Looks like you have not added anything to your Wishlist. Go ahead & explore top categories.\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\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    <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  </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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.item-desc{margin-left:10px!important}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.options{display:flex}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important;height:calc(100vh - 130px)}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.count{display:flex;gap:20px}.item-quantity{width:100%;justify-content:center}.options{flex-direction:column}.empty-cart-container{height:calc(100vh - 130px)}}@media (min-width:768px) and (max-width:1024px){.options{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "directive", type: 
                 //DIRECTIVE
                 BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
@@ -20858,7 +20839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         OverlayDirective,
                         HoverDirective,
                         ToastModule
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div class=\"wishlist-wrapper\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n\r\n      <div class=\"container container-custom\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n\r\n        <div class=\"wishlist-header\">\r\n          <h1 class=\"wishlist-title\">\r\n            Your Wishlist <span class=\"item-count\">({{responseData?.orderedItems?.length}} Items)</span>\r\n          </h1>\r\n        </div>\r\n\r\n        <div class=\"wishlist-items-container\">\r\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"wishlist-item-row\" [ngClass]=\"{ 'single-item': responseData?.orderedItems?.length === 1 }\">\r\n\r\n              <div class=\"item-left\">\r\n                <div class=\"item-image\" (click)=\"redirectToProduct(item)\">\r\n                  <img loading=\"lazy\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n                    alt=\"{{item.itemName}}\">\r\n                </div>\r\n\r\n                <div class=\"item-details\">\r\n                  <h3 class=\"product-name\" (click)=\"redirectToProduct(item)\">\r\n                    {{item.itemName}}\r\n                  </h3>\r\n\r\n                  <div class=\"variants-box\" *ngIf=\"item.itemVariant\">\r\n                    <div class=\"variant-item\" *ngFor=\"let variant of getKeys(item.itemVariant.properties)\">\r\n                      <span class=\"variant-value\">{{ item.itemVariant.properties[variant] | titlecase }}</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"item-right\">\r\n                <div class=\"quantity-control-wrapper\">\r\n                  <div class=\"quantity-control\" *ngIf=\"item.quantity\">\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                      <mat-icon>remove</mat-icon>\r\n                    </button>\r\n                    <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'ADD')\">\r\n                      <mat-icon>add</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"add-qty-trigger\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">\r\n                    Add Quantity\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"price-section\">\r\n                  <div class=\"product-price\">\r\n                    <span class=\"currency\" [innerHTML]=\"currency\"></span>\r\n                    <span class=\"amount\">{{item.discountedPrice ?? item.sellingPrice}}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"actions-group\">\r\n                  <div class=\"action-btn move-to-cart-svg\" (click)=\"moveToCart(item)\" pTooltip=\"Move to Cart\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                      class=\"lucide lucide-shopping-cart\">\r\n                      <circle cx=\"8\" cy=\"21\" r=\"1\" />\r\n                      <circle cx=\"19\" cy=\"21\" r=\"1\" />\r\n                      <path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\" />\r\n                    </svg>\r\n                  </div>\r\n\r\n                  <div class=\"delete-btn-circle\" (click)=\"deleteFromWhislist(item)\" pTooltip=\"Remove\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                      stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n                      <path d=\"M3 6h18\" />\r\n                      <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n                      <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n                      <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n                      <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n                    </svg>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Empty Wishlist State -->\r\n      <section class=\"empty-wishlist\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-container\">\r\n          <div class=\"empty-icon-wrapper\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n              alt=\"Empty Wishlist\" class=\"empty-img\">\r\n          </div>\r\n          <div class=\"empty-content\">\r\n            <h2 class=\"empty-title\" [style.color]=\"styles?.background?.accentColor\">Your Wishlist is Empty</h2>\r\n            <p class=\"empty-desc\" [style.color]=\"styles?.background?.accentColor\">\r\n              Seems like you haven't discovered your favorites yet. Explore our top collections and add what you love!\r\n            </p>\r\n            <!-- <button class=\"explore-btn\" (click)=\"redirectToProduct({itemId: '', varientId: ''})\">Explore Now</button> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n\r\n    <!-- Editors -->\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  </section>\r\n</ng-container>\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}\"></ngx-skeleton-loader>", styles: [":host{--wishlist-bg: #f8fafc;--wishlist-card-bg: #ffffff;--wishlist-border: #e2e8f0;--wishlist-text-main: #0f172a;--wishlist-text-muted: #64748b;--wishlist-accent: var(--accent-color, #1e293b);--wishlist-danger: #ef4444;--wishlist-transition: all .2s cubic-bezier(.4, 0, .2, 1);font-family:var(--website-font-family, \"Inter\", -apple-system, sans-serif)}.total-container{min-height:75vh;background:var(--wishlist-bg)}.wishlist-header{margin-bottom:24px}.wishlist-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin:0;letter-spacing:-.02em}.item-count{font-size:14px;font-weight:500;color:var(--wishlist-text-muted);margin-left:8px}.wishlist-items-container{background:var(--wishlist-card-bg);border:1px solid var(--wishlist-border);border-radius:12px;box-shadow:0 1px 3px #00000005;overflow:hidden}.wishlist-header-row{display:flex;padding:16px 24px;background:#fff;border-bottom:1px solid var(--wishlist-border);font-size:16px;font-weight:600;color:var(--wishlist-text-main)}.wishlist-item-row{display:flex;align-items:center;padding:14px;border-bottom:1px solid #f1f5f9;transition:var(--wishlist-transition)}.wishlist-item-row:hover{background:#fbfcfe}.wishlist-item-row:last-child{border-bottom:none}.item-left{display:flex;align-items:center;flex:2;gap:20px}.item-image{width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#f8fafc;border:1px solid #f1f5f9}.product-image{width:100%;height:100%;object-fit:cover}.item-details{display:flex;flex-direction:column;gap:6px}.product-name{font-size:14px;font-weight:600;color:var(--wishlist-text-main);margin:0;cursor:pointer;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.variants-box{display:flex;flex-wrap:wrap;gap:8px}.variant-value{font-size:14px;color:var(--wishlist-text-muted);font-weight:400}.item-right{display:flex;align-items:center;flex:2;gap:40px;justify-content:flex-end}.quantity-control-wrapper{flex:1;display:flex;justify-content:center}.quantity-control{display:flex;align-items:center;border:1px solid var(--wishlist-border);border-radius:8px;background:#fff;height:36px;overflow:hidden}.qty-btn{width:40px;height:100%;background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-text-main);transition:var(--wishlist-transition)}.qty-btn:hover{background:#f8fafc}.qty-btn mat-icon{font-size:18px;width:18px;height:18px}.qty-value{width:36px;text-align:center;font-size:15px;font-weight:600;color:var(--wishlist-text-main);border-left:1px solid var(--wishlist-border);border-right:1px solid var(--wishlist-border);height:100%;display:flex;align-items:center;justify-content:center}.add-qty-trigger{padding:8px 16px;border:1px solid var(--wishlist-border);border-radius:8px;font-size:13px;font-weight:600;color:var(--wishlist-text-main);cursor:pointer;transition:var(--wishlist-transition)}.add-qty-trigger:hover{background:#f8fafc}.price-section{min-width:100px;text-align:right}.product-price{font-size:18px;font-weight:700;color:var(--wishlist-text-main)}.currency{font-size:16px;margin-right:2px}.actions-group{display:flex;align-items:center;gap:16px}.action-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--wishlist-transition)}.move-to-cart-svg{background:#f1f5f9;color:var(--wishlist-text-main);border:1px solid transparent}.move-to-cart-svg:hover{background:#e2e8f0;transform:translateY(-2px)}.delete-btn-circle{width:40px;height:40px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-danger);transition:var(--wishlist-transition)}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:translateY(-2px)}.delete-btn-circle svg,.move-to-cart-svg svg{width:20px;height:20px}.empty-wishlist{padding:100px 0;text-align:center}.empty-container{max-width:400px;margin:0 auto}.empty-img{width:200px;margin-bottom:32px;opacity:.9}.empty-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin-bottom:12px}.empty-desc{font-size:16px;color:var(--wishlist-text-muted);line-height:1.6}@media (max-width: 900px){.wishlist-item-row{flex-direction:column;align-items:stretch;gap:20px}.item-right{justify-content:space-between;width:100%;flex:auto}}@media (max-width: 600px){.item-left{gap:12px}.item-image{width:80px;height:80px}.product-name{font-size:15px}.item-right{flex-wrap:wrap;gap:16px}.quantity-control-wrapper{order:2;justify-content:flex-start}.price-section{order:1;min-width:0}.actions-group{order:3;width:100%;justify-content:flex-end}}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\"  [simpoLayout]=\"styles?.layout\" >\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <div class=\"left-panel\" [ngClass]=\"{ 'mobile-height': isMobile && responseData?.orderedItems?.length === 1 }\">\r\n          <div class=\"my-bag\" [style.color]=\"styles?.background?.accentColor\">\r\n            My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n\r\n          <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"cart-items\"\r\n                [ngClass]=\"{ 'mobile-height': isMobile && (responseData?.orderedItems?.length ?? 0) === 1, 'multiple-items': (responseData?.orderedItems?.length ?? 0) > 1 }\">\r\n                <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\r\n                <div class=\"d-flex item-parent\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100 item-desc\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name heading-large trim-text\" [style.color]=\"styles?.background?.accentColor\"\r\n                        (click)=\"redirectToProduct(item)\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <span [innerHTML]='currency'></span> {{item.discountedPrice ?? item.sellingPrice}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <div class=\"fw-bold\" [style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                          <div class=\"fw-normal\" style=\"margin-left: 5px;\"\r\n                            [style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] |\r\n                            uppercase }}</div>\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"d-flex action-btn\" class=\"options\" style=\"gap: 5px;   \">\r\n                        <div class=\"item-quantity\" *ngIf=\"item.quantity\"\r\n                          [style.color]=\"styles?.background?.accentColor\">\r\n                          <div class=\"count\">\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                            <span>{{item.quantity}}</span>\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\"\r\n                          [style.color]=\"styles?.background?.accentColor\">Add Quantity\r\n                        </div>\r\n                        <div class=\"item-quantity\" (click)=\"moveToCart(item)\"\r\n                          [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                    <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n                      {{(item.discountedPrice ?? item.sellingPrice) * item.quantity}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n              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              Your Wishlist is empty\r\n            </div>\r\n            <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n              Looks like you have not added anything to your Wishlist. Go ahead & explore top categories.\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\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    <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  </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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.item-desc{margin-left:10px!important}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.options{display:flex}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important;height:calc(100vh - 130px)}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.count{display:flex;gap:20px}.item-quantity{width:100%;justify-content:center}.options{flex-direction:column}.empty-cart-container{height:calc(100vh - 130px)}}@media (min-width:768px) and (max-width:1024px){.options{flex-direction:column}}\n"] }]
         }], ctorParameters: () => [{ type: CartService }, { type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i6$1.MessageService }, { type: i2$2.Router }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -25523,7 +25504,7 @@ class FaqColumnsCardsComponent extends BaseSection {
         return 'justify-content-center';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqColumnsCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FaqColumnsCardsComponent, isStandalone: true, selector: "simpo-faq-columns-cards", inputs: { data: "data", customClass: "customClass", index: "index", delete: "delete", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section class=\"faq-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n    <div class=\"main-section\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"style?.animation\"\r\n        [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\">\r\n        <div class=\"row w-100\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100 mb-3\"\r\n                [simpoContentTitleSpace]=\"headingSpace\">\r\n                <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"faq-container\">\r\n                <div class=\"faq-card\" *ngFor=\"let itemData of content?.listItem?.data\" [simpoCorner]=\"style?.corners\"\r\n                    [ngStyle]=\"{'background' : data?.styles?.background?.accentBackgroundType == 'Gradient' ? 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' : data?.styles?.background?.accentColor}\">\r\n                    <div class=\"w-100 mb-3\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[0].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                    <!-- <h3>How do I become a webmaster?</h3> -->\r\n                    <div class=\"w-100\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[1].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.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>", styles: [".total-container{height:auto;position:relative}.faq-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(335px,1fr));gap:20px}.faq-card{border:1px solid #e2e8f0;padding:20px;transition:.3s ease;color:#0f172a}.faq-card:hover{box-shadow:0 4px 12px #0000000d}.faq-card p{font-size:14px;color:#64748b;line-height:1.5}@media (max-width: 992px){.faq-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.faq-container{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FaqColumnsCardsComponent, isStandalone: true, selector: "simpo-faq-columns-cards", inputs: { data: "data", customClass: "customClass", index: "index", delete: "delete", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section class=\"faq-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n    <div class=\"main-section\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"style?.animation\"\r\n        [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoLayout]=\"style?.layout\">\r\n        <div class=\"row\" [id]=\"data?.id\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100 mb-3\" [id]=\"data?.id\"\r\n                [simpoContentTitleSpace]=\"headingSpace\">\r\n                <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"faq-container\">\r\n                <div class=\"faq-card\" *ngFor=\"let itemData of content?.listItem?.data\" [simpoCorner]=\"style?.corners\"\r\n                    [ngStyle]=\"{'background' : data?.styles?.background?.accentBackgroundType == 'Gradient' ? 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' : data?.styles?.background?.accentColor}\">\r\n                    <div class=\"w-100 mb-3\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[0].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                    <!-- <h3>How do I become a webmaster?</h3> -->\r\n                    <div class=\"w-100\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[1].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.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>", styles: [".total-container{height:auto;position:relative}.faq-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(335px,1fr));gap:20px}.faq-card{border:1px solid #e2e8f0;padding:20px;transition:.3s ease;color:#0f172a}.faq-card:hover{box-shadow:0 4px 12px #0000000d}.faq-card p{font-size:14px;color:#64748b;line-height:1.5}@media (max-width: 992px){.faq-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.faq-container{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqColumnsCardsComponent, decorators: [{
             type: Component,
@@ -25543,7 +25524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ContentFitDirective,
                         BorderDirective,
                         SimpoContainerAligment
-                    ], template: "<section class=\"faq-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n    <div class=\"main-section\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"style?.animation\"\r\n        [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\">\r\n        <div class=\"row w-100\" [id]=\"data?.id\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100 mb-3\"\r\n                [simpoContentTitleSpace]=\"headingSpace\">\r\n                <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"faq-container\">\r\n                <div class=\"faq-card\" *ngFor=\"let itemData of content?.listItem?.data\" [simpoCorner]=\"style?.corners\"\r\n                    [ngStyle]=\"{'background' : data?.styles?.background?.accentBackgroundType == 'Gradient' ? 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' : data?.styles?.background?.accentColor}\">\r\n                    <div class=\"w-100 mb-3\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[0].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                    <!-- <h3>How do I become a webmaster?</h3> -->\r\n                    <div class=\"w-100\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[1].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.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>", styles: [".total-container{height:auto;position:relative}.faq-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(335px,1fr));gap:20px}.faq-card{border:1px solid #e2e8f0;padding:20px;transition:.3s ease;color:#0f172a}.faq-card:hover{box-shadow:0 4px 12px #0000000d}.faq-card p{font-size:14px;color:#64748b;line-height:1.5}@media (max-width: 992px){.faq-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.faq-container{grid-template-columns:1fr}}\n"] }]
+                    ], template: "<section class=\"faq-section total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n    <div class=\"main-section\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"style?.animation\"\r\n        [simpoPositionLayoutDirective]=\"style?.positionLayout\" [simpoLayout]=\"style?.layout\">\r\n        <div class=\"row\" [id]=\"data?.id\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100 mb-3\" [id]=\"data?.id\"\r\n                [simpoContentTitleSpace]=\"headingSpace\">\r\n                <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n            <div class=\"faq-container\">\r\n                <div class=\"faq-card\" *ngFor=\"let itemData of content?.listItem?.data\" [simpoCorner]=\"style?.corners\"\r\n                    [ngStyle]=\"{'background' : data?.styles?.background?.accentBackgroundType == 'Gradient' ? 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' : data?.styles?.background?.accentColor}\">\r\n                    <div class=\"w-100 mb-3\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[0].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                    <!-- <h3>How do I become a webmaster?</h3> -->\r\n                    <div class=\"w-100\">\r\n                        <simpo-text-editor [(value)]=\"itemData.inputText[1].value\"\r\n                            [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.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>", styles: [".total-container{height:auto;position:relative}.faq-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(335px,1fr));gap:20px}.faq-card{border:1px solid #e2e8f0;padding:20px;transition:.3s ease;color:#0f172a}.faq-card:hover{box-shadow:0 4px 12px #0000000d}.faq-card p{font-size:14px;color:#64748b;line-height:1.5}@media (max-width: 992px){.faq-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.faq-container{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], customClass: [{