simpo-component-library 3.6.331 → 3.6.333

package/esm2022/lib/services/local-storage.token.mjs

@@ -0,0 +1,23 @@
+// projects/common-lib/src/lib/storage/local-storage.token.ts
+import { InjectionToken, inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+export const LOCAL_STORAGE = new InjectionToken('LOCAL_STORAGE', {
+    providedIn: 'root',
+    factory: () => {
+        const platformId = inject(PLATFORM_ID);
+        if (isPlatformBrowser(platformId) && typeof globalThis !== 'undefined' && 'localStorage' in globalThis) {
+            return globalThis.localStorage;
+        }
+        const store = new Map();
+        const mem = {
+            get length() { return store.size; },
+            clear: () => store.clear(),
+            getItem: (k) => (store.has(k) ? store.get(k) : null),
+            key: (i) => Array.from(store.keys())[i] ?? null,
+            removeItem: (k) => { store.delete(k); },
+            setItem: (k, v) => { store.set(k, String(v)); },
+        };
+        return mem;
+    },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9jYWwtc3RvcmFnZS50b2tlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9saWIvc2VydmljZXMvbG9jYWwtc3RvcmFnZS50b2tlbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw2REFBNkQ7QUFDN0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBR3BELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLGNBQWMsQ0FBYyxlQUFlLEVBQUU7SUFDNUUsVUFBVSxFQUFFLE1BQU07SUFDbEIsT0FBTyxFQUFFLEdBQUcsRUFBRTtRQUNaLE1BQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUN2QyxJQUFJLGlCQUFpQixDQUFDLFVBQVUsQ0FBQyxJQUFJLE9BQU8sVUFBVSxLQUFLLFdBQVcsSUFBSSxjQUFjLElBQUksVUFBVSxFQUFFLENBQUM7WUFDdkcsT0FBUSxVQUFrQixDQUFDLFlBQTJCLENBQUM7UUFDekQsQ0FBQztRQUNELE1BQU0sS0FBSyxHQUFHLElBQUksR0FBRyxFQUFrQixDQUFDO1FBQ3hDLE1BQU0sR0FBRyxHQUFnQjtZQUN2QixJQUFJLE1BQU0sS0FBSyxPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1lBQ25DLEtBQUssRUFBRSxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsS0FBSyxFQUFFO1lBQzFCLE9BQU8sRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7WUFDckQsR0FBRyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUk7WUFDL0MsVUFBVSxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUUsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUN2QyxPQUFPLEVBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsR0FBRyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDaEQsQ0FBQztRQUNGLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztDQUNGLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vIHByb2plY3RzL2NvbW1vbi1saWIvc3JjL2xpYi9zdG9yYWdlL2xvY2FsLXN0b3JhZ2UudG9rZW4udHNcclxuaW1wb3J0IHsgSW5qZWN0aW9uVG9rZW4sIGluamVjdCwgUExBVEZPUk1fSUQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgaXNQbGF0Zm9ybUJyb3dzZXIgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBTdG9yYWdlTGlrZSB9IGZyb20gJy4vc3RvcmFnZS1saWtlJztcclxuXHJcbmV4cG9ydCBjb25zdCBMT0NBTF9TVE9SQUdFID0gbmV3IEluamVjdGlvblRva2VuPFN0b3JhZ2VMaWtlPignTE9DQUxfU1RPUkFHRScsIHtcclxuICBwcm92aWRlZEluOiAncm9vdCcsXHJcbiAgZmFjdG9yeTogKCkgPT4ge1xyXG4gICAgY29uc3QgcGxhdGZvcm1JZCA9IGluamVjdChQTEFURk9STV9JRCk7XHJcbiAgICBpZiAoaXNQbGF0Zm9ybUJyb3dzZXIocGxhdGZvcm1JZCkgJiYgdHlwZW9mIGdsb2JhbFRoaXMgIT09ICd1bmRlZmluZWQnICYmICdsb2NhbFN0b3JhZ2UnIGluIGdsb2JhbFRoaXMpIHtcclxuICAgICAgcmV0dXJuIChnbG9iYWxUaGlzIGFzIGFueSkubG9jYWxTdG9yYWdlIGFzIFN0b3JhZ2VMaWtlO1xyXG4gICAgfVxyXG4gICAgY29uc3Qgc3RvcmUgPSBuZXcgTWFwPHN0cmluZywgc3RyaW5nPigpO1xyXG4gICAgY29uc3QgbWVtOiBTdG9yYWdlTGlrZSA9IHtcclxuICAgICAgZ2V0IGxlbmd0aCgpIHsgcmV0dXJuIHN0b3JlLnNpemU7IH0sXHJcbiAgICAgIGNsZWFyOiAoKSA9PiBzdG9yZS5jbGVhcigpLFxyXG4gICAgICBnZXRJdGVtOiAoaykgPT4gKHN0b3JlLmhhcyhrKSA/IHN0b3JlLmdldChrKSEgOiBudWxsKSxcclxuICAgICAga2V5OiAoaSkgPT4gQXJyYXkuZnJvbShzdG9yZS5rZXlzKCkpW2ldID8/IG51bGwsXHJcbiAgICAgIHJlbW92ZUl0ZW06IChrKSA9PiB7IHN0b3JlLmRlbGV0ZShrKTsgfSxcclxuICAgICAgc2V0SXRlbTogKGssIHYpID0+IHsgc3RvcmUuc2V0KGssIFN0cmluZyh2KSk7IH0sXHJcbiAgICB9O1xyXG4gICAgcmV0dXJuIG1lbTtcclxuICB9LFxyXG59KTtcclxuIl19

package/esm2022/lib/services/storage-like.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RvcmFnZS1saWtlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9zZXJ2aWNlcy9zdG9yYWdlLWxpa2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIi8vIHByb2plY3RzL2NvbW1vbi1saWIvc3JjL2xpYi9zdG9yYWdlL3N0b3JhZ2UtbGlrZS50c1xyXG5leHBvcnQgaW50ZXJmYWNlIFN0b3JhZ2VMaWtlIHtcclxuICBsZW5ndGg6IG51bWJlcjtcclxuICBjbGVhcigpOiB2b2lkO1xyXG4gIGdldEl0ZW0oa2V5OiBzdHJpbmcpOiBzdHJpbmcgfCBudWxsO1xyXG4gIGtleShpbmRleDogbnVtYmVyKTogc3RyaW5nIHwgbnVsbDtcclxuICByZW1vdmVJdGVtKGtleTogc3RyaW5nKTogdm9pZDtcclxuICBzZXRJdGVtKGtleTogc3RyaW5nLCB2YWx1ZTogc3RyaW5nKTogdm9pZDtcclxufVxyXG4iXX0=

package/esm2022/lib/tokens/api-token.mjs

@@ -3,5 +3,4 @@ export const API_URL = new InjectionToken('apiUrl');
 export const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
 export const CMIS_URL = new InjectionToken('cmisURL');
 export const BUCKET_URL = new InjectionToken('bucketURL');
-export const LOCAL_STORAGE = new InjectionToken('LOCAL_STORAGE');
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBpLXRva2VuLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi90b2tlbnMvYXBpLXRva2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0MsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksY0FBYyxDQUFTLFFBQVEsQ0FBQyxDQUFDO0FBQzVELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLGNBQWMsQ0FBUyxjQUFjLENBQUMsQ0FBQztBQUN4RSxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxjQUFjLENBQVMsU0FBUyxDQUFDLENBQUM7QUFDOUQsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLElBQUksY0FBYyxDQUFTLFdBQVcsQ0FBQyxDQUFDO0FBQ2xFLE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLGNBQWMsQ0FBTSxlQUFlLENBQUMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGlvblRva2VuIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBjb25zdCBBUElfVVJMID0gbmV3IEluamVjdGlvblRva2VuPHN0cmluZz4oJ2FwaVVybCcpO1xuZXhwb3J0IGNvbnN0IEVDT01NRVJDRV9VUkwgPSBuZXcgSW5qZWN0aW9uVG9rZW48U3RyaW5nPignZWNvbW1lcmNlVVJMJyk7XG5leHBvcnQgY29uc3QgQ01JU19VUkwgPSBuZXcgSW5qZWN0aW9uVG9rZW48U3RyaW5nPignY21pc1VSTCcpO1xuZXhwb3J0IGNvbnN0IEJVQ0tFVF9VUkwgPSBuZXcgSW5qZWN0aW9uVG9rZW48U3RyaW5nPignYnVja2V0VVJMJyk7XG5leHBvcnQgY29uc3QgTE9DQUxfU1RPUkFHRSA9IG5ldyBJbmplY3Rpb25Ub2tlbjxhbnk+KCdMT0NBTF9TVE9SQUdFJykiXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBpLXRva2VuLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi90b2tlbnMvYXBpLXRva2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0MsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksY0FBYyxDQUFTLFFBQVEsQ0FBQyxDQUFDO0FBQzVELE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxJQUFJLGNBQWMsQ0FBUyxjQUFjLENBQUMsQ0FBQztBQUN4RSxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxjQUFjLENBQVMsU0FBUyxDQUFDLENBQUM7QUFDOUQsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLElBQUksY0FBYyxDQUFTLFdBQVcsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0aW9uVG9rZW4gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGNvbnN0IEFQSV9VUkwgPSBuZXcgSW5qZWN0aW9uVG9rZW48c3RyaW5nPignYXBpVXJsJyk7XG5leHBvcnQgY29uc3QgRUNPTU1FUkNFX1VSTCA9IG5ldyBJbmplY3Rpb25Ub2tlbjxTdHJpbmc+KCdlY29tbWVyY2VVUkwnKTtcbmV4cG9ydCBjb25zdCBDTUlTX1VSTCA9IG5ldyBJbmplY3Rpb25Ub2tlbjxTdHJpbmc+KCdjbWlzVVJMJyk7XG5leHBvcnQgY29uc3QgQlVDS0VUX1VSTCA9IG5ldyBJbmplY3Rpb25Ub2tlbjxTdHJpbmc+KCdidWNrZXRVUkwnKTsiXX0=

package/fesm2022/simpo-component-library.mjs

@@ -1,7 +1,7 @@
 import * as i4 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgStyle, NgFor, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, ViewChild, ElementRef, Renderer2, forwardRef, PLATFORM_ID, Output, Pipe, Optional, NgModule } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, ElementRef, Renderer2, forwardRef, Output, Pipe, Optional, NgModule } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -757,7 +757,6 @@ const API_URL = new InjectionToken('apiUrl');
 const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
 const CMIS_URL = new InjectionToken('cmisURL');
 const BUCKET_URL = new InjectionToken('bucketURL');
-const LOCAL_STORAGE = new InjectionToken('LOCAL_STORAGE');
 
 class ImageUplaodService {
     // region = 'us-east-1'
@@ -903,17 +902,36 @@ class Collection extends BaseCollection {
     } // should be featuredCollection but need to changein BE
 }
 
-// import { Category, Collection } from '../../public-api';
-// import { MatDialog } from '@angular/material/dialog';
+// projects/common-lib/src/lib/storage/local-storage.token.ts
+const LOCAL_STORAGE = new InjectionToken('LOCAL_STORAGE', {
+    providedIn: 'root',
+    factory: () => {
+        const platformId = inject(PLATFORM_ID);
+        if (isPlatformBrowser(platformId) && typeof globalThis !== 'undefined' && 'localStorage' in globalThis) {
+            return globalThis.localStorage;
+        }
+        const store = new Map();
+        const mem = {
+            get length() { return store.size; },
+            clear: () => store.clear(),
+            getItem: (k) => (store.has(k) ? store.get(k) : null),
+            key: (i) => Array.from(store.keys())[i] ?? null,
+            removeItem: (k) => { store.delete(k); },
+            setItem: (k, v) => { store.set(k, String(v)); },
+        };
+        return mem;
+    },
+});
+
 class ElementServiceService {
     // private BASE_URL: string = "https://dev-api.simpo.ai/";
-    constructor(http, BASE_URL, CMIS_URL, LOCAL_STORAGE
+    constructor(http, BASE_URL, CMIS_URL, storage
     // public dialog: MatDialog
     ) {
         this.http = http;
         this.BASE_URL = BASE_URL;
         this.CMIS_URL = CMIS_URL;
-        this.LOCAL_STORAGE = LOCAL_STORAGE;
+        this.storage = storage;
     }
     openSocialBrand(componentName, height, width, data) {
         // return this.dialog.open(componentName, {
@@ -935,8 +953,19 @@ class ElementServiceService {
     saveImagesToBusinessLibrary(mediaRequest) {
         return this.http.post(this.BASE_URL + `admin/library/image/library/save`, mediaRequest);
     }
+    parseJson(raw) {
+        if (!raw)
+            return null;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    }
     getTemplate() {
-        let templateId = JSON.parse(JSON.parse(JSON.stringify(this.LOCAL_STORAGE.get('bDetails'))))?.templateId;
+        const details = this.parseJson(this.storage.getItem('bDetails'));
+        const templateId = details?.templateId ?? '';
         return this.http.get(this.BASE_URL + `business/v3/website/${templateId}/pages/list`);
     }
     getAllVehicleTypes(data) {
@@ -14247,7 +14276,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class HeaderSectionComponent {
     // matDialog = inject(MatDialog);
-    constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService) {
+    constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService, storage
+    // private cdRef: ChangeDetectorRef
+    ) {
         this._eventService = _eventService;
         this.router = router;
         this.activatedRoute = activatedRoute;
@@ -14255,6 +14286,7 @@ class HeaderSectionComponent {
         this.storageService = storageService;
         this.restService = restService;
         this.eventService = eventService;
+        this.storage = storage;
         this.edit = false;
         this.scrollValue = 0;
         this.color = '#000000';
@@ -14276,8 +14308,8 @@ class HeaderSectionComponent {
         this.schemeAvailable = false;
         this.Object = Object;
         this.showPincodeInput = false;
-        this.pincode = localStorage.getItem('pincode') ?? "";
-        this.getPincode = localStorage.getItem('pincode') || '';
+        this.pincode = this.storage.getItem('pincode') ?? "";
+        this.getPincode = this.storage.getItem('pincode') || '';
         this.pinError = false;
         this.showLogin = false;
         this.byMetalAndStone = [
@@ -14399,7 +14431,7 @@ class HeaderSectionComponent {
         this.resizeObserver.observe(this.childContainer.nativeElement);
     }
     checkPassbookApp() {
-        this.restService.PassbookAppStatus(localStorage.getItem('bId')).subscribe((res) => {
+        this.restService.PassbookAppStatus(this.storage.getItem('bId')).subscribe((res) => {
             if (res?.data) {
                 this.passbookAppStatus = true;
             }
@@ -14429,7 +14461,7 @@ class HeaderSectionComponent {
         this.showEditors = isShow;
     }
     goToHome() {
-        if (localStorage.getItem('REQUEST_FROM') === 'E_COMMERCE')
+        if (this.storage.getItem('REQUEST_FROM') === 'E_COMMERCE')
             return;
         this.router.navigate(['']);
     }
@@ -14542,8 +14574,8 @@ class HeaderSectionComponent {
     }
     setPincode() {
         if (this.pincode && this.pincode?.length == 6) {
-            localStorage.setItem('pincode', this.pincode);
-            this.getPincode = localStorage.getItem('pincode') || '';
+            this.storage.setItem('pincode', this.pincode);
+            this.getPincode = this.storage.getItem('pincode') || '';
             this.pinError = false;
         }
         else {
@@ -14566,7 +14598,7 @@ class HeaderSectionComponent {
     navigateLogin() {
         this.router.navigate(['/login']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵ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 }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n      <ng-container *ngIf=\"style?.headline?.display\">\n        <div>\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n        </div>\n      </ng-container>\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n      </div>\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"style?.background?.color\">search</mat-icon>\n      </div> -->\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n  </ng-container>\n</section>\n\n<ng-template #header1Template>\n  <div class=\"header1\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header2Template>\n  <div class=\"header1\">\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n    </div>\n    <div class=\"text-end\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header3Template>\n  <div class=\"header1\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </ng-container>\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header4Template>\n  <div class=\"header1\">\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container> </ng-container>\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n    </div>\n    <div class=\"text-end\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n    (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n    <div class=\"d-flex gap-3\"\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n      <ng-container *ngFor=\"let item of getNavbarButton\">\n        <ng-container *ngIf=\"item.showHeader\">\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | lowercase | titlecase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n  </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <div class=\"d-flex\">\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n      <div *ngFor=\"let button of action?.buttons\">\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n      </div>\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n        <mat-icon>person_outline</mat-icon>\n        Login\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n  </div>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n    <div class=\"icons\" (click)=\"goToHome()\">\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Home</span>\n    </div>\n    <div class=\"icons\" (click)=\"searchProducts()\">\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Shop</span>\n    </div>\n    <div class=\"icons\" (click)=\"goToWishlist()\">\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\n    </div>\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Cart</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n    </div> -->\n    <div class=\"w-75 d-flex align-items-center\">\n      <div class=\"input-group w-75 ml-2\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n          [style.color]=\"backgroundInfo?.accentColor\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n      </div>\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n          height=\"30\" version=\"1.1\">\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n          </g>\n        </svg>\n        <div [style.color]=\"accentColor\">Schemes</div>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-center\">\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n        Pincode\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n        getPincode}}</div>\n\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your PIN Code unlocks\n        </div>\n        <div class=\"sub-text text-center f-14 pincode-text\">\n          Fastest delivery date, Try-at-Home availability,\n          Nearest store and In-store design!\n        </div>\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n          [class.error-border]=\"pinError\">\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n            class=\"w-75 p-0\">\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n        </div>\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n          Please enter a valid pincode\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n      </div>\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getCartItemsCount}}</div>\n      </div>\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n      </div>\n      <!-- (mouseleave)=\"showLogin = false\" -->\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your Account\n        </div>\n        <div class=\"sub-text text-center f-14\">\n          Access account & manage your orders.\n        </div>\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n            [style.color]=\"style?.background?.color\">Sign Up</div>\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n    <!-- <div> -->\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n    <!-- </div> -->\n  </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n    <ng-container *ngFor=\"let item of getNavbarButton\">\n      <ng-container *ngIf=\"item.showHeader\">\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | uppercase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n  <div class=\"offcanvas-header\">\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n  </div>\n  <div class=\"offcanvas-body\">\n    <div class=\"pages\">\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n    </div>\n  </div>\n  <div class=\"offcanvas-footer\">\n    <div class=\"canvas-button\">\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n    *ngIf=\"loggedIn\">\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n  </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n      {{ele?.categoryName | titlecase}}\n    </div>\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n      [simpoColor]=\"data?.styles?.headline?.color\">\n      Collections\n    </div>\n  </div>\n  <!-- (mouseleave)=\"showList = false\" -->\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n    <div class=\"row w-100 h-100\">\n      <div class=\"col-7 row\">\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n          <div class=\"list-header mb-3\">By Price</div>\n          <div class=\"d-flex flex-column gap-3 list-item\">\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n              <div class=\"each-price cursor-pointer\"\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n                {{price | titlecase}}\n              </div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"col-4 h-100 overflow-scroll\"\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n          <div class=\"list-header mb-3\">By Style</div>\n          <div class=\"d-flex flex-column gap-3 list-item\">\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n                |\n                titlecase}}</div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\n          <div class=\"d-flex flex-column gap-3 list-item\">\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\n              <div class=\"d-flex gap-2 align-items-center\">\n                <div style=\"width: 15px;height: 20px;\">\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n                </div>\n                <div class=\"each-price cursor-pointer\">{{collection.name\n                  |\n                  titlecase}}</div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <!-- (mouseleave)=\"showCollections = false\" -->\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n    <div class=\"row w-100 h-100\">\n      <div class=\"col-7 row\">\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\n          <div class=\"collection row col-3 align-items-center\"\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n            <div class=\"col-imag col-4\">\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n            </div>\n            <div class=\"col-8 text-overflow\">\n              {{collection?.collectionName | titlecase}}\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\n            (click)=\"applyFilterToList(image, 'collections')\">\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n    [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n      </div>\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n    </div>\n  </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "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: [{
@@ -14606,7 +14638,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MovingTextComponent,
                         ContentFitDirective,
                     ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n    [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n      <ng-container *ngIf=\"style?.headline?.display\">\n        <div>\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n        </div>\n      </ng-container>\n      <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n        [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n      </div>\n      <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"style?.background?.color\">search</mat-icon>\n      </div> -->\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n  </ng-container>\n</section>\n\n<ng-template #header1Template>\n  <div class=\"header1\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n        aria-controls=\"offcanvasRight\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header2Template>\n  <div class=\"header1\">\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n    </div>\n    <div class=\"text-end\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header3Template>\n  <div class=\"header1\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </ng-container>\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header4Template>\n  <div class=\"header1\">\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container> </ng-container>\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n      <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n    </div>\n    <div class=\"text-end\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n    (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n    [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n    loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n    <div class=\"d-flex gap-3\"\n      [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n      <ng-container *ngFor=\"let item of getNavbarButton\">\n        <ng-container *ngIf=\"item.showHeader\">\n          <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n            [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n            [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | lowercase | titlecase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n  </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <div class=\"d-flex\">\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n      <div *ngFor=\"let button of action?.buttons\">\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n      </div>\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n        <mat-icon>person_outline</mat-icon>\n        Login\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n  </div>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n    [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n    <div class=\"icons\" (click)=\"goToHome()\">\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Home</span>\n    </div>\n    <div class=\"icons\" (click)=\"searchProducts()\">\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Shop</span>\n    </div>\n    <div class=\"icons\" (click)=\"goToWishlist()\">\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\n    </div>\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Cart</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n    </div> -->\n    <div class=\"w-75 d-flex align-items-center\">\n      <div class=\"input-group w-75 ml-2\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n          [style.color]=\"backgroundInfo?.accentColor\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n      </div>\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n          height=\"30\" version=\"1.1\">\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n          </g>\n        </svg>\n        <div [style.color]=\"accentColor\">Schemes</div>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-center\">\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n        Pincode\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n        getPincode}}</div>\n\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your PIN Code unlocks\n        </div>\n        <div class=\"sub-text text-center f-14 pincode-text\">\n          Fastest delivery date, Try-at-Home availability,\n          Nearest store and In-store design!\n        </div>\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n          [class.error-border]=\"pinError\">\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n            class=\"w-75 p-0\">\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n        </div>\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n          Please enter a valid pincode\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n      </div>\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getCartItemsCount}}</div>\n      </div>\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n      </div>\n      <!-- (mouseleave)=\"showLogin = false\" -->\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your Account\n        </div>\n        <div class=\"sub-text text-center f-14\">\n          Access account & manage your orders.\n        </div>\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n            [style.color]=\"style?.background?.color\">Sign Up</div>\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n    <!-- <div> -->\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n    <!-- </div> -->\n  </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n    <ng-container *ngFor=\"let item of getNavbarButton\">\n      <ng-container *ngIf=\"item.showHeader\">\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | uppercase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n  [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n  <div class=\"offcanvas-header\">\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n    <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\n    <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n  </div>\n  <div class=\"offcanvas-body\">\n    <div class=\"pages\">\n      <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n    </div>\n  </div>\n  <div class=\"offcanvas-footer\">\n    <div class=\"canvas-button\">\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n  <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n  <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n    *ngIf=\"loggedIn\">\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n  </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n    [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n    <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n      (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n      {{ele?.categoryName | titlecase}}\n    </div>\n    <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n      *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n      [simpoColor]=\"data?.styles?.headline?.color\">\n      Collections\n    </div>\n  </div>\n  <!-- (mouseleave)=\"showList = false\" -->\n  <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n    <div class=\"row w-100 h-100\">\n      <div class=\"col-7 row\">\n        <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n          <div class=\"list-header mb-3\">By Price</div>\n          <div class=\"d-flex flex-column gap-3 list-item\">\n            <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n              <div class=\"each-price cursor-pointer\"\n                (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n                {{price | titlecase}}\n              </div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"col-4 h-100 overflow-scroll\"\n          *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n          <div class=\"list-header mb-3\">By Style</div>\n          <div class=\"d-flex flex-column gap-3 list-item\">\n            <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n              <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n                |\n                titlecase}}</div>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n          <div class=\"list-header mb-3\">By Metal & Stone</div>\n          <div class=\"d-flex flex-column gap-3 list-item\">\n            <ng-container *ngFor=\"let collection of byMetalAndStone\">\n              <div class=\"d-flex gap-2 align-items-center\">\n                <div style=\"width: 15px;height: 20px;\">\n                  <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n                </div>\n                <div class=\"each-price cursor-pointer\">{{collection.name\n                  |\n                  titlecase}}</div>\n              </div>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n        <ng-container *ngFor=\"let image of selectedCategory?.imageUrls  | slice:0:2; let i = index\">\n          <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n            <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <!-- (mouseleave)=\"showCollections = false\" -->\n  <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n    <div class=\"row w-100 h-100\">\n      <div class=\"col-7 row\">\n        <ng-container *ngFor=\"let collection of collectionList?.collections\">\n          <div class=\"collection row col-3 align-items-center\"\n            (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n            <div class=\"col-imag col-4\">\n              <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n            </div>\n            <div class=\"col-8 text-overflow\">\n              {{collection?.collectionName | titlecase}}\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n        <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n          <div class=\"image-container h-100 col-6  position-relative\" *ngIf=\"image\"\n            (click)=\"applyFilterToList(image, 'collections')\">\n            <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n            <div class=\"text-center p-2 btm-col-name position-absolute\"\n              [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n    [spacingHorizontal]=\"stylesLayout\">\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n      <div class=\"cat-img d-flex justify-content-center align-items-center\">\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n      </div>\n      <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n    </div>\n  </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCAL_STORAGE]
+                }] }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
                 type: Input
@@ -21555,5 +21590,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
+export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
 //# sourceMappingURL=simpo-component-library.mjs.map