simpo-component-library 3.6.239 → 3.6.241

package/fesm2022/simpo-component-library.mjs

@@ -170,7 +170,6 @@ class CornerDirective {
         }
     }
     ngOnChanges() {
-        debugger;
         if (this.cornerData === 'Small') {
             this.el.nativeElement.style.setProperty('border-radius', '.5rem');
         }
@@ -6409,6 +6408,7 @@ 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/";
@@ -6450,11 +6450,14 @@ 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) {
+        return this.http.post(this.passBookUrl + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {});
+    }
     getProductBySelectedCategory(categoryId) {
         return this.http.get(this.BASE_URL + `ecommerce/product/${categoryId}`);
     }
-    getAllSchemes(userCode) {
-        return this.http.get(this.orraBaseUrl + `passBook/summary/${userCode}`);
+    getAllSchemes(userId, storeId) {
+        return this.http.get(this.passBookUrl + `ext/connect/simpo/user?storeId=${storeId}&userId=${userId}`);
     }
     getAllRedemptionSchemes() {
         return this.http.get(this.orraBaseUrl + `passBook/redemption/amount/check?userCode=C_000313885`);
@@ -6800,6 +6803,24 @@ class RestService {
         }
         return map;
     }
+    generateToken(bId, userId, storeId, userType) {
+        return this.http.post(this.passBookUrl + `ext/connect/simpo/token?businessId=${bId}&storeId=${storeId}&userId=${userId}&userType=USER`, {});
+    }
+    getAllEnrolledSchemes(payload) {
+        return this.http.put(this.passBookUrl + 'ext/connect/simpo/scheme/list', payload);
+    }
+    enrollScheme(payload, checkCharges) {
+        const token = localStorage.getItem("token");
+        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 });
+        }
+    }
     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' }); }
 }
@@ -6905,6 +6926,9 @@ class StorageServiceService {
             this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
         };
     }
+    setToken(token) {
+        localStorage.setItem("token", token);
+    }
     updateAllData() {
         if (this.router.url.includes('cart'))
             return;
@@ -8686,6 +8710,7 @@ 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);
@@ -14307,7 +14332,7 @@ class HeaderSectionComponent {
         return pathname.includes('/list') || pathname === '/' || pathname === '';
     }
     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\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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}.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\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" [simpoOverlay]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div 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        Login\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>\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>", 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{padding:2%;border-radius:4px;border:2px solid lightgrey;width:7vw}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}.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,
@@ -14345,7 +14370,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\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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}.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\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite &&  (categoryList?.length == 0 || !showCategoryMobileHeader()) && isMobile\">\r\n    <!-- isHeaderSticky && isEcommerceWebsite && (!categoryList || !showCategoryMobileHeader()) && -->\r\n    <!-- [scrollValue]=\"isComponentMerged ? scrollValue : 0\" -->\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" [simpoOverlay]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\" simpoHover [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n        [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n      <!-- <div 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        Login\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>\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>", 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{padding:2%;border-radius:4px;border:2px solid lightgrey;width:7vw}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}.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: [{
@@ -17915,7 +17940,7 @@ class UserProfileComponent extends BaseSection {
             { 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" },
+            { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" }, // remove later
             // { 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' },
@@ -17953,6 +17978,7 @@ class UserProfileComponent extends BaseSection {
         this.getUserOrderDetails();
         this.getUserWislistDetails();
         this.getEcommerceConfigs();
+        this.getAllSchemes(); // remove later
     }
     getEcommerceConfigs() {
         this.restService.getEcommerceConfigs().subscribe((res) => {
@@ -17977,8 +18003,9 @@ class UserProfileComponent extends BaseSection {
     }
     getAllSchemes() {
         let userDetails = this.storageService.getUser();
-        let userCode = userDetails?.pwcUserCode;
-        this.restService.getAllSchemes(userCode).subscribe((response) => {
+        let userId = userDetails?.userId;
+        let storeId = "da9f922e-8df4-455d-8cb8-eab686c8942d";
+        this.restService.getAllSchemes(userId, storeId).subscribe((response) => {
             this.passbookSummary = response?.data?.passBookSummary;
             this.userEnrollments = response.data?.userEnrollments;
             this.userEnrollments.forEach((enrollment) => {
@@ -18743,6 +18770,8 @@ class VerifyComponent extends BaseSection {
         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;
@@ -18760,7 +18789,13 @@ class VerifyComponent extends BaseSection {
                 this.loadingText = this.content?.inputText?.[1]?.value ?? 'We are processing your payments';
                 setTimeout(() => {
                     this.loadingText = this.content?.inputText?.[2]?.value ?? 'Hold On...';
-                    this.checkPaymentStatus();
+                    const passBookOrderId = localStorage.getItem("passbookOrderId");
+                    if (passBookOrderId) {
+                        this.checkPassbookPaymentStatus();
+                    }
+                    else {
+                        this.checkPaymentStatus();
+                    }
                 }, 3000);
             }, 3000);
         }, 3000);
@@ -18809,6 +18844,39 @@ class VerifyComponent extends BaseSection {
             }
         });
     }
+    checkPassbookPaymentStatus() {
+        const orderId = localStorage.getItem("passbookOrderId");
+        this.PASSBOOK_API_COUNT++;
+        this.restService.getPassbookOrderStatus(orderId).subscribe((response) => {
+            localStorage.removeItem("passbookOrderId");
+            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.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(['/']);
+                    }
+                });
+            }
+            else {
+                this.checkPassbookPaymentStatus();
+            }
+        });
+    }
     editSection() {
         if (window.innerWidth <= 475)
             return;
@@ -20056,20 +20124,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ReturnsCalculatorComponent extends BaseSection {
-    constructor(_eventService) {
+    constructor(_eventService, restService, matDialog, storageService) {
         super();
         this._eventService = _eventService;
+        this.restService = restService;
+        this.matDialog = matDialog;
+        this.storageService = storageService;
         this.selectedScheme = 'individual';
-        this.monthlyAmount = 42000;
-        this.maxAmount = 100000;
-        this.minAmount = 3000;
+        this.monthlyAmount = 0;
+        this.maxAmount = 0;
+        this.minAmount = 0;
+        this.maturityCount = 10;
+        this.benefitAmount = 0;
+        this.allSchemes = [];
     }
     ngOnInit() {
         this.styles = this.data?.styles;
-    }
-    onSchemeChange() {
+        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;
+        // console.log(scheme);
+        this.enrolledScheme = scheme;
+        this.benefitAmount = 0;
+        this.onAmountChange();
     }
     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;
+            }
+        }
     }
     get individualContribution() {
         return this.monthlyAmount * 10;
@@ -20098,13 +20198,96 @@ class ReturnsCalculatorComponent extends BaseSection {
     getButtonData(index) {
         return this.data?.action?.buttons[index]?.content;
     }
-    redirectTo(data) {
-        if (!data?.pageId && data?.redirectionUrl)
-            return;
-        this._eventService.buttonRedirection.emit({ data: data });
+    redirectTo(scheme) {
+        // if (!data?.pageId && data?.redirectionUrl)
+        //   return;
+        // this._eventService.buttonRedirection.emit({ data: data });
+    }
+    closeDialog() {
+        this.matDialog.closeAll();
+    }
+    enrollScheme(scheme) {
+        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,
+            storeId: scheme?.storeId,
+            storeName: scheme?.storeName ? scheme?.storeName : scheme?.businessName,
+            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: ""
+        };
+        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) => {
+                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
+                }));
+                // console.log(this.allSchemes)
+            },
+            error: (err) => {
+                console.log(err);
+            }
+        });
+    }
+    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: 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"] }] }); }
+    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 }], 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=\"1000\" [(ngModel)]=\"monthlyAmount\" (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>\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\">\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)=\"enrollScheme(enrolledScheme)\">\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    <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    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.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}.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{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}.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.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.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
             type: Component,
@@ -20123,8 +20306,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         TextEditorComponent,
                         ButtonEditorDirective,
-                    ], 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: [{
+                    ], 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=\"1000\" [(ngModel)]=\"monthlyAmount\" (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>\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\">\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)=\"enrollScheme(enrolledScheme)\">\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    <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    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.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}.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{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}.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 }], propDecorators: { showChargesTemplate: [{
+                type: ViewChild,
+                args: ['showCharges', { static: true }]
+            }], data: [{
                 type: Input
             }], edit: [{
                 type: Input