simpo-component-library 3.6.311 → 3.6.312

package/fesm2022/simpo-component-library.mjs

@@ -14,7 +14,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i12 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { map, fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, forkJoin, firstValueFrom } from 'rxjs';
@@ -56,7 +56,6 @@ import * as mapboxgl from 'mapbox-gl';
 import * as i14 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import moment from 'moment';
-import { CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
 import { isBlurhashValid, decode } from 'blurhash';
 import * as i4$2 from 'primeng/rating';
 import { RatingModule } from 'primeng/rating';
@@ -69,6 +68,7 @@ import { PanelModule } from 'primeng/panel';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8$3 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -430,7 +430,6 @@ var ImageRatio;
     ImageRatio["PORTRAIT"] = "2:3";
     ImageRatio["LANDSCAPE"] = "3:2";
     ImageRatio["WIDESCREEN"] = "16:9";
-    ImageRatio["RECTANGULAR"] = "16:5";
 })(ImageRatio || (ImageRatio = {}));
 var AlignContent;
 (function (AlignContent) {
@@ -543,7 +542,7 @@ class ImageDirectiveDirective {
             if (this.simpoImageDirective.ratio === ImageRatio.SQUARE ||
                 this.simpoImageDirective.ratio === ImageRatio.LANDSCAPE ||
                 this.simpoImageDirective.ratio === ImageRatio.PORTRAIT ||
-                this.simpoImageDirective.ratio === ImageRatio.RECTANGULAR) {
+                this.simpoImageDirective.ratio === ImageRatio.WIDESCREEN) {
                 imageRatio = this.simpoImageDirective.ratio.split(":");
             }
             this.el.nativeElement.style.setProperty('aspect-ratio', imageRatio[0] + '/' + imageRatio[1]);
@@ -2060,6 +2059,7 @@ class ImageEditorComponent {
         });
     }
     changeIconColor() {
+        debugger;
         this.eventsService.iconChanged.emit({ id: this.sectionId + this.iconData.id, icon: this.iconData });
     }
     horizontalPosition() {
@@ -2535,6 +2535,7 @@ class IconDirectiveDirective {
     }
     ngOnInit() {
         this.eventsService.iconChanged.subscribe((data) => {
+            debugger;
             if (data.id === this.iconId) {
                 this.iconData = data.icon;
                 this.updateIconStyles();
@@ -4888,7 +4889,7 @@ class SpacingAroundDirective {
         else {
             this.el.nativeElement.style.setProperty("padding-left", SPACINGALIGN[this.layout?.spacingAround]);
             this.el.nativeElement.style.setProperty("padding-right", SPACINGALIGN[this.layout?.spacingAround]);
-            if (this.layout?.spacingAround && this.layout?.spacingAround != 'none' && this.layout?.spacingAround != 'remove') {
+            if (this.layout?.spacingAround && this.layout?.spacingAround != 'none') {
                 this.el.nativeElement.style.setProperty("padding-top", '1rem');
                 this.el.nativeElement.style.setProperty("padding-bottom", '1rem');
             }
@@ -6497,12 +6498,11 @@ class checkItemAlreadyAdded {
 class RestService {
     constructor(http, 
     // private readonly eventService: EventsService,
-    BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService) {
+    BASE_URL, ECOMMERCE_URL, CMIS_URL) {
         this.http = http;
         this.BASE_URL = BASE_URL;
         this.ECOMMERCE_URL = ECOMMERCE_URL;
         this.CMIS_URL = CMIS_URL;
-        this.cookieService = cookieService;
         // private BASE_URL: string = "https://dev-api.simpo.ai/";
         // private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
         // private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
@@ -6511,7 +6511,6 @@ class RestService {
         this.environmentTypeSubscriber = null;
         this.isJewellery = false;
         this.orraBaseUrl = 'https://stageapi-orra.letsmobility.com/';
-        this.passBookUrl = "https://stage-passbook.simpo.ai/";
         // this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
         //   if (response == "DEV") {
         //     this.BASE_URL = "https://dev-api.simpo.ai/";
@@ -6553,18 +6552,11 @@ class RestService {
     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))));
     }
-    getPassbookOrderStatus(orderId) {
-        const token = this.getToken();
-        const headers = new HttpHeaders({
-            'Authorization': `Bearer ${token}`
-        });
-        return this.http.post(this.passBookUrl + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {}, { headers: headers });
-    }
     getProductBySelectedCategory(categoryId) {
         return this.http.get(this.BASE_URL + `ecommerce/product/${categoryId}`);
     }
-    getAllSchemes(userId, storeId) {
-        return this.http.get(this.passBookUrl + `ext/connect/simpo/user?userId=${userId}&storeId=${storeId}`);
+    getAllSchemes(userCode) {
+        return this.http.get(this.orraBaseUrl + `passBook/summary/${userCode}`);
     }
     getAllRedemptionSchemes() {
         return this.http.get(this.orraBaseUrl + `passBook/redemption/amount/check?userCode=C_000313885`);
@@ -6831,7 +6823,7 @@ class RestService {
             storeId: storeId,
             businessId: localStorage.getItem('businessId') ?? "",
             pageNo: 0,
-            pageSize: 1000
+            pageSize: 1
         };
         return this.http.put(this.BASE_URL + `ecommerce/store/get`, payload);
     }
@@ -6910,66 +6902,7 @@ class RestService {
         }
         return map;
     }
-    generateToken(bId, userId) {
-        return this.http.post(this.passBookUrl + `ext/connect/simpo/token?businessId=${bId}&userId=${userId}&userType=EXTERNAL_USER`, {});
-    }
-    getAllEnrolledSchemes(payload) {
-        return this.http.put(this.passBookUrl + 'ext/connect/simpo/scheme/list', payload);
-    }
-    enrollScheme(payload, checkCharges) {
-        const token = this.getToken();
-        const headers = new HttpHeaders({
-            'Authorization': `Bearer ${token}`
-        });
-        if (checkCharges) {
-            return this.http.post(this.passBookUrl + 'passbook/cart/initiate/payment?manualPay=true', payload, { headers: headers });
-        }
-        else {
-            return this.http.post(this.passBookUrl + 'passbook/initiate/payment?manualPay=true', payload, { headers: headers });
-        }
-    }
-    getBenefitSlab(passbookId) {
-        const token = this.getToken();
-        const headers = new HttpHeaders({
-            'Authorization': `Bearer ${token}`
-        });
-        return this.http.post(this.passBookUrl + `passbook/benefit/percentages?passbookId=${passbookId}`, {}, { headers: headers });
-    }
-    getAllStaffList() {
-        return this.http.get(this.BASE_URL + `staff/staff/list/${localStorage.getItem('businessId')}?isPagination=false`);
-    }
-    requestRedeemption(passbookId) {
-        const token = this.getToken();
-        const headers = new HttpHeaders({
-            'Authorization': `Bearer ${token}`
-        });
-        return this.http.put(this.passBookUrl + `passbook/request/redemption?passBookId=${passbookId}`, {}, { headers: headers });
-    }
-    PassbookAppStatus(bId) {
-        return this.http.get(this.BASE_URL + `app/app/check-app?businessId=${bId}&appName=Passbook`);
-    }
-    getAllPassbookDues(bId, userId) {
-        const token = this.getToken();
-        const headers = new HttpHeaders({
-            'Authorization': `Bearer ${token}`
-        });
-        return this.http.get(this.passBookUrl + `passbook/payment/dues?page=0&size=1000&businessId=${bId}&userId=${userId}`, { headers: headers });
-    }
-    getToken() {
-        let token = this.cookieService.get('passBookToken');
-        return token;
-    }
-    getAllTransactions(payload) {
-        const token = this.getToken();
-        const headers = new HttpHeaders({
-            'Authorization': `Bearer ${token}`
-        });
-        return this.http.put(this.passBookUrl + `dashboard/v3/transactions/page`, payload, { headers: headers });
-    }
-    getSchemeDetails(schemeId) {
-        return this.http.post(this.passBookUrl + `ext/connect/simpo/get/scheme?id=${schemeId}`, {});
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
@@ -6986,7 +6919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [CMIS_URL]
-                }] }, { type: i2$3.CookieService }] });
+                }] }] });
 
 class Cart {
     constructor(json, type = null) {
@@ -7074,13 +7007,6 @@ class StorageServiceService {
             this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
         };
     }
-    setToken(token) {
-        this.cookieService.set("passBookToken", token);
-        // localStorage.setItem("token", token);
-    }
-    getToken() {
-        this.cookieService.get('passBookToken');
-    }
     updateAllData() {
         if (this.router.url.includes('cart'))
             return;
@@ -8783,7 +8709,6 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.proceedToCheckout = false;
         this.proceedToEnrollment = false;
         this.tryAtHome = false;
-        this.navigateToSchemeDetails = false;
         this.loginType = "PASSWORD";
         this.emailCheck = false;
         this.passwordCheck = false;
@@ -8803,9 +8728,6 @@ class AuthenticationRequiredComponent extends BaseSection {
             if (param && param['tryAtHome']) {
                 this.tryAtHome = true;
             }
-            if (param && param['schemeDetail']) {
-                this.navigateToSchemeDetails = true;
-            }
         });
         this.styles = this.data?.styles;
         this.button = this.data?.action?.buttons[0];
@@ -8845,7 +8767,6 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.buttonLoading = true;
         this.restService.signinPassword(payload).subscribe((response) => {
             const userDetails = this.storageService.setUser(response.data);
-            this.storageService.setToken(response.data.passbookToken);
             this.storageService.updateAllData();
             this.buttonLoading = false;
             this.syncTrialCartToServerDB(userDetails.userId);
@@ -8857,9 +8778,6 @@ class AuthenticationRequiredComponent extends BaseSection {
                 this.router.navigate(['/schemes']);
             else if (this.tryAtHome)
                 this.router.navigate(['/home-appointment']);
-            else if (this.navigateToSchemeDetails) {
-                this.router.navigate(['scheme-detail']);
-            }
             else
                 this.router.navigate(['']);
         }, (error) => {
@@ -8936,14 +8854,6 @@ class AuthenticationRequiredComponent extends BaseSection {
         };
         this.restService.verifySignupOTP(verifySignData).subscribe((response) => {
             const userDetails = this.storageService.setUser(response.data);
-            this.storageService.setToken(response.data.passbookToken);
-            // this.restService.generateToken(localStorage.getItem('bId')).subscribe({
-            //   next: (tokenResponse: any) => {
-            //   },
-            //   error: (error) => {
-            //     console.error('Error generating token:', error);
-            //   }
-            // })
             this.storageService.updateAllData();
             this.syncTrialCartToServerDB(userDetails.userId);
             // this.dialogRef.close('success');
@@ -9159,7 +9069,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: i4$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$2.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\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\">\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 [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n        <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : 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>\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      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <div class=\"w-100\">\r\n        <label for=\"\">Password</label>\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n          (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n          [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" 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>\r\n    <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">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       <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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'SIGNUP'\">Sign\r\n        Up</span></div>\r\n\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\r\n<ng-template #signInTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" [(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\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n        [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\">\r\n      <label for=\"\">Phone Number</label>\r\n      <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n        [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      <label for=\"\">Password</label>\r\n      <div class=\"w-100 d-flex align-items-center\">\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n          placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n          (ngModelChange)=\"onPasswordChange()\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\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    <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 mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\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\">\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 [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n        <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : 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>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" [(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\">\r\n      <div class=\"w-100\">\r\n        <label for=\"\">Password</label>\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n          (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n          [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" 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>\r\n    <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">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       <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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'SIGNUP'\">Sign\r\n        Up</span></div>\r\n\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\r\n<ng-template #signInTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" [(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\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n        [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\">\r\n      <label for=\"\">Phone Number</label>\r\n      <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n        [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      <label for=\"\">Password</label>\r\n      <div class=\"w-100 d-flex align-items-center\">\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n          placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n          (ngModelChange)=\"onPasswordChange()\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\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    <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 mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
@@ -9179,7 +9089,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\">\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 [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n        <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : 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>\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      <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <div class=\"w-100\">\r\n        <label for=\"\">Password</label>\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n          (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n          [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" 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>\r\n    <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">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       <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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'SIGNUP'\">Sign\r\n        Up</span></div>\r\n\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\r\n<ng-template #signInTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" [(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\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n        [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\">\r\n      <label for=\"\">Phone Number</label>\r\n      <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n        [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      <label for=\"\">Password</label>\r\n      <div class=\"w-100 d-flex align-items-center\">\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n          placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n          (ngModelChange)=\"onPasswordChange()\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\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    <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 mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+                    ], 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\">\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 [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n        <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : 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>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" [(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\">\r\n      <div class=\"w-100\">\r\n        <label for=\"\">Password</label>\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n          (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n          [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" 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>\r\n    <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">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       <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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</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\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n    <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'SIGNUP'\">Sign\r\n        Up</span></div>\r\n\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\r\n<ng-template #signInTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" [(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\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n        [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\">\r\n      <label for=\"\">Phone Number</label>\r\n      <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n        [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      <label for=\"\">Password</label>\r\n      <div class=\"w-100 d-flex align-items-center\">\r\n        <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n          placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n          (ngModelChange)=\"onPasswordChange()\">\r\n        <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n          <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n        </span>\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    <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 mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n        (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i4$1.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: i8$2.MatBottomSheetRef, decorators: [{
@@ -14187,7 +14097,6 @@ class HeaderSectionComponent {
         this.HeaderStyling = Header_Type;
         this.parentHeight = 70; // Default height
         this.toShowInJewellery = false;
-        this.passbookAppStatus = false;
         this.showSearchBarMobile = false;
         this.isNavbarOpen = false;
         this.screenWidth = 475;
@@ -14312,7 +14221,6 @@ class HeaderSectionComponent {
         setTimeout(() => {
             this.getParentHeight();
         }, 3000);
-        this.checkPassbookApp();
     }
     ngAfterViewInit() {
         this.resizeObserver = new ResizeObserver(() => {
@@ -14322,13 +14230,6 @@ class HeaderSectionComponent {
         });
         this.resizeObserver.observe(this.childContainer.nativeElement);
     }
-    checkPassbookApp() {
-        this.restService.PassbookAppStatus(localStorage.getItem('bId')).subscribe((res) => {
-            if (res?.data) {
-                this.passbookAppStatus = true;
-            }
-        });
-    }
     getScreenSize(event) {
         this.screenWidth = window.innerWidth;
     }
@@ -14487,11 +14388,8 @@ class HeaderSectionComponent {
         const pathname = window.location.pathname;
         return pathname.includes('/list') || pathname === '/' || pathname === '';
     }
-    navigateLogin() {
-        this.router.navigate(['/login']);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\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 #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\" simpoHover \r\n      [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\" [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n        (click)=\"goToSchemes()\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n            [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\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 #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -14529,7 +14427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         MovingTextComponent,
                         ContentFitDirective,
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\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 #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\" simpoHover \r\n      [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div>\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"text-end\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <div class=\"d-flex gap-3\"\r\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n      <ng-container *ngFor=\"let item of getNavbarButton\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | lowercase | titlecase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\" [style.color]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n        (click)=\"goToSchemes()\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\"\r\n              data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\" [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\" [style.color]=\"backgroundInfo?.accentColor\"\r\n        *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"backgroundInfo?.accentColor\"\r\n            [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n  <div class=\"offcanvas-header\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div>\r\n  <div class=\"offcanvas-body\">\r\n    <div class=\"pages\">\r\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n      {{ele?.categoryName | titlecase}}\r\n    </div>\r\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n      [simpoColor]=\"data?.styles?.headline?.color\">\r\n      Collections\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showList = false\" -->\r\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n          <div class=\"list-header mb-3\">By Price</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n              <div class=\"each-price cursor-pointer\"\r\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n                {{price | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4 h-100 overflow-scroll\"\r\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n          <div class=\"list-header mb-3\">By Style</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n                |\r\n                titlecase}}</div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n          <div class=\"d-flex flex-column gap-3 list-item\">\r\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <div style=\"width: 15px;height: 20px;\">\r\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n                </div>\r\n                <div class=\"each-price cursor-pointer\">{{collection.name\r\n                  |\r\n                  titlecase}}</div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- (mouseleave)=\"showCollections = false\" -->\r\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n    <div class=\"row w-100 h-100\">\r\n      <div class=\"col-7 row\">\r\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n          <div class=\"collection row col-3 align-items-center\"\r\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n            <div class=\"col-imag col-4\">\r\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n            </div>\r\n            <div class=\"col-8 text-overflow\">\r\n              {{collection?.collectionName | titlecase}}\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\r\n            (click)=\"applyFilterToList(image, 'collections')\">\r\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\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 #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n      </div>\r\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -14841,297 +14739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class SchemeDetailComponent {
-    constructor(activeRoute, restService, storageService, matDialog, router, _eventService) {
-        this.activeRoute = activeRoute;
-        this.restService = restService;
-        this.storageService = storageService;
-        this.matDialog = matDialog;
-        this.router = router;
-        this._eventService = _eventService;
-        this.data = null;
-        this.edit = true;
-        this.Object = Object;
-        this.stores = [];
-        this.staffMembers = [];
-        this.minAmount = 1000;
-        this.maxAmount = 100000;
-        this.monthlyAmount = 0;
-        this.installmentOptions = [];
-        this.maturityCount = 10;
-        this.benefitAmount = 0;
-        this.enrollButtonLoader = false;
-        this.screenWidth = 0;
-        this.faqList = [];
-    }
-    ngOnInit() {
-        this.getScreenSize();
-        this.styles = this.data?.styles;
-        this.activeRoute.queryParams.subscribe(params => {
-            if (params['schemeId']) {
-                this.getSchemeDetails(params['schemeId']);
-            }
-        });
-        this.getSchemeDetails("8900c645-8194-11f0-b71d-496e66306acd");
-    }
-    getKeys(obj) {
-        return Object.keys(obj ?? {});
-    }
-    get stylesLayout() {
-        return { ...this.styles?.layout };
-    }
-    getButtonData(index) {
-        return this.data?.action?.buttons[index]?.content;
-    }
-    getButtonId(index) {
-        return this.data?.action?.buttons[index]?.id ?? "";
-    }
-    getButtonStyle(index) {
-        return this.data?.action?.buttons[index]?.styles;
-    }
-    get getInputText() {
-        return this.data?.content?.inputText[0]?.value ?? "";
-    }
-    getScreenSize(event) {
-        this.screenWidth = window.innerWidth;
-    }
-    getStaffList() {
-        this.restService.getAllStaffList().subscribe({
-            next: (res) => {
-                this.staffMembers = res?.data?.data ? res?.data?.data : [];
-                console.log(this.staffMembers);
-            },
-            error: (err) => {
-                console.log(err);
-            }
-        });
-    }
-    onAmountChange() {
-        if (Object.keys(this.schemeDetails.jewellerBenefit).length > 0) {
-            const values = Object.values(this.schemeDetails.jewellerBenefit);
-            const highestValue = Math.max(...Object.values(values));
-            if (this.schemeDetails.benefitType === "PERCENT_ON_MONTH") {
-                this.benefitAmount = (this.monthlyAmount * highestValue) / 100;
-            }
-            else if (this.schemeDetails.benefitType === "SCHEME") {
-                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
-            }
-            else if (this.schemeDetails.benefitType === "DISCOUNT") {
-                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
-            }
-        }
-    }
-    setMonthlyAmount(amount) {
-        this.installmentOptions.forEach((option) => {
-            if (option.value == amount?.value) {
-                option.status = true;
-                this.monthlyAmount = amount?.value;
-            }
-            else {
-                option.status = false;
-            }
-        });
-        this.onAmountChange();
-    }
-    getSchemeDetails(schemeId) {
-        this.restService.getSchemeDetails(schemeId).subscribe((res) => {
-            if (res && res.data) {
-                this.getStaffList();
-                this.schemeDetails = res.data;
-                console.log(this.schemeDetails);
-                this.minAmount = this.schemeDetails?.minInstallmentValue;
-                this.maxAmount = this.schemeDetails?.maxInstallmentValue;
-                this.monthlyAmount = this.minAmount;
-                this.schemeDetails?.suggestedValues?.forEach((scheme) => this.installmentOptions.push({ status: false, value: scheme }));
-                this.maturityCount = this.schemeDetails?.maturityCount ? this.schemeDetails.maturityCount : this.maturityCount;
-                this.stores = this.schemeDetails?.storeList ? this.schemeDetails.storeList : [];
-                this.faqList = this.schemeDetails?.faqs ? this.schemeDetails?.faqs : [];
-                this.faqList.forEach(faq => faq.showAnswer = false);
-            }
-        });
-    }
-    enrollScheme(scheme) {
-        this.enrollButtonLoader = true;
-        const userDetails = this.storageService.getUser();
-        let payload = {
-            userBasicDetails: {
-                customer_id: userDetails?.userId,
-                customer_name: userDetails?.contact?.name,
-                customer_phone: userDetails?.contact?.mobile,
-                customer_email: userDetails?.contact?.email,
-            },
-            schemeId: scheme?.id,
-            schemeName: scheme?.schemeName,
-            earlyRedemptionCharge: scheme?.enrollmentFees,
-            installmentAmount: this.monthlyAmount,
-            storeRefId: scheme?.schemeRepresentativeId,
-            storeId: this.stores.length < 2 ? this.stores[0].id : this.selectedStore?.id,
-            staffId: this.staffMembers.length < 2 ? this.staffMembers[0].id : this.selectedStaff?.id,
-            staffName: this.staffMembers.length < 2 ? this.staffMembers[0].name : this.selectedStaff?.name,
-            storeName: this.stores.length < 2 ? this.stores[0].name : this.selectedStore?.name,
-            maturityCount: scheme?.maturityCount,
-            jewellerBenefit: scheme?.jewellerBenefit,
-            dueMonths: scheme?.maturityCount,
-            businessId: scheme?.businessId,
-            businessName: scheme?.businessName,
-            enableEarlyRedemption: scheme?.enableEarlyRedemption,
-            redemptionSlabList: scheme?.redemptionSlabList,
-            schemeType: scheme?.schemeType,
-            metalType: scheme?.metalType,
-            karatType: scheme?.karatType,
-            customerAccount: ""
-        };
-        if (userDetails != null) {
-            this.restService.enrollScheme(payload, true).subscribe({
-                next: (response) => {
-                    this.enrollButtonLoader = false;
-                    if (response.data.cashfreeResponse != null) {
-                        this.continuePayment(payload);
-                    }
-                    else {
-                        this.storeCharges = response.data.cart;
-                        this.dialogRef = this.matDialog.open(this.showChargesTemplate, {
-                            panelClass: 'show-charges-class'
-                        });
-                        this.dialogRef.afterClosed().subscribe((res) => {
-                            if (res === 'SUCCESS')
-                                this.continuePayment(payload);
-                        });
-                    }
-                },
-                error: (err) => {
-                    this.enrollButtonLoader = false;
-                    if (err?.error?.message) {
-                    }
-                }
-            });
-        }
-        else {
-            this.router.navigate(['/login'], { queryParams: { schemeDetail: 'scheme-detail' } });
-        }
-    }
-    closeDialog(action) {
-        this.dialogRef.close(action);
-    }
-    continuePayment(payload) {
-        this.restService.enrollScheme(payload, false).subscribe({
-            next: (response) => {
-                localStorage.setItem('passbookOrderId', response.data.orderId);
-                this.openCashfreeSdk(response.data.sessionId);
-            },
-            error: (error) => { }
-        });
-    }
-    openCashfreeSdk(sessionId) {
-        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.Router }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n    <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n    </div>\r\n    <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n        <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"terms_condition_section p-5\"\r\n        *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n        <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n    </div>\r\n</section>\r\n<ng-template #aboutUsTemplate>\r\n    <div class=\"d-flex flex-column gap-3\">\r\n        <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n            <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"desc_text\">\r\n            Our Dream Savings Jewelry Plan is designed to make luxury jewelry accessible to everyone. Save at your own\r\n            pace and turn your jewelry dreams into reality\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n    <div class=\"d-flex flex-column align-items-center\">\r\n        <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n            <span>Calculate Your Returns</span>\r\n            <div class=\"calc_desc\">\r\n                See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n                your potential returns.\r\n            </div>\r\n        </div>\r\n        <div class=\"calculator_section\">\r\n            <div class=\"sub-header mb-3 px-3\">\r\n                <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n            </div>\r\n\r\n            <div class=\"calculate-slider mb-4 px-3\">\r\n                <div class=\"slider-container position-relative\">\r\n                    <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                        [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                        (ngModelChange)=\"onAmountChange()\">\r\n                    <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                        <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n                        <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n                    </div>\r\n                    <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n                            [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n                            *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n                            \u20B9 {{option?.value}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\">\r\n                        <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                    </div>\r\n                    <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"calculator-bottom px-3 mb-5\">\r\n                <div class=\"scheme-results\">\r\n                    <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n                        <!-- Contribution Card -->\r\n                        <div class=\"col-12 col-sm-6 card-container\">\r\n                            <div class=\"card text-center h-100\">\r\n                                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                                    <div class=\"fw-bold calc_amount fs-md-5\">\r\n                                        \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                                    </div>\r\n                                    <div class=\"text-muted small\">\r\n                                        Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Plus Icon - Hidden on mobile -->\r\n                        <div class=\"col-auto d-none d-md-flex justify-content-center\">\r\n                            <div class=\"fs-3 text-muted\">+</div>\r\n                        </div>\r\n\r\n                        <!-- Benefit Card -->\r\n                        <div class=\"col-12 col-sm-6 card-container\">\r\n                            <div class=\"card text-center h-100\">\r\n                                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                                    <div class=\"fw-bold calc_amount fs-md-5\">\r\n                                        \u20B9{{benefitAmount | number}}\r\n                                    </div>\r\n                                    <div class=\"text-muted small\">\r\n                                        Scheme Benefit\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Equals Icon - Hidden on mobile -->\r\n                        <div class=\"col-auto d-none d-md-flex justify-content-center\">\r\n                            <div class=\"fs-3 text-muted\">=</div>\r\n                        </div>\r\n\r\n                        <!-- Total Card -->\r\n                        <div class=\"col-12 card-container mt-2 mt-md-0\">\r\n                            <div class=\"card text-center h-100 border-2\"\r\n                                [style.background]=\"styles?.background?.accentColor\">\r\n                                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                                    <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\r\n                                        <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n                                            \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n                                        </span>\r\n                                        <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n                                            \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"text-white-50 small\">\r\n                                        Total Redemption Value\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                    <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                        *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n                        <div class=\"store_selection  w-50 align-items-center gap-1\"\r\n                            *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n                            <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                    Store : </span></div>\r\n                            <div class=\"store-selector\">\r\n                                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n                                    <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                    <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                        {{store.name}} - {{store.storeRefId}}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                            <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                    Staff Member : </span></div>\r\n                            <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                <option value=\"\" disabled>Choose a staff member...</option>\r\n                                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                    {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                </option>\r\n                            </select>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                        simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                        [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n                        <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n                        <ng-container *ngIf=\"enrollButtonLoader\">\r\n                            <div class=\"d-flex align-items-center justify-content-center\">\r\n                                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                Loading...\r\n                            </div>\r\n                        </ng-container>\r\n                    </button>\r\n                </div>\r\n                <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                <div class=\"d-flex align-items-center mb-3\">\r\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                    Enroll in Scheme\r\n                </button>\r\n            </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n    <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n        <div class=\"faq-container\">\r\n            <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n            <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n            <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n                <div class=\"faq-list\">\r\n                    <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n                        <div class=\"faq-question\">\r\n                            <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n                            <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n                            <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n                        </div>\r\n                        <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n                            <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n    <section class=\"terms-section d-flex align-items-center justify-content-center\">\r\n        <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n            <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n            <div class=\"terms-content\">\r\n                <div class=\"term-item d-flex\"\r\n                    *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n                    <div class=\"terms_count\">\r\n                        <h3 class=\"term-heading\">{{ key }}.</h3>\r\n                    </div>\r\n                    <div>\r\n                        <p class=\"term-text\">\r\n                            {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <div class=\"important-note\">\r\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n                        Participants will be notified of any changes via registered email or SMS. Continued\r\n                        participation after notification constitutes acceptance of revised terms.</p>\r\n                </div> -->\r\n\r\n                <div class=\"footer-note\">\r\n                    <p>Last updated: 8/22/2025 | Version 3.1</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:20px;border-bottom:1px solid #e2e8f0;gap:10px}.terms_count{padding-top:.2%}.term-item:last-of-type{border-bottom:none;margin-bottom:20px}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;margin-bottom:12px;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0% 11%}.calculator_section{width:100%}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{padding:20px 0;width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective], providers: [MatDialog], template: "<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n    <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n        <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n    </div>\r\n    <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n        <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"terms_condition_section p-5\"\r\n        *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n        <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n    </div>\r\n</section>\r\n<ng-template #aboutUsTemplate>\r\n    <div class=\"d-flex flex-column gap-3\">\r\n        <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n            <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"desc_text\">\r\n            Our Dream Savings Jewelry Plan is designed to make luxury jewelry accessible to everyone. Save at your own\r\n            pace and turn your jewelry dreams into reality\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n    <div class=\"d-flex flex-column align-items-center\">\r\n        <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n            <span>Calculate Your Returns</span>\r\n            <div class=\"calc_desc\">\r\n                See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n                your potential returns.\r\n            </div>\r\n        </div>\r\n        <div class=\"calculator_section\">\r\n            <div class=\"sub-header mb-3 px-3\">\r\n                <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n            </div>\r\n\r\n            <div class=\"calculate-slider mb-4 px-3\">\r\n                <div class=\"slider-container position-relative\">\r\n                    <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                        [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                        (ngModelChange)=\"onAmountChange()\">\r\n                    <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                        <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n                        <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n                    </div>\r\n                    <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n                            [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n                            *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n                            \u20B9 {{option?.value}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"mt-3\">\r\n                    <div class=\"d-flex align-items-center justify-content-center\">\r\n                        <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                    </div>\r\n                    <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"calculator-bottom px-3 mb-5\">\r\n                <div class=\"scheme-results\">\r\n                    <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n                        <!-- Contribution Card -->\r\n                        <div class=\"col-12 col-sm-6 card-container\">\r\n                            <div class=\"card text-center h-100\">\r\n                                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                                    <div class=\"fw-bold calc_amount fs-md-5\">\r\n                                        \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                                    </div>\r\n                                    <div class=\"text-muted small\">\r\n                                        Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Plus Icon - Hidden on mobile -->\r\n                        <div class=\"col-auto d-none d-md-flex justify-content-center\">\r\n                            <div class=\"fs-3 text-muted\">+</div>\r\n                        </div>\r\n\r\n                        <!-- Benefit Card -->\r\n                        <div class=\"col-12 col-sm-6 card-container\">\r\n                            <div class=\"card text-center h-100\">\r\n                                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                                    <div class=\"fw-bold calc_amount fs-md-5\">\r\n                                        \u20B9{{benefitAmount | number}}\r\n                                    </div>\r\n                                    <div class=\"text-muted small\">\r\n                                        Scheme Benefit\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Equals Icon - Hidden on mobile -->\r\n                        <div class=\"col-auto d-none d-md-flex justify-content-center\">\r\n                            <div class=\"fs-3 text-muted\">=</div>\r\n                        </div>\r\n\r\n                        <!-- Total Card -->\r\n                        <div class=\"col-12 card-container mt-2 mt-md-0\">\r\n                            <div class=\"card text-center h-100 border-2\"\r\n                                [style.background]=\"styles?.background?.accentColor\">\r\n                                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                                    <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\r\n                                        <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n                                            \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n                                        </span>\r\n                                        <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n                                            \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"text-white-50 small\">\r\n                                        Total Redemption Value\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                    <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                        *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n                        <div class=\"store_selection  w-50 align-items-center gap-1\"\r\n                            *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n                            <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                    Store : </span></div>\r\n                            <div class=\"store-selector\">\r\n                                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n                                    <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                    <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                        {{store.name}} - {{store.storeRefId}}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                            <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                    Staff Member : </span></div>\r\n                            <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                <option value=\"\" disabled>Choose a staff member...</option>\r\n                                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                    {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                </option>\r\n                            </select>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                        simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                        [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n                        <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n                        <ng-container *ngIf=\"enrollButtonLoader\">\r\n                            <div class=\"d-flex align-items-center justify-content-center\">\r\n                                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                Loading...\r\n                            </div>\r\n                        </ng-container>\r\n                    </button>\r\n                </div>\r\n                <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                <div class=\"d-flex align-items-center mb-3\">\r\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                    Enroll in Scheme\r\n                </button>\r\n            </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n    <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n        <div class=\"faq-container\">\r\n            <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n            <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n            <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n                <div class=\"faq-list\">\r\n                    <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n                        <div class=\"faq-question\">\r\n                            <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n                            <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n                            <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n                        </div>\r\n                        <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n                            <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n    <section class=\"terms-section d-flex align-items-center justify-content-center\">\r\n        <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n            <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n            <div class=\"terms-content\">\r\n                <div class=\"term-item d-flex\"\r\n                    *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n                    <div class=\"terms_count\">\r\n                        <h3 class=\"term-heading\">{{ key }}.</h3>\r\n                    </div>\r\n                    <div>\r\n                        <p class=\"term-text\">\r\n                            {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <div class=\"important-note\">\r\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n                        Participants will be notified of any changes via registered email or SMS. Continued\r\n                        participation after notification constitutes acceptance of revised terms.</p>\r\n                </div> -->\r\n\r\n                <div class=\"footer-note\">\r\n                    <p>Last updated: 8/22/2025 | Version 3.1</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:20px;border-bottom:1px solid #e2e8f0;gap:10px}.terms_count{padding-top:.2%}.term-item:last-of-type{border-bottom:none;margin-bottom:20px}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;margin-bottom:12px;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0% 11%}.calculator_section{width:100%}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{padding:20px 0;width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.custom-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;margin:10px 0}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4d0;border:3px solid #F4C24B;cursor:pointer;box-shadow:0 2px 4px #0000001a}.custom-range::-moz-range-track{height:10px;border-radius:999px}\n"] }]
-        }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.Router }, { type: EventsService }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], showChargesTemplate: [{
-                type: ViewChild,
-                args: ['showCharges', { static: true }]
-            }], getScreenSize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class SchemesComponent extends BaseSection {
-    constructor(restService, router) {
-        super();
-        this.restService = restService;
-        this.router = router;
-    }
-    ngOnInit() {
-        this.getAllSchemes();
-        this.content = this.data?.content;
-        this.styles = this.data?.styles;
-    }
-    getAllSchemes() {
-        const payload = {
-            businessIds: [
-                localStorage.getItem('businessId') ?? ""
-            ]
-        };
-        this.restService.getAllEnrolledSchemes(payload).subscribe((response) => {
-            this.schemes = response?.data?.data;
-        }, (error) => {
-            console.error('Error fetching schemes:', error);
-        });
-    }
-    get getInputText() {
-        return this.content?.inputText[0]?.value ?? "";
-    }
-    get stylesLayout() {
-        return { ...this.styles?.layout };
-    }
-    get spacingLayout() {
-        return { ...this.styles?.layout?.spacing };
-    }
-    getParentClass() {
-        if (this.styles?.direction == 'ROW')
-            return 'overflow-scroll flex-nowrap';
-        else
-            return '';
-    }
-    getClass(index) {
-        if (window.innerWidth < 475) {
-            return 'col-12';
-        }
-        if (this.styles?.direction == 'ROW') {
-            return 'col-6 mb-2';
-        }
-        else {
-            if (this.schemes?.length % 2 != 0 && index == this.schemes?.length - 1)
-                return 'col-12 mb-2';
-            return 'col-6';
-        }
-    }
-    showSchemeDetails(scheme) {
-        console.log(scheme.id);
-        this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: scheme?.id } });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, deps: [{ token: RestService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemesComponent, isStandalone: true, selector: "simpo-schemes", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n        <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n            [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n            <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\r\n                <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n                    <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n                        <img [src]=\"scheme?.imgUrls[0]\" [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\">\r\n                        <ng-container *ngIf=\"content?.display?.showText\">\r\n                            <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">{{scheme?.schemeName ?? \"\"}}</div>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-schemes', standalone: true, imports: [
-                        CommonModule,
-                        NgFor,
-                        NgIf,
-                        HoverDirective,
-                        SimpoComponentModule,
-                        TextEditorComponent,
-                        SpacingHorizontalDirective,
-                        BackgroundDirective,
-                        SpacingDirective,
-                        SpacingAroundDirective,
-                        AnimationDirective,
-                        CornerDirective,
-                        ImageDirectiveDirective,
-                        ContentFitDirective,
-                        ColorDirective
-                    ], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n        <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n            [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n            <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\r\n                <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n                    <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n                        <img [src]=\"scheme?.imgUrls[0]\" [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\">\r\n                        <ng-container *ngIf=\"content?.display?.showText\">\r\n                            <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">{{scheme?.schemeName ?? \"\"}}</div>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
-
 class ImageLoadingComponent {
     constructor(renderer) {
         this.renderer = renderer;
@@ -18240,21 +17847,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i1$1.MatDialogRef }, { type: StorageServiceService }, { type: i4$1.MessageService }] });
 
 class SchemeDetailsComponent {
-    constructor(storageService, restService, matDialog, _eventService, router) {
-        this.storageService = storageService;
-        this.restService = restService;
-        this.matDialog = matDialog;
-        this._eventService = _eventService;
-        this.router = router;
+    constructor() {
         this.gotoSchemeOverview = new EventEmitter();
-        this.redeemRequestLoader = false;
         this.paymentData = [];
-        this.paymentLoader = false;
-        this.confirmBtnLoader = false;
-        this.slabDetails = [];
     }
     ngOnInit() {
-        this.styles = this.data?.styles;
         this.getPaymentScheme();
         this.getScreenSize();
     }
@@ -18262,18 +17859,17 @@ class SchemeDetailsComponent {
         this.screenWidth = window.innerWidth;
     }
     getPaymentScheme() {
-        this.schemeDetails.schemePayments.forEach((payment) => {
-            this.paymentData.push(payment);
-            // if (payment.paymentStatus != 'PAID') {
-            //   this.paymentData.push(payment);
-            // }
+        this.schemeDetails.paymentData.forEach((payment) => {
+            if (payment.paymentStatus != 'PAID') {
+                this.paymentData.push(payment);
+            }
         });
-        console.log(this.paymentData);
     }
     getDueDate(paymentDate) {
         if (!paymentDate)
             return null;
-        const dueDate = new Date(paymentDate); // Add 2 days to get due date
+        const dueDate = new Date(paymentDate);
+        dueDate.setDate(dueDate.getDate() + 2); // Add 2 days to get due date
         const today = new Date();
         // Strip time for accurate day comparison
         dueDate.setHours(0, 0, 0, 0);
@@ -18283,157 +17879,20 @@ class SchemeDetailsComponent {
         const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
         return diffDays;
     }
-    closeDialog() {
-        this.matDialog.closeAll();
-    }
-    payDuePayment(passBook) {
-        this.paymentLoader = true;
-        const userDetails = this.storageService.getUser();
-        let payload = {
-            userBasicDetails: {
-                customer_id: userDetails?.userId,
-                customer_name: userDetails?.contact?.name,
-                customer_phone: userDetails?.contact?.mobile,
-                customer_email: userDetails?.contact?.email,
-            },
-            schemeId: this.schemeDetails?.schemeId,
-            schemeName: this.schemeDetails?.schemeName,
-            earlyRedemptionCharge: this.schemeDetails?.enrollmentFees,
-            installmentAmount: this.schemeDetails?.installmentAmount,
-            storeRefId: this.schemeDetails?.schemeRepresentativeId,
-            storeId: this.schemeDetails?.storeId,
-            storeName: this.schemeDetails?.storeName,
-            maturityCount: this.schemeDetails?.maturityCount,
-            jewellerBenefit: this.schemeDetails?.jewellerBenefit,
-            dueMonths: this.schemeDetails?.maturityCount,
-            businessId: this.schemeDetails?.businessId,
-            businessName: this.schemeDetails?.businessName,
-            enableEarlyRedemption: this.schemeDetails?.enableEarlyRedemption,
-            redemptionSlabList: this.schemeDetails?.redemptionSlabList,
-            schemeType: this.schemeDetails?.schemeType,
-            metalType: this.schemeDetails?.metalType,
-            karatType: this.schemeDetails?.karatType,
-            passBookId: this.schemeDetails?.id,
-            passBookTransactionId: passBook?.transactionId,
-            customerAccount: ""
-        };
-        this.restService.enrollScheme(payload, true).subscribe({
-            next: (response) => {
-                if (response.data.cashfreeResponse != null) {
-                    this.continuePayment(payload);
-                }
-                else {
-                    this.storeCharges = response.data.cart;
-                    let dialog = this.matDialog.open(this.showChargesTemplate, {
-                        panelClass: 'show-charges-class'
-                    });
-                    dialog.afterClosed().subscribe(() => {
-                        this.continuePayment(payload);
-                    });
-                }
-            },
-            error: (err) => {
-                if (err?.error === 'Forbidden' && err?.status === 403) {
-                    this.restService.generateToken(localStorage.getItem('businessId'), userDetails?.userId).subscribe({
-                        next: (res) => {
-                            this.storageService.setToken(res.data.refreshToken);
-                            this.continuePayment(payload);
-                        },
-                        error: (error) => {
-                        }
-                    });
-                }
-            }
-        });
-    }
-    continuePayment(payload) {
-        this.restService.enrollScheme(payload, false).subscribe({
-            next: (response) => {
-                this.paymentLoader = false;
-                localStorage.setItem('passbookOrderId', response.data.orderId);
-                this.openCashfreeSdk(response.data.sessionId);
-            },
-            error: (error) => {
-                this.paymentLoader = false;
-                console.log(error);
-            }
-        });
-    }
-    openCashfreeSdk(sessionId) {
-        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
-    }
-    showBenefitSlab() {
-        let dialog = this.matDialog.open(this.slabListTemplate, {
-            panelClass: 'show-charges-class'
-        });
-        if (this.schemeDetails?.redemptionSlabList) {
-            this.getvalidSlabList();
-        }
-        dialog.afterClosed().subscribe((res) => {
-            this.getAllSchemes();
-        });
-    }
-    getAllSchemes() {
-        let userDetails = this.storageService.getUser();
-        let userId = userDetails?.userId;
-        this.restService.getAllSchemes(userId, this.schemeDetails?.storeId).subscribe((response) => {
-            const scheme = response?.data?.filter((scheme) => scheme.id === this.schemeDetails?.id);
-            if (scheme) {
-                this.schemeDetails = scheme[0];
-            }
-        });
-    }
-    confirmRequest() {
-        this.redeemRequestLoader = true;
-        this.restService.requestRedeemption(this.schemeDetails?.id).subscribe({
-            next: (response) => {
-                if (response) {
-                    this.redeemRequestLoader = false;
-                    this.schemeDetails.passBookStatus = 'REDEEM_REQUESTED';
-                    this.closeDialog();
-                }
-            },
-            error: (error) => {
-                this.redeemRequestLoader = false;
-                console.error("Error fetching benefit slabs:", error);
-            }
-        });
-    }
-    getvalidSlabList() {
-        this.restService.getBenefitSlab(this.schemeDetails?.id).subscribe({
-            next: (response) => {
-                if (response) {
-                    this.slabDetails = response.data;
-                }
-            },
-            error: (error) => {
-                console.error("Error fetching benefit slabs:", error);
-            }
-        });
-    }
     goBack() {
         this.gotoSchemeOverview.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Passbook Details</h1>\r\n        </div>\r\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n            *ngIf=\"schemeDetails?.passBookStatus != 'REDEEM_REQUESTED'\">Raise Redeem Request</div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div class=\"w-100\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Passbook Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n                            'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of {{schemeDetails?.schemePayments?.length}}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <!-- <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n                            schemeDetails?.schemeName :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                 <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n        <!-- <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div> -->\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Installments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n                        <div class=\"payment-item\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n                                        'N/A'}}\r\n                                        <!-- |\r\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n                                    payment.dueAmount :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n                                    Paid\r\n                                </div>\r\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #showCharges>\r\n                    <div class=\"payment-dialog\">\r\n                        <div class=\"dialog-header\">\r\n                            <h2>Payment Details</h2>\r\n                            <button class=\"close-btn\" mat-icon-button>\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <div class=\"payment-content\">\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Installment Amount:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Convenience Fee:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Payment Service Charges:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row total-row\">\r\n                                <span class=\"label total-label\">Total Amount:</span>\r\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"dialog-actions\">\r\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #showSlab>\r\n                    <div class=\"main_section\">\r\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n                            Confirm Redeem Request\r\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n                        </div>\r\n                        <div class=\"main_body\">\r\n                            <div class=\"container\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-title\">Jewellers Gold Savings Plan</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Plan started on</span>\r\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Monthly Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Redeem Amount</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Installments Paid:</span>\r\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n                                            (schemeDetails?.schemePayments?.length -\r\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Slab:</span>\r\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n                                            :\r\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n                                            months</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Percentage:</span>\r\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Amount:</span>\r\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n                                    <mat-spinner></mat-spinner>\r\n                                    Requesting..\r\n                                </button>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n                    <div class=\"transaction-status paid\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                    </div>\r\n                    <div class=\"transaction-details\">\r\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n                        </h4>\r\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n                            'N/A'}}\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"transaction-amount\">\r\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\" *ngIf=\"screenWidth>475\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Scheme Details</h1>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div [ngClass]=\"screenWidth > 475 ? 'w-75' : 'w-100'\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Scheme Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.enrollmentStatus ?\r\n                            schemeDetails?.enrollmentStatus : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails.createdTimeStamp ?\r\n                                    (schemeDetails.createdTimeStamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ? (10-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of 10</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.enrollmentGroup ?\r\n                            schemeDetails?.enrollmentGroup.genId :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                    <!-- <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Upcoming Payments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of schemeDetails.paymentData\">\r\n                        <div class=\"payment-item\" *ngIf=\"payment.paymentStatus != 'PAID'\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode : 'N/A'}}</h4>\r\n                                    <p>Date {{payment?.paymentDate ? (payment?.paymentDate | date : 'shortDate') :\r\n                                        'N/A'}} |\r\n                                        Due by: {{getDueDate(payment?.paymentDate)}} days</p>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.amountToBePaid\">\u20B9{{payment?.amountToBePaid ?\r\n                                    payment.amountToBePaid :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"payment-status upcoming-status\">Pay Now</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <div class=\"transaction-item\" *ngFor=\"let transaction of schemeDetails.paymentData\">\r\n                <div class=\"transaction-status paid\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                </div>\r\n                <div class=\"transaction-details\">\r\n                    <h4>{{transaction.paymentMonth ? transaction.paymentMonth : 'N/A' }}st Instalment\r\n                        {{transaction.paymentStatus ? (transaction.paymentStatus != \"PAID\" ? 'Due' : 'Paid') : 'N/A'}}\r\n                    </h4>\r\n                    <p>{{transaction.emiChargeDate ? (transaction.emiChargeDate | date : 'shortDate') : 'N/A'}}</p>\r\n                </div>\r\n                <div class=\"transaction-amount\" *ngIf=\"transaction.paymentStatus === 'PAID';else duePayment\">\r\n                    {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                <ng-template #duePayment>\r\n                    <p class=\"underline\">Pay Now</p>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.upcoming-status{background:#d3d3d3;font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}.pay-now-btn{background-color:#9c27b0;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer}.pay-now-btn:hover{background-color:#7b1fa2}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.highlight{color:#2563eb}.enrollment-value.zero{color:#ef4444}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule], template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Passbook Details</h1>\r\n        </div>\r\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n            *ngIf=\"schemeDetails?.passBookStatus != 'REDEEM_REQUESTED'\">Raise Redeem Request</div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div class=\"w-100\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Passbook Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n                            'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of {{schemeDetails?.schemePayments?.length}}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <!-- <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n                            schemeDetails?.schemeName :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                 <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n        <!-- <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div> -->\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Installments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n                        <div class=\"payment-item\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n                                        'N/A'}}\r\n                                        <!-- |\r\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n                                    payment.dueAmount :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n                                    Paid\r\n                                </div>\r\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #showCharges>\r\n                    <div class=\"payment-dialog\">\r\n                        <div class=\"dialog-header\">\r\n                            <h2>Payment Details</h2>\r\n                            <button class=\"close-btn\" mat-icon-button>\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                        </div>\r\n\r\n                        <div class=\"payment-content\">\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Installment Amount:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Convenience Fee:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row\">\r\n                                <span class=\"label\">Payment Service Charges:</span>\r\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                            </div>\r\n\r\n                            <div class=\"payment-row total-row\">\r\n                                <span class=\"label total-label\">Total Amount:</span>\r\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"dialog-actions\">\r\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #showSlab>\r\n                    <div class=\"main_section\">\r\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n                            Confirm Redeem Request\r\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n                        </div>\r\n                        <div class=\"main_body\">\r\n                            <div class=\"container\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-title\">Jewellers Gold Savings Plan</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Plan started on</span>\r\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Monthly Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Redeem Amount</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Installments Paid:</span>\r\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n                                            (schemeDetails?.schemePayments?.length -\r\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Slab:</span>\r\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n                                            :\r\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n                                            months</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Percentage:</span>\r\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Amount:</span>\r\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n                                    <mat-spinner></mat-spinner>\r\n                                    Requesting..\r\n                                </button>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n                    <div class=\"transaction-status paid\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                    </div>\r\n                    <div class=\"transaction-details\">\r\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n                        </h4>\r\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n                            'N/A'}}\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"transaction-amount\">\r\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}\n"] }]
-        }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { schemeDetails: [{
+            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule], template: "<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\" *ngIf=\"screenWidth>475\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Scheme Details</h1>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div [ngClass]=\"screenWidth > 475 ? 'w-75' : 'w-100'\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}</h2>\r\n                        <p>Total Available Scheme Amount</p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Scheme Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.enrollmentStatus ?\r\n                            schemeDetails?.enrollmentStatus : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.schemeAmount ? schemeDetails?.schemeAmount : 'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails.createdTimeStamp ?\r\n                                    (schemeDetails.createdTimeStamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <!-- <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme ends on</span>\r\n                                <span class=\"date-value\">5 Jan 2025</span>\r\n                            </div>\r\n                        </div> -->\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ? (10-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of 10</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.enrollmentGroup ?\r\n                            schemeDetails?.enrollmentGroup.genId :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                    <!-- <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Upcoming Payments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of schemeDetails.paymentData\">\r\n                        <div class=\"payment-item\" *ngIf=\"payment.paymentStatus != 'PAID'\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.pwcSchemeCode ? schemeDetails?.pwcSchemeCode : 'N/A'}}</h4>\r\n                                    <p>Date {{payment?.paymentDate ? (payment?.paymentDate | date : 'shortDate') :\r\n                                        'N/A'}} |\r\n                                        Due by: {{getDueDate(payment?.paymentDate)}} days</p>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.amountToBePaid\">\u20B9{{payment?.amountToBePaid ?\r\n                                    payment.amountToBePaid :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"payment-status upcoming-status\">Pay Now</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <div class=\"transaction-item\" *ngFor=\"let transaction of schemeDetails.paymentData\">\r\n                <div class=\"transaction-status paid\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                </div>\r\n                <div class=\"transaction-details\">\r\n                    <h4>{{transaction.paymentMonth ? transaction.paymentMonth : 'N/A' }}st Instalment\r\n                        {{transaction.paymentStatus ? (transaction.paymentStatus != \"PAID\" ? 'Due' : 'Paid') : 'N/A'}}\r\n                    </h4>\r\n                    <p>{{transaction.emiChargeDate ? (transaction.emiChargeDate | date : 'shortDate') : 'N/A'}}</p>\r\n                </div>\r\n                <div class=\"transaction-amount\" *ngIf=\"transaction.paymentStatus === 'PAID';else duePayment\">\r\n                    {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                <ng-template #duePayment>\r\n                    <p class=\"underline\">Pay Now</p>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.upcoming-status{background:#d3d3d3;font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}.pay-now-btn{background-color:#9c27b0;color:#fff;border:none;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer}.pay-now-btn:hover{background-color:#7b1fa2}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.completion-info{grid-column:span 1;align-items:flex-start}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.highlight{color:#2563eb}.enrollment-value.zero{color:#ef4444}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schemeDetails: [{
                 type: Input,
                 args: ["schemeDetails"]
-            }], data: [{
-                type: Input,
-                args: ["data"]
             }], gotoSchemeOverview: [{
                 type: Output
-            }], showChargesTemplate: [{
-                type: ViewChild,
-                args: ['showCharges', { static: true }]
-            }], slabListTemplate: [{
-                type: ViewChild,
-                args: ['showSlab', { static: true }]
             }], getScreenSize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -18519,37 +17978,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'simpo-list-home-appointment', standalone: true, imports: [MatIconModule, CommonModule, SimpoComponentModule, TimelineModule], template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngIf=\"homeAppointmentList.length == 0\">\r\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\r\n    </div>\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                      NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                      <div class=\"item-name\">{{item.itemName}}</div>\r\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                      <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\r\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\r\n                      {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showEmptyScreen>\r\n  <section class=\"empty-cart m-auto\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n          >\r\n      </div>\r\n      <div class=\"cart-text \">\r\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\r\n            <div class=\"heading-medium\">No Booked Appointment</div>\r\n          </div>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }] });
 
-class PassbookTransactionsComponent {
-    constructor(storageService, restService) {
-        this.storageService = storageService;
-        this.restService = restService;
-        this.allTransactions = [];
-    }
-    ngOnInit() {
-        this.getAllTransactions();
-    }
-    getAllTransactions() {
-        const userDetails = this.storageService.getUser();
-        const userId = userDetails?.userId;
-        let payload = {
-            id: userId,
-            businessId: localStorage.getItem('bId'),
-            isPagination: false
-        };
-        this.restService.getAllTransactions(payload).subscribe((res) => {
-            if (res) {
-                this.allTransactions = res?.data?.data;
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\r\n    <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n        Transactions\r\n    </div>\r\n    <div class=\"transactions h-100 overflow-scroll p-1\">\r\n        <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n            *ngFor=\"let transaction of allTransactions\">\r\n            <div class=\"left d-flex align-items-center gap-3\">\r\n                <div class=\"d-flex\">\r\n                    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n                        alt=\"load\">\r\n                </div>\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n                        : 'N/A' }} Instalment Paid</div>\r\n                    <div class=\"bottom d-flex gap-2\">\r\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold\">{{transaction?.paidDate ? (transaction?.paidDate\r\n                            | date : 'dd-MM-yyy') : 'N/A'}}</div>\r\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold\">&nbsp;\r\n                            &#x2022;&nbsp;&nbsp;&nbsp;{{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex text-end\">\r\n                <div class=\"fs-18 lh-28 fw-bold clr-primary\">\u20B9 {{transaction?.paidAmount ? transaction?.paidAmount :\r\n                    'N/A'}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\r\n    <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n        Transactions\r\n    </div>\r\n    <div class=\"transactions h-100 overflow-scroll p-1\">\r\n        <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n            *ngFor=\"let transaction of allTransactions\">\r\n            <div class=\"left d-flex align-items-center gap-3\">\r\n                <div class=\"d-flex\">\r\n                    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n                        alt=\"load\">\r\n                </div>\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n                        : 'N/A' }} Instalment Paid</div>\r\n                    <div class=\"bottom d-flex gap-2\">\r\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold\">{{transaction?.paidDate ? (transaction?.paidDate\r\n                            | date : 'dd-MM-yyy') : 'N/A'}}</div>\r\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold\">&nbsp;\r\n                            &#x2022;&nbsp;&nbsp;&nbsp;{{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex text-end\">\r\n                <div class=\"fs-18 lh-28 fw-bold clr-primary\">\u20B9 {{transaction?.paidAmount ? transaction?.paidAmount :\r\n                    'N/A'}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}\n"] }]
-        }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
-
 class UserProfileComponent extends BaseSection {
     constructor(router, _eventService, restService, storageService, cartService, matDialog, matBottomSheet, cookieService, messageService, route) {
         super();
@@ -18567,12 +17995,11 @@ class UserProfileComponent extends BaseSection {
         this.selectedSidePanelTab = window.innerWidth > 475 ? "Orders" : "";
         this.userDetails = null;
         this.addressList = [];
-        this.storeListing = [];
         this.sidePanelList = [
             { value: "Orders", icon: "accessibility", status: true, label: "Heading", url: 'order', image: "ORDER" },
             { value: "Address", icon: "location_on", status: false, label: "Heading", url: 'address', image: "LOCATION" },
             { value: "Wishlist", icon: "location_on", status: false, label: "Heading", url: 'address', image: "WISHLIST" },
-            // { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" }, // remove later
+            // { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" },
             // { value: "Try At Home", icon: "location_on", status: false, label: "Heading", url: 'address', image: "TRY_AT_HOME" },
             // { value: "Scheme Details" , icon : "https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png" ,  status : false , label: "Heading", url: 'https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png', image: "https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png" }
             // { value: "Account Details", icon: "supervised_user_circle", status: false, label: "Heading", url: 'account' },
@@ -18581,13 +18008,8 @@ class UserProfileComponent extends BaseSection {
         this.tabs = [];
         this.orderList = [];
         this.wishlistData = [];
-        this.storeId = '';
-        this.payDueLoader = false;
-        this.overAllDues = [];
-        this.totalSavings = 0;
         this.userEnrollments = [];
         this.paymentData = [];
-        this.totalSchemes = [];
         this.screenWidth = 0;
         this.route.queryParams.subscribe(params => {
             const tab = params['tab'];
@@ -18597,7 +18019,10 @@ class UserProfileComponent extends BaseSection {
         });
     }
     ngOnInit() {
-        this.checkPassbookApp();
+        if (window?.location?.origin?.includes('caratlane') || window?.location?.origin?.includes('orra')) {
+            this.sidePanelList.push({ value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" });
+            this.getAllSchemes();
+        }
         this.getScreenSize();
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
@@ -18607,128 +18032,11 @@ class UserProfileComponent extends BaseSection {
             this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Please login to access profile' });
             this.router.navigate(['/']);
         }
-        this.route.queryParams.subscribe(params => {
-            const tab = params['tab'];
-            if (tab) {
-                this.selectedSidePanelTab = tab;
-                this.sidePanelList?.forEach(item => {
-                    if (item.value === tab) {
-                        item.status = true;
-                    }
-                    else {
-                        item.status = false;
-                    }
-                });
-            }
-        });
         this.styles = this.data?.styles;
         this.content = this.data?.content;
         this.getUserOrderDetails();
         this.getUserWislistDetails();
         this.getEcommerceConfigs();
-        this.getAllStores();
-    }
-    checkPassbookApp() {
-        this.restService.PassbookAppStatus(localStorage.getItem("bId")).subscribe((response) => {
-            if (response?.data) {
-                this.sidePanelList.push({ value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" }, { value: "Transactions", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" });
-                if (localStorage.getItem("websiteType") === 'STATIC') {
-                    this.sidePanelList = this.sidePanelList.filter((item) => {
-                        if (item.value === 'Scheme Passbook' || item.value === 'Transactions') {
-                            return item;
-                        }
-                    });
-                    this.selectedSidePanelTab = 'Scheme Passbook';
-                }
-                this.sidePanelList?.forEach(item => {
-                    if (item.value === this.selectedSidePanelTab) {
-                        item.status = true;
-                    }
-                    else {
-                        item.status = false;
-                    }
-                });
-                this.getAllSchemes();
-                this.getAllPassbookDues();
-            }
-        });
-    }
-    closeDialog() {
-        this.matDialog.closeAll();
-    }
-    payDue(payment) {
-        this.payDueLoader = true;
-        const userDetails = this.storageService.getUser();
-        let payload = {
-            userBasicDetails: {
-                customer_id: userDetails?.userId,
-                customer_name: userDetails?.contact?.name,
-                customer_phone: userDetails?.contact?.mobile,
-                customer_email: userDetails?.contact?.email,
-            },
-            passBookTransactionId: payment?.transactionId,
-            businessId: payment?.businessId,
-            storeId: payment?.storeId,
-            passBookId: payment?.passbookId,
-            schemeType: payment?.schemeType,
-            installmentAmount: payment?.dueAmount,
-            earlyRedemptionCharge: 0
-        };
-        this.restService.enrollScheme(payload, true).subscribe({
-            next: (response) => {
-                if (response.data.cashfreeResponse != null) {
-                    this.continuePayment(payload);
-                }
-                else {
-                    this.storeCharges = response.data.cart;
-                    let dialog = this.matDialog.open(this.showChargesTemplate, {
-                        panelClass: 'show-charges-class'
-                    });
-                    dialog.afterClosed().subscribe(() => {
-                        this.continuePayment(payload);
-                    });
-                }
-            },
-            error: (err) => {
-                console.log(err);
-            }
-        });
-    }
-    continuePayment(payload) {
-        this.restService.enrollScheme(payload, false).subscribe({
-            next: (response) => {
-                this.payDueLoader = false;
-                localStorage.setItem('passbookOrderId', response.data.orderId);
-                this.openCashfreeSdk(response.data.sessionId);
-            },
-            error: (error) => {
-                this.payDueLoader = false;
-            }
-        });
-    }
-    openCashfreeSdk(sessionId) {
-        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
-    }
-    getAllPassbookDues() {
-        this.restService
-            .getAllPassbookDues(localStorage.getItem('bId'), this.userDetails?.userId)
-            .subscribe((response) => {
-            const data = response?.data?.data ?? [];
-            const now = new Date();
-            this.overAllDues = data.filter((item) => {
-                if (!item?.dueDate)
-                    return false; // no due date -> exclude
-                const due = new Date(item.dueDate);
-                if (isNaN(due.getTime()))
-                    return false; // invalid date -> exclude
-                return due < now; // only past due
-            });
-        });
-    }
-    getAllStores() {
-        this.restService.getStoreById('').subscribe((res) => {
-            this.storeListing = res.data.data;
-        });
     }
     getEcommerceConfigs() {
         this.restService.getEcommerceConfigs().subscribe((res) => {
@@ -18753,28 +18061,19 @@ class UserProfileComponent extends BaseSection {
     }
     getAllSchemes() {
         let userDetails = this.storageService.getUser();
-        let userId = userDetails?.userId;
-        this.restService.getAllSchemes(userId, this.storeId).subscribe((response) => {
-            // console.log("response", response);
-            this.totalSchemes = response?.data;
-            response?.data.forEach((scheme) => {
-                this.totalSavings += scheme?.totalPaidAmount;
+        let userCode = userDetails?.pwcUserCode;
+        this.restService.getAllSchemes(userCode).subscribe((response) => {
+            this.passbookSummary = response?.data?.passBookSummary;
+            this.userEnrollments = response.data?.userEnrollments;
+            this.userEnrollments.forEach((enrollment) => {
+                this.paymentData.push(enrollment.paymentData);
             });
-            this.paymentData = this.totalSchemes.flatMap((scheme) => (scheme?.schemePayments || []).map((payment) => ({
-                ...payment,
-                schemeName: scheme?.schemeName || scheme?.name || ''
-            })));
-            // this.userEnrollments = response.data?.userEnrollments;
-            // this.userEnrollments.forEach((enrollment: any) => {
-            //   this.paymentData.push(enrollment.paymentData);
-            // });
+            this.paymentData = this.paymentData.flatMap(payment => payment);
             const currentDate = new Date();
-            this.paymentData = this.paymentData.filter((payment) => payment.paymentStatus !== 'PAID');
             this.paymentData.forEach((payment) => {
                 payment.overdueStatus = false;
                 if (payment.paymentStatus === 'DUE') {
-                    payment.daysOverdue = 0;
-                    const paymentDate = new Date(payment.dueDate);
+                    const paymentDate = new Date(payment.paymentDate);
                     if (paymentDate < currentDate) {
                         payment.overdueStatus = true;
                         const timeDiff = currentDate.getTime() - paymentDate.getTime();
@@ -18785,11 +18084,8 @@ class UserProfileComponent extends BaseSection {
                     }
                 }
             });
-            // this.paymentData = this.paymentData.filter(p =>
-            //   p.paymentStatus === 'DUE' &&
-            //   new Date(p.paymentDate) < currentDate
-            // );
-            // console.log("paymentData", this.paymentData);
+            this.paymentData = this.paymentData.filter(p => p.paymentStatus === 'DUE' &&
+                new Date(p.paymentDate) < currentDate);
         });
     }
     getUserWislistDetails() {
@@ -19075,13 +18371,8 @@ class UserProfileComponent extends BaseSection {
     getOrderedItems(order) {
         return order?.brandOrderDetails?.[0]?.orderedItems.slice(0, 3) || [];
     }
-    changeStore(ev) {
-        this.storeId = ev.target.value;
-        this.totalSavings = 0;
-        this.getAllSchemes();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$2.MatBottomSheet }, { token: i2$3.CookieService }, { token: i4$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\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\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            'N/A'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            'N/A'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp | date:'dd-MM-yyyy') :\r\n                                'N/A' }}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:auto!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], 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 *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\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\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100\">\r\n        <div class=\"header\">\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <h3>Available Savings</h3>\r\n                        <div class=\"amount\">{{passbookSummary?.totalSavingAmount ? passbookSummary?.totalSavingAmount :\r\n                            'N/A'}}</div>\r\n                        <div class=\"subtitle\">+1,000 this month</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Schemes</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{passbookSummary?.totalSchemesEnrolled ?\r\n                            passbookSummary?.totalSchemesEnrolled : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"section d-flex-flex-column gap-2\">\r\n                    <div class=\"section-header\">\r\n                        <h2 class=\"section-title\">Upcoming Payments</h2>\r\n                    </div>\r\n                    <div class=\"payment-list d-flex flex-column gap-2\">\r\n                        <ng-container *ngIf=\"paymentData?.length; else showEmptyPayment\">\r\n                            <div class=\"payment-item\" *ngFor=\"let payment of paymentData.slice(0,2)\"\r\n                                [ngClass]=\"{'overdue': payment.overdue}\">\r\n                                <div class=\"payment-info\">\r\n                                    <div class=\"payment-icon\"><img\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\"\r\n                                            *ngIf=\"payment.overdue\">\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdue && payment.paymentStatus === 'PAID'\">\r\n                                    </div>\r\n                                    <div class=\"payment-details\">\r\n                                        <h4>Smart EMA - 3rd EMI</h4>\r\n                                        <span>Date {{payment.paymentDate ? (payment.paymentDate | date:'shortDate') :\r\n                                            'N/A'}} | Due by: {{payment.daysOverdue ? payment.daysOverdue : 0}}\r\n                                            days</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"payment-amount\">\r\n                                    <div class=\"amount-value\">\u20B9{{payment.amountToBePaid ? payment.amountToBePaid :\r\n                                        'N/A'}}\r\n                                    </div>\r\n                                    <div class=\"payment-status\"\r\n                                        [ngClass]=\"payment.overdue ? 'overdue-status' : 'upcoming-status'\">\r\n                                        {{payment.overdue\r\n                                        ? 'Overdue' : 'Upcoming'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #showEmptyPayment>\r\n                            <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                <span>No Upcoming Payments</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"quick-actions\">\r\n                <h3>Quick Actions</h3>\r\n                <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\">&nbsp;&nbsp;&nbsp;View\r\n                    Passbook</div>\r\n                <button class=\"enroll-btn\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                    New Scheme</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Schemes</h2>\r\n            </div>\r\n\r\n           <div class=\"schemes-grid\">\r\n  <ng-container *ngIf=\"userEnrollments && userEnrollments.length > 0; else showActiveScheme\">\r\n    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n         *ngFor=\"let scheme of userEnrollments; let i = index\"\r\n         (click)=\"viewSchemeDetails(scheme)\">\r\n      <div class=\"scheme-header\">\r\n        <div>\r\n          <div class=\"scheme-title\">{{ scheme?.pwcSchemeCode || 'N/A' }}</div>\r\n          <div class=\"scheme-amount\">\u20B9{{ scheme?.schemeAmount || 'N/A' }}/Monthly</div>\r\n        </div>\r\n        <div class=\"scheme-date\">\r\n          Enrolled: {{ scheme?.createdTimeStamp ? (scheme?.createdTimeStamp | date:'dd-MM-yyyy') : 'N/A' }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n        {{\r\n          scheme.enrollmentStatus ? (\r\n            (scheme.enrollmentStatus === 'ACTIVE' ||\r\n            scheme.enrollmentStatus === 'DEFAULT' ||\r\n            scheme.enrollmentStatus === 'Default') ? 'ACTIVE' :\r\n            (scheme.enrollmentStatus === 'COMPLETED' ? 'COMPLETED' : 'N/A')\r\n          ) : 'N/A'\r\n        }}\r\n      </div>\r\n\r\n      <div class=\"scheme-stats\">\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.amountPaid || 'N/A' }}</div>\r\n          <div class=\"stat-label\">Deposited Amount</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">\r\n            {{\r\n              scheme?.dueMonths != null && scheme?.dueMonths != undefined ? (10 - scheme.dueMonths) : 'N/A'\r\n            }}\r\n          </div>\r\n          <div class=\"stat-label\">Paid Months</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.dueMonths != null && scheme?.dueMonths != undefined ? scheme?.dueMonths : 'N/A' }}</div>\r\n          <div class=\"stat-label\">Due Months</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-footer\">\r\n        <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') : 'N/A' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #showActiveScheme>\r\n    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n      <span>No Active Scheme</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n        </div>\r\n\r\n        <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\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: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}@media screen and (max-width:475px){.total-container{height:auto!important}.amount,.scheme-count{font-size:20px!important}}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{width:24%!important}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -19106,13 +18397,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         ImageEditorDirective,
                         SchemeDetailsComponent,
-                        ListHomeAppointmentComponent,
-                        PassbookTransactionsComponent
-                    ], 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 *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Transactions'\">\r\n                    <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n                *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\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\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100 overflow-scroll\">\r\n        <div class=\"header d-flex flex-column\">\r\n            <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n                    class=\"store-listing\" (change)=\"changeStore($event)\">\r\n                    <option value=\"\">Select Store</option>\r\n                    <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n                </select></div>\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n                            <h3>Available Savings</h3>\r\n                            <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n                        </div>\r\n\r\n                        <div class=\"amount\">{{totalSavings ? totalSavings :\r\n                            'N/A'}}</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Passbooks</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n                            totalSchemes.length : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"overAllDues?.length\">\r\n                    <div class=\"section d-flex-flex-column gap-2\">\r\n                        <div class=\"section-header\">\r\n                            <h2 class=\"section-title\">Due Payments</h2>\r\n                        </div>\r\n                        <div class=\"payment-list d-flex flex-column gap-2\">\r\n                            <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n                                <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n                                    <div class=\"payment-info\">\r\n                                        <div class=\"payment-icon\"><img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n                                            <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n                                        </div>\r\n                                        <div class=\"payment-details\">\r\n                                            <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n                                            <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n                                                'N/A'}}\r\n                                                <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n                                                ? payment.daysOverdue : 0}}</span> --></span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"payment-amount\">\r\n                                        <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n                                            'N/A'}}\r\n                                        </div>\r\n                                        <div class=\"payment-status  overdue-status cursor-pointer\"\r\n                                            (click)=\"payDue(payment)\">\r\n                                            <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n                                            <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-template #showEmptyPayment>\r\n                                <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                    <span>No Due Payments</span>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section mt-3\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n            </div>\r\n\r\n            <div class=\"schemes-grid\">\r\n                <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n                    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n                        *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n                        <div class=\"scheme-header\">\r\n                            <div>\r\n                                <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n                                <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\r\n                            </div>\r\n                            <div class=\"scheme-date\">\r\n                                Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp | date:'dd-MM-yyyy') :\r\n                                'N/A' }}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n                            {{\r\n                            scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n                            }}\r\n                        </div>\r\n\r\n                        <div class=\"scheme-stats\">\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{ scheme?.totalPaidAmount || 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Deposited Amount</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">\r\n                                    {{\r\n                                    scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    (scheme?.schemePayments?.length -\r\n                                    scheme.dueMonths) : 'N/A'\r\n                                    }}\r\n                                </div>\r\n                                <div class=\"stat-label\">Paid Months</div>\r\n                            </div>\r\n                            <div class=\"stat\">\r\n                                <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n                                    scheme?.dueMonths : 'N/A' }}</div>\r\n                                <div class=\"stat-label\">Due Months</div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"scheme-footer\">\r\n                            <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n                                'N/A' }}</span>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-template #showActiveScheme>\r\n                    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                        <span>No Active Scheme</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n\r\n        </div>\r\n\r\n        <!-- <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div> -->\r\n    </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n    <div class=\"payment-dialog\">\r\n        <div class=\"dialog-header\">\r\n            <h2>Payment Details</h2>\r\n            <button class=\"close-btn\" mat-icon-button>\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"payment-content\">\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Installment Amount:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Convenience Fee:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row\">\r\n                <span class=\"label\">Payment Service Charges:</span>\r\n                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n            </div>\r\n\r\n            <div class=\"payment-row total-row\">\r\n                <span class=\"label total-label\">Total Amount:</span>\r\n                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"dialog-actions\">\r\n            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n    <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:auto!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$2.MatBottomSheet }, { type: i2$3.CookieService }, { type: i4$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
-                type: ViewChild,
-                args: ['showCharges', { static: true }]
-            }], data: [{
+                        ListHomeAppointmentComponent
+                    ], 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 *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n    [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n    [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-4 profile-box shadow-lg\"\r\n            style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n            [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n            <!-- Profile Header Section -->\r\n            <div class=\"d-flex align-items-center profile-header\"\r\n                style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n                <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                        [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n                        style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n                    <div class=\"online-indicator\"\r\n                        style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"profile-details flex-grow-1\">\r\n                    <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n                        {{getUserDetails?.contact?.name}}</h4>\r\n\r\n                    <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                        </h6>\r\n\r\n                        <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n                            *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n                            style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n                            <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n                            <span>{{getUserDetails?.contact?.email}}</span>\r\n                        </h6>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Navigation Tabs Section -->\r\n            <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center tab-item\"\r\n                        style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n                        [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n                        [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n                        [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n                        [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n                        <div class=\"tab-icon-wrapper\"\r\n                            style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n                            <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n                        </div>\r\n\r\n                        <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n                            {{tab.value}}</div>\r\n\r\n                        <!-- Hover effect background -->\r\n                        <div class=\"tab-hover-bg\"\r\n                            style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <!-- Action Buttons Section -->\r\n            <div class=\"d-flex action-buttons\"\r\n                style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n                <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                    [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n                    Edit Profile\r\n                </button>\r\n\r\n                <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                    [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n                    style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n                    Logout\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n                    (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n                            style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n                                <mat-icon>stay_primary_portrait</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.mobile}}</span>\r\n                            </h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n                                *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n                                <span>{{getUserDetails?.contact?.email}}</span>\r\n                            </h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n                                [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n                                [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n                                    [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n                                    {{tab.value}}</div>\r\n                            </div>\r\n\r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n                            [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n                    <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n                    <simpo-list-home-appointment></simpo-list-home-appointment>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\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\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n    <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n                {{tab.value}}</div>\r\n        </ng-container>\r\n    </div> -->\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n                            [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n                    </div>\r\n                    <div class=\"cart-text \">\r\n                        <ng-container *ngFor=\"let text of content?.inputText\">\r\n                            <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n                                [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n                                <simpo-text-editor [(value)]=\"text.value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n        (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h3 class=\"title-text\">My Address</h3>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n            [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n                    <div class=\"card-body p-3\">\r\n                        <!-- Header Section -->\r\n                        <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                            <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n                                <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n                                <div class=\"icon-grp d-flex\">\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                                    <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n                                        (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"address-content mb-3\">\r\n                            <div class=\"address-line mb-2\">\r\n                                <span class=\"text-muted small d-block\">Address</span>\r\n                                <span class=\"address-text\">{{address.addressLine1}}</span>\r\n                            </div>\r\n                            <div class=\"phone-info\">\r\n                                <span class=\"text-muted small d-block\">Phone</span>\r\n                                <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\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://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                    </div>\r\n                    <div class=\"cart-text\">\r\n                        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n                        </div>\r\n                        <!-- </ng-container> -->\r\n                    </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n        <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n            <!-- Header Section -->\r\n            <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n                <div class=\"order-number\">\r\n                    <h4 class=\"mb-0  fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n                </div>\r\n                <div class=\"arrow-icon\">\r\n                    <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"ordered-item row mb-2\">\r\n                <ng-container *ngFor=\"let item of  getOrderedItems(order)\">\r\n                    <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n                            onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                            class=\"item-img w-50\">\r\n                        <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Middle Section -->\r\n            <div class=\"order-details\">\r\n                <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n                    <span class=\"text-muted small mb-3 mb-sm-0\">\r\n                        {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"amount-section\">\r\n                    <span class=\"h5 mb-0 text-success fw-bold\">\r\n                        <span [innerHTML]=\"currency\"></span>\r\n                        {{(order.billDetails.discountAmount ?\r\n                        (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n                        order?.billDetails?.totalTaxAfterDiscount) :\r\n                        order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n                    </span>\r\n                </div>\r\n                <div class=\"status-section\">\r\n                    <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n                        {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n    <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n    <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n        <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"address-card mb-2\">\r\n                    <div class=\"card-body p-4\">\r\n                        <div class=\"row align-items-center\">\r\n                            <div class=\"col-auto\">\r\n                                <div class=\"product-image-wrapper\">\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col\">\r\n                                <div class=\"product-details\">\r\n                                    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n                                        <div\r\n                                            class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n                                            <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n                                                {{item.itemName}}\r\n                                            </h6>\r\n                                            <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n                                                <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n                                                    title=\"Remove from wishlist\">\r\n                                                    <mat-icon class=\"small-icon\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                            <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n                                                <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n                                                    <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"product-price mb-3\">\r\n                                        <span class=\"h5 text-success fw-bold mb-0\">\r\n                                            <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n                                        </span>\r\n                                        <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n                                            ({{item.quantity}} items)\r\n                                        </span>\r\n                                    </div>\r\n                                    <div class=\"action-buttons d-flex  gap-2\">\r\n                                        <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n                                            *ngIf=\"item.quantity\">\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                                                -\r\n                                            </button>\r\n                                            <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n                                                {{item.quantity}}\r\n                                            </span>\r\n                                            <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n                                                (click)=\"addToFav(item, 'ADD')\"> +\r\n                                            </button>\r\n                                        </div>\r\n                                        <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n                                            (click)=\"addToFav(item, 'ADD')\">\r\n                                            + Add Quantity\r\n                                        </button>\r\n                                        <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n                                            Move to Cart\r\n                                        </button>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\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]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                </div>\r\n                <div class=\"cart-text\">\r\n                    <ng-container>\r\n                        <div class=\"heading-medium d-flex justify-content-center\">\r\n                            Your Wishlist is Empty</div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n    <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n    <div class=\"row gap-2\">\r\n        <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n            <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n                <div class=\"card-header row gap-2\">\r\n                    <div class=\"card-head-left col-7\">\r\n                        <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n                        <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n                    </div>\r\n                    <div class=\"card-head-right col-4 text-center align-content-center\">\r\n                        <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body d-flex p-0 mb-3\">\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n                            class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n                        <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n                        <div class=\"card-sub-text text-center\">Rewards</div>\r\n                    </div>\r\n                    <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n                            alt=\"\" class=\"w-40 mb-2\">\r\n                        <div class=\"card-text text-center fw-600\">8</div>\r\n                        <div class=\"card-sub-text text-center\">Due Months</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-footer row\">\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n                            may 2025</span>\r\n                    </div>\r\n                    <div class=\"col-6 d-flex gap-2 p-0\">\r\n                        <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n                            may 2026</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n    <div class=\"w-100 h-100\">\r\n        <div class=\"header\">\r\n            <div class=\"scheme-overview d-flex flex-column\">\r\n                <div class=\"d-flex gap-3\">\r\n                    <div class=\"available-savings\">\r\n                        <h3>Available Savings</h3>\r\n                        <div class=\"amount\">{{passbookSummary?.totalSavingAmount ? passbookSummary?.totalSavingAmount :\r\n                            'N/A'}}</div>\r\n                        <div class=\"subtitle\">+1,000 this month</div>\r\n                    </div>\r\n                    <div class=\"active-schemes\">\r\n                        <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n                            <h3>Active Schemes</h3>\r\n                            <div class=\"auto-pay-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"scheme-count\">{{passbookSummary?.totalSchemesEnrolled ?\r\n                            passbookSummary?.totalSchemesEnrolled : 'N/A'}}</div>\r\n                        <div class=\"subtitle\">On Track</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"section d-flex-flex-column gap-2\">\r\n                    <div class=\"section-header\">\r\n                        <h2 class=\"section-title\">Upcoming Payments</h2>\r\n                    </div>\r\n                    <div class=\"payment-list d-flex flex-column gap-2\">\r\n                        <ng-container *ngIf=\"paymentData?.length; else showEmptyPayment\">\r\n                            <div class=\"payment-item\" *ngFor=\"let payment of paymentData.slice(0,2)\"\r\n                                [ngClass]=\"{'overdue': payment.overdue}\">\r\n                                <div class=\"payment-info\">\r\n                                    <div class=\"payment-icon\"><img\r\n                                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\"\r\n                                            *ngIf=\"payment.overdue\">\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n                                            *ngIf=\"!payment.overdue && payment.paymentStatus === 'PAID'\">\r\n                                    </div>\r\n                                    <div class=\"payment-details\">\r\n                                        <h4>Smart EMA - 3rd EMI</h4>\r\n                                        <span>Date {{payment.paymentDate ? (payment.paymentDate | date:'shortDate') :\r\n                                            'N/A'}} | Due by: {{payment.daysOverdue ? payment.daysOverdue : 0}}\r\n                                            days</span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"payment-amount\">\r\n                                    <div class=\"amount-value\">\u20B9{{payment.amountToBePaid ? payment.amountToBePaid :\r\n                                        'N/A'}}\r\n                                    </div>\r\n                                    <div class=\"payment-status\"\r\n                                        [ngClass]=\"payment.overdue ? 'overdue-status' : 'upcoming-status'\">\r\n                                        {{payment.overdue\r\n                                        ? 'Overdue' : 'Upcoming'}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-template #showEmptyPayment>\r\n                            <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n                                <span>No Upcoming Payments</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"quick-actions\">\r\n                <h3>Quick Actions</h3>\r\n                <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\">&nbsp;&nbsp;&nbsp;View\r\n                    Passbook</div>\r\n                <button class=\"enroll-btn\"><img\r\n                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                    New Scheme</button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"section\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Your Active Schemes</h2>\r\n            </div>\r\n\r\n           <div class=\"schemes-grid\">\r\n  <ng-container *ngIf=\"userEnrollments && userEnrollments.length > 0; else showActiveScheme\">\r\n    <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n         *ngFor=\"let scheme of userEnrollments; let i = index\"\r\n         (click)=\"viewSchemeDetails(scheme)\">\r\n      <div class=\"scheme-header\">\r\n        <div>\r\n          <div class=\"scheme-title\">{{ scheme?.pwcSchemeCode || 'N/A' }}</div>\r\n          <div class=\"scheme-amount\">\u20B9{{ scheme?.schemeAmount || 'N/A' }}/Monthly</div>\r\n        </div>\r\n        <div class=\"scheme-date\">\r\n          Enrolled: {{ scheme?.createdTimeStamp ? (scheme?.createdTimeStamp | date:'dd-MM-yyyy') : 'N/A' }}\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-status active-status d-flex justify-content-center align-items-center\">\r\n        {{\r\n          scheme.enrollmentStatus ? (\r\n            (scheme.enrollmentStatus === 'ACTIVE' ||\r\n            scheme.enrollmentStatus === 'DEFAULT' ||\r\n            scheme.enrollmentStatus === 'Default') ? 'ACTIVE' :\r\n            (scheme.enrollmentStatus === 'COMPLETED' ? 'COMPLETED' : 'N/A')\r\n          ) : 'N/A'\r\n        }}\r\n      </div>\r\n\r\n      <div class=\"scheme-stats\">\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.amountPaid || 'N/A' }}</div>\r\n          <div class=\"stat-label\">Deposited Amount</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">\r\n            {{\r\n              scheme?.dueMonths != null && scheme?.dueMonths != undefined ? (10 - scheme.dueMonths) : 'N/A'\r\n            }}\r\n          </div>\r\n          <div class=\"stat-label\">Paid Months</div>\r\n        </div>\r\n        <div class=\"stat\">\r\n          <div class=\"stat-value\">{{ scheme?.dueMonths != null && scheme?.dueMonths != undefined ? scheme?.dueMonths : 'N/A' }}</div>\r\n          <div class=\"stat-label\">Due Months</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"scheme-footer\">\r\n        <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') : 'N/A' }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-template #showActiveScheme>\r\n    <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n      <span>No Active Scheme</span>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n\r\n        </div>\r\n\r\n        <div class=\"auto-pay\">\r\n            <div class=\"auto-pay-icon mobile-icon\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n            <div class=\"auto-pay-content\">\r\n                <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n                <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n            </div>\r\n            <button class=\"manage-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n    <simpo-scheme-details [schemeDetails]=\"schemeDetails\"\r\n        (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\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: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}@media screen and (max-width:475px){.total-container{height:auto!important}.amount,.scheme-count{font-size:20px!important}}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{width:24%!important}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:98%!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$2.MatBottomSheet }, { type: i2$3.CookieService }, { type: i4$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -19537,12 +18824,9 @@ class VerifyComponent extends BaseSection {
         this.messageService = messageService;
         this._eventService = _eventService;
         this.userDetails = null;
-        this.paymentStatus = 'ONGOING';
         this.loadingText = "Please wait...";
         this.API_COUNT = 0;
         this.MAX_API_COUNT = 20;
-        this.PASSBOOK_API_COUNT = 0;
-        this.MAX_PASSBOOK_API_COUNT = 20;
     }
     ngOnInit() {
         this.content = this.data?.content;
@@ -19555,21 +18839,15 @@ class VerifyComponent extends BaseSection {
         if (localStorage.getItem("REQUEST_FROM") == "ECOMMERCE")
             return;
         setTimeout(() => {
-            this.loadingText = 'Thanks for choosing us';
+            this.loadingText = this.content?.inputText?.[0]?.value ?? 'Thanks for choosing us';
             setTimeout(() => {
-                this.loadingText = 'We are processing your payments';
+                this.loadingText = this.content?.inputText?.[1]?.value ?? 'We are processing your payments';
                 setTimeout(() => {
-                    this.loadingText = 'Hold On...';
+                    this.loadingText = this.content?.inputText?.[2]?.value ?? 'Hold On...';
+                    this.checkPaymentStatus();
                 }, 3000);
             }, 3000);
         }, 3000);
-        const passBookOrderId = localStorage.getItem("passbookOrderId");
-        if (passBookOrderId) {
-            this.checkPassbookPaymentStatus();
-        }
-        else {
-            this.checkPaymentStatus();
-        }
     }
     get getImageUrl() {
         return this.content?.image?.url;
@@ -19587,83 +18865,34 @@ class VerifyComponent extends BaseSection {
             localStorage.removeItem("cartId");
             localStorage.removeItem("paymentFor");
             this.storageService.clearUserCart();
-            this.paymentStatus = 'SUCCESS';
-            setTimeout(() => {
-                this.router.navigate(['/profile']);
-            }, 3000);
-            // Swal.fire({
-            //   icon: "success",
-            //   title: "Hurray",
-            //   text: "Order placed successfully",
-            //   confirmButtonText: "See Details"
-            // }).then((response) => {
-            //   if (response.isConfirmed) {
-            //     this.router.navigate(['/profile']);
-            //   }
-            // })
+            Swal.fire({
+                icon: "success",
+                title: "Hurray",
+                text: "Order placed successfully",
+                confirmButtonText: "See Details"
+            }).then((response) => {
+                if (response.isConfirmed) {
+                    this.router.navigate(['/profile']);
+                }
+            });
         }, (error) => {
             if (this.API_COUNT >= this.MAX_API_COUNT) {
-                this.paymentStatus = 'FAILED';
-                setTimeout(() => {
-                    this.router.navigate(['/']);
-                }, 3000);
-                // Swal.fire({
-                //   icon: "error",
-                //   title: "Sorry",
-                //   text: "We encountered some issue while placing your order",
-                //   confirmButtonText: "Go To Home"
-                // }).then((response) => {
-                //   if (response.isConfirmed) {
-                //     this.router.navigate(['/']);
-                //   }
-                // })
+                Swal.fire({
+                    icon: "error",
+                    title: "Sorry",
+                    text: "We encountered some issue while placing your order",
+                    confirmButtonText: "Go To Home"
+                }).then((response) => {
+                    if (response.isConfirmed) {
+                        this.router.navigate(['/']);
+                    }
+                });
             }
             else {
                 this.checkPaymentStatus();
             }
         });
     }
-    checkPassbookPaymentStatus() {
-        const orderId = localStorage.getItem("passbookOrderId");
-        this.PASSBOOK_API_COUNT++;
-        this.restService.getPassbookOrderStatus(orderId).subscribe((response) => {
-            localStorage.removeItem("passbookOrderId");
-            this.paymentStatus = 'SUCCESS';
-            setTimeout(() => {
-                this.router.navigate(['/profile']);
-            }, 3000);
-            // Swal.fire({
-            //   icon: "success",
-            //   title: "Hurray",
-            //   text: "Payment Successful",
-            //   confirmButtonText: "See Details"
-            // }).then((response) => {
-            //   if (response.isConfirmed) {
-            //     this.router.navigate(['/profile'], {queryParams: {tab: 'Scheme Passbook'}});
-            //   }
-            // })
-        }, (error) => {
-            if (this.PASSBOOK_API_COUNT >= this.MAX_PASSBOOK_API_COUNT) {
-                // Swal.fire({
-                //   icon: "error",
-                //   title: "Sorry",
-                //   text: "We encountered some issue while placing your order",
-                //   confirmButtonText: "Go To Home"
-                // }).then((response) => {
-                //   if (response.isConfirmed) {
-                //     this.router.navigate(['/']);
-                //   }
-                // })
-                this.paymentStatus = 'FAILED';
-                setTimeout(() => {
-                    this.router.navigate(['/']);
-                }, 3000);
-            }
-            else {
-                this.checkPassbookPaymentStatus();
-            }
-        });
-    }
     editSection() {
         if (window.innerWidth <= 475)
             return;
@@ -19673,7 +18902,7 @@ class VerifyComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: StorageServiceService }, { token: i4$1.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section> -->\r\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Successfull\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Your payment has been successfully processed.\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Subscribed Plan\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ planName | titlecase }}\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Amount Paid\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        <span>\u20B9</span><span>{{ planAmount }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Valid till\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ validity | date }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</section>\r\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Failed\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Unfortunately Payment was rejected\r\n  </div>\r\n  <div class=\"payment_minimal_text\">\r\n    Page will be automatically redirect to homepage\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n      <button (click)=\"done()\">Done</button>\r\n  </div> -->\r\n</section>\r\n\r\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\r\n  <div class=\"payment-ongoing\">\r\n    <mat-spinner style=\"width: 100%;\"></mat-spinner>\r\n    <p>{{loadingText}}</p>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["span{color:#000;font-weight:600;font-size:larger}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, decorators: [{
             type: Component,
@@ -19683,9 +18912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ToastModule,
                         CommonModule,
                         HoverElementsComponent,
-                        DeleteHoverElementComponent,
-                        MatProgressSpinnerModule
-                    ], providers: [MessageService], template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section> -->\r\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Successfull\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Your payment has been successfully processed.\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Subscribed Plan\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ planName | titlecase }}\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Amount Paid\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        <span>\u20B9</span><span>{{ planAmount }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Valid till\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ validity | date }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</section>\r\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Failed\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Unfortunately Payment was rejected\r\n  </div>\r\n  <div class=\"payment_minimal_text\">\r\n    Page will be automatically redirect to homepage\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n      <button (click)=\"done()\">Done</button>\r\n  </div> -->\r\n</section>\r\n\r\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\r\n  <div class=\"payment-ongoing\">\r\n    <mat-spinner style=\"width: 100%;\"></mat-spinner>\r\n    <p>{{loadingText}}</p>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"] }]
+                        DeleteHoverElementComponent
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["span{color:#000;font-weight:600;font-size:larger}.total-container{position:relative;height:auto}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: StorageServiceService }, { type: i4$1.MessageService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -20912,76 +20140,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ReturnsCalculatorComponent extends BaseSection {
-    constructor(_eventService, restService, matDialog, storageService, router) {
+    constructor(_eventService) {
         super();
         this._eventService = _eventService;
-        this.restService = restService;
-        this.matDialog = matDialog;
-        this.storageService = storageService;
-        this.router = router;
         this.selectedScheme = 'individual';
-        this.monthlyAmount = 0;
-        this.maxAmount = 0;
-        this.minAmount = 0;
-        this.maturityCount = 10;
-        this.stores = [];
-        this.staffMembers = [];
-        this.benefitAmount = 0;
-        this.enrollButtonLoader = false;
-        this.allSchemes = [];
-        this.installmentOptions = [];
+        this.monthlyAmount = 42000;
+        this.maxAmount = 100000;
+        this.minAmount = 3000;
     }
     ngOnInit() {
         this.styles = this.data?.styles;
-        this.getEnrolledSchemes();
-    }
-    onSchemeChange(scheme) {
-        if (this.enrolledScheme) {
-            this.enrolledScheme.selected = false;
-        }
-        scheme.selected = !scheme?.selected;
-        this.minAmount = scheme?.minInstallmentValue ? scheme.minInstallmentValue : this.minAmount;
-        this.maxAmount = scheme?.maxInstallmentValue ? scheme.maxInstallmentValue : this.maxAmount;
-        this.maturityCount = scheme?.maturityCount ? scheme.maturityCount : this.maturityCount;
-        this.monthlyAmount = this.minAmount;
-        this.installmentOptions = scheme?.suggestedValues;
-        this.stores = scheme?.storeList ? scheme.storeList : [];
-        this.selectedStaff = "";
-        this.selectedStore = {};
-        // console.log(scheme);
-        this.enrolledScheme = scheme;
-        this.benefitAmount = 0;
-        this.onAmountChange();
-        this.getStaffList();
-    }
-    onAmountChange() {
-        if (Object.keys(this.enrolledScheme.jewellerBenefit).length > 0) {
-            const values = Object.values(this.enrolledScheme.jewellerBenefit);
-            const highestValue = Math.max(...Object.values(values));
-            if (this.enrolledScheme.benefitType === "PERCENT_ON_MONTH") {
-                this.benefitAmount = (this.monthlyAmount * highestValue) / 100;
-            }
-            else if (this.enrolledScheme.benefitType === "SCHEME") {
-                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
-            }
-            else if (this.enrolledScheme.benefitType === "DISCOUNT") {
-                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
-            }
-        }
     }
-    getStaffList() {
-        this.restService.getAllStaffList().subscribe({
-            next: (res) => {
-                this.staffMembers = res?.data?.data ? res?.data?.data : [];
-            },
-            error: (err) => {
-                console.log(err);
-            }
-        });
+    onSchemeChange() {
     }
-    setMonthlyAmount(amount) {
-        this.monthlyAmount = amount;
-        this.onAmountChange();
+    onAmountChange() {
     }
     get individualContribution() {
         return this.monthlyAmount * 10;
@@ -21010,121 +20182,13 @@ class ReturnsCalculatorComponent extends BaseSection {
     getButtonData(index) {
         return this.data?.action?.buttons[index]?.content;
     }
-    redirectTo(scheme) {
-        // if (!data?.pageId && data?.redirectionUrl)
-        //   return;
-        // this._eventService.buttonRedirection.emit({ data: data });
-    }
-    closeDialog(action) {
-        this.dialogRef.close(action);
-    }
-    enrollScheme(scheme) {
-        this.enrollButtonLoader = true;
-        const userDetails = this.storageService.getUser();
-        console.log(userDetails);
-        let payload = {
-            userBasicDetails: {
-                customer_id: userDetails?.userId,
-                customer_name: userDetails?.contact?.name,
-                customer_phone: userDetails?.contact?.mobile,
-                customer_email: userDetails?.contact?.email,
-            },
-            schemeId: scheme?.id,
-            schemeName: scheme?.schemeName,
-            earlyRedemptionCharge: scheme?.enrollmentFees,
-            installmentAmount: this.monthlyAmount,
-            storeRefId: scheme?.schemeRepresentativeId,
-            storeId: this.stores.length < 2 ? this.stores[0].id : this.selectedStore?.id,
-            staffId: this.staffMembers.length < 2 ? this.staffMembers[0].id : this.selectedStaff?.id,
-            staffName: this.staffMembers.length < 2 ? this.staffMembers[0].name : this.selectedStaff?.name,
-            storeName: this.stores.length < 2 ? this.stores[0].name : this.selectedStore?.name,
-            maturityCount: scheme?.maturityCount,
-            jewellerBenefit: scheme?.jewellerBenefit,
-            dueMonths: scheme?.maturityCount,
-            businessId: scheme?.businessId,
-            businessName: scheme?.businessName,
-            enableEarlyRedemption: scheme?.enableEarlyRedemption,
-            redemptionSlabList: scheme?.redemptionSlabList,
-            schemeType: scheme?.schemeType,
-            metalType: scheme?.metalType,
-            karatType: scheme?.karatType,
-            customerAccount: ""
-        };
-        if (userDetails != null) {
-            this.restService.enrollScheme(payload, true).subscribe({
-                next: (response) => {
-                    this.enrollButtonLoader = false;
-                    if (response.data.cashfreeResponse != null) {
-                        this.continuePayment(payload);
-                    }
-                    else {
-                        this.storeCharges = response.data.cart;
-                        this.dialogRef = this.matDialog.open(this.showChargesTemplate, {
-                            panelClass: 'show-charges-class'
-                        });
-                        this.dialogRef.afterClosed().subscribe((res) => {
-                            if (res === 'SUCCESS')
-                                this.continuePayment(payload);
-                        });
-                    }
-                },
-                error: (err) => {
-                    if (err?.error === 'Forbidden' && err?.status === 403) {
-                        this.restService.generateToken(localStorage.getItem('businessId'), userDetails.userId).subscribe({
-                            next: (res) => {
-                                this.enrollButtonLoader = false;
-                                this.storageService.setToken(res.data.refreshToken);
-                                this.continuePayment(payload);
-                            },
-                            error: (error) => {
-                                this.enrollButtonLoader = false;
-                            }
-                        });
-                    }
-                    this.enrollButtonLoader = false;
-                }
-            });
-        }
-        else {
-            this.router.navigate(['/login']);
-        }
-    }
-    continuePayment(payload) {
-        this.restService.enrollScheme(payload, false).subscribe({
-            next: (response) => {
-                localStorage.setItem('passbookOrderId', response.data.orderId);
-                this.openCashfreeSdk(response.data.sessionId);
-            },
-            error: (error) => { }
-        });
-    }
-    getEnrolledSchemes() {
-        const payload = {
-            businessIds: [
-                localStorage.getItem('businessId')
-            ]
-        };
-        this.restService.getAllEnrolledSchemes(payload).subscribe({
-            next: (res) => {
-                this.allSchemes = res.data?.data;
-                this.allSchemes = this.allSchemes.map(item => ({
-                    ...item,
-                    selected: false
-                }));
-                this.onSchemeChange(this.allSchemes[0]);
-                this.allSchemes[0].selected = true;
-                // console.log(this.allSchemes)
-            },
-            error: (err) => {
-                console.log(err);
-            }
-        });
-    }
-    openCashfreeSdk(sessionId) {
-        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
+    redirectTo(data) {
+        if (!data?.pageId && data?.redirectionUrl)
+            return;
+        this._eventService.buttonRedirection.emit({ data: data });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                            (ngModelChange)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n                            (click)=\"setMonthlyAmount(option)\">\r\n                            {{option}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                        Store : </span></div>\r\n                                <div class=\"store-selector\">\r\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                            {{store.name}} - {{store.storeRefId}}\r\n                                        </option>\r\n                                    </select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                        Staff Member : </span></div>\r\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                    <option value=\"\" disabled>Choose a staff member...</option>\r\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n                            <ng-container *ngIf=\"enrollButtonLoader\">\r\n                                <div class=\"d-flex align-items-center justify-content-center\">\r\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                    Loading...\r\n                                </div>\r\n                            </ng-container>\r\n                        </button>\r\n                    </div>\r\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex justify-content-between mb-4 px-3\">\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary ind-border': selectedScheme === 'individual'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"individual\" value=\"individual\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"individual\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC64\r\n                                <div class=\"scheme-header fw-bold\">Individual Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE from\r\n                                ORRA</div>\r\n                        </label>\r\n                    </div>\r\n\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary grp-border': selectedScheme === 'group'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"group\" value=\"group\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"group\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC65\r\n                                <div class=\"scheme-header fw-bold\">Group Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">11 members, monthly lucky draw for full\r\n                                amount</div>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" min=\"3000\" max=\"100000\" step=\"1000\"\r\n                            [(ngModel)]=\"monthlyAmount\" (input)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B93,000</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 10) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your 10-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{monthlyAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">ORRA's FREE Bonus</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3\">\r\n                            \u2B50 <span class=\"bonus-text\">You save 10% with ORRA's bonus!</span>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"redirectTo(getButtonData(0))\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                    <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.scheme-option{cursor:pointer;transition:all .3s ease}.scheme-option:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
             type: Component,
@@ -21143,12 +20207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         TextEditorComponent,
                         ButtonEditorDirective,
-                        MatProgressSpinner
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n                    <ng-container *ngFor=\"let scheme of allSchemes\">\r\n                        <div class=\"form-check scheme-option  p-3 border rounded border-primary ind-border\"\r\n                            (click)=\"onSchemeChange(scheme)\">\r\n                            <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n                                (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n                            <div class=\"form-check-label ms-2\">\r\n                                <div class=\"d-flex align-items-center mb-2\">\r\n                                    \uD83D\uDC64\r\n                                    <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n                                        'N/A'}}</div>\r\n                                </div>\r\n                                <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n                            [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n                            (ngModelChange)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                    <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n                        *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n                        <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n                            (click)=\"setMonthlyAmount(option)\">\r\n                            {{option}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n                                        number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)+benefitAmount) | number}}</div>\r\n                                    <div class=\"result-amount fw-bold fs-5\"\r\n                                        *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n                                        maturityCount)) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n                            *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n                            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                                        Store : </span></div>\r\n                                <div class=\"store-selector\">\r\n                                    <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\">\r\n                                        <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                                        <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                                            {{store.name}} - {{store.storeRefId}}\r\n                                        </option>\r\n                                    </select>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n                                <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                                        Staff Member : </span></div>\r\n                                <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                                    <option value=\"\" disabled>Choose a staff member...</option>\r\n                                    <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                                        {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"enrollScheme(enrolledScheme)\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n                            <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n                            <ng-container *ngIf=\"enrollButtonLoader\">\r\n                                <div class=\"d-flex align-items-center justify-content-center\">\r\n                                    <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                                    Loading...\r\n                                </div>\r\n                            </ng-container>\r\n                        </button>\r\n                    </div>\r\n                    <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-template #showCharges>\r\n        <div class=\"payment-dialog\">\r\n            <div class=\"dialog-header\">\r\n                <h2>Payment Details</h2>\r\n                <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n                    <mat-icon>close</mat-icon>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"payment-content\">\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Installment Amount:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n                        (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Convenience Fee:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n                        (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row\">\r\n                    <span class=\"label\">Payment Service Charges:</span>\r\n                    <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n                        (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n                </div>\r\n\r\n                <div class=\"payment-row total-row\">\r\n                    <span class=\"label total-label\">Total Amount:</span>\r\n                    <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n                        (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"dialog-actions\">\r\n                <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }], propDecorators: { showChargesTemplate: [{
-                type: ViewChild,
-                args: ['showCharges', { static: true }]
-            }], data: [{
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoLayout]=\"stylesLayout\">\r\n        <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n                <div class=\"calculator-header text-center mb-4  w-100\">\r\n                    <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n                </div>\r\n                <div class=\"sub-header mb-3 p-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n                </div>\r\n                <div class=\"calculator-body-top d-flex justify-content-between mb-4 px-3\">\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary ind-border': selectedScheme === 'individual'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"individual\" value=\"individual\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"individual\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC64\r\n                                <div class=\"scheme-header fw-bold\">Individual Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE from\r\n                                ORRA</div>\r\n                        </label>\r\n                    </div>\r\n\r\n                    <div class=\"form-check scheme-option w-48 p-3 border rounded\"\r\n                        [ngClass]=\"{'border-primary grp-border': selectedScheme === 'group'}\">\r\n                        <input class=\"form-check-input\" type=\"radio\" name=\"scheme\" id=\"group\" value=\"group\"\r\n                            [(ngModel)]=\"selectedScheme\" (change)=\"onSchemeChange()\">\r\n                        <label class=\"form-check-label ms-2\" for=\"group\">\r\n                            <div class=\"d-flex align-items-center mb-2\">\r\n                                \uD83D\uDC65\r\n                                <div class=\"scheme-header fw-bold\">Group Investment Scheme</div>\r\n                            </div>\r\n                            <div class=\"scheme-description text-muted small\">11 members, monthly lucky draw for full\r\n                                amount</div>\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"sub-header mb-3 px-3\">\r\n                    <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n                </div>\r\n\r\n                <div class=\"calculate-slider mb-4 px-3\">\r\n                    <div class=\"slider-container position-relative\">\r\n                        <input type=\"range\" class=\"form-range custom-range\" min=\"3000\" max=\"100000\" step=\"1000\"\r\n                            [(ngModel)]=\"monthlyAmount\" (input)=\"onAmountChange()\">\r\n                        <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n                            <span class=\"text-muted\">\u20B93,000</span>\r\n                            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n                            <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n                        </div>\r\n                        <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"calculator-bottom px-3 mb-5\">\r\n                    <div *ngIf=\"selectedScheme === 'individual'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 10) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your 10-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{monthlyAmount | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">ORRA's FREE Bonus</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-4\">\r\n                                <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"bonus-message text-center mb-3\">\r\n                            \u2B50 <span class=\"bonus-text\">You save 10% with ORRA's bonus!</span>\r\n                        </div>\r\n\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n                            (click)=\"redirectTo(getButtonData(0))\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                    <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                        <div class=\"d-flex align-items-center mb-3\">\r\n                            \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                        </div>\r\n\r\n                        <div class=\"row mb-3\">\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-6\">\r\n                                <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                                    <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                                    <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                            simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                            [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                            Enroll in Scheme\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.scheme-option{cursor:pointer;transition:all .3s ease}.scheme-option:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
                 type: Input
@@ -21370,5 +20430,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
+export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
 //# sourceMappingURL=simpo-component-library.mjs.map