simpo-component-library 1.4.69 → 1.4.71

package/fesm2022/simpo-component-library.mjs

@@ -1,13 +1,10 @@
 import * as i2 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, Injectable, EventEmitter, Directive, HostListener, NgModule, Output, ViewChild, Optional, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, HostListener, NgModule, Output, ViewChild, Optional, Inject, PLATFORM_ID } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { map, forkJoin } from 'rxjs';
-import * as i2$2 from 'ngx-cookie-service';
-import * as i1 from '@angular/common/http';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i3 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -15,8 +12,11 @@ import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i9 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1 from '@angular/platform-browser';
+import { map, forkJoin } from 'rxjs';
+import * as i1$1 from '@angular/common/http';
 import * as i2$3 from '@angular/router';
+import * as i2$2 from 'ngx-cookie-service';
 import * as i2$4 from '@angular/material/snack-bar';
 import * as mapboxgl from 'mapbox-gl';
 import * as i10 from 'ngx-image-zoom';
@@ -56,406 +56,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
-class RestService {
-    constructor(http, eventService) {
-        this.http = http;
-        this.eventService = eventService;
-        this.BASE_URL = "https://dev-api.simpo.ai/";
-        this.environmentTypeSubscriber = null;
-        this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
-            if (response == "DEV")
-                this.BASE_URL = "https://dev-api.simpo.ai/";
-            else if (response == "STAGE")
-                this.BASE_URL = "https://state-api.simpo.ai/";
-            else
-                this.BASE_URL = "https://api.simpo.ai/";
-        });
-    }
-    ngOnDestroy() {
-        if (this.environmentTypeSubscriber)
-            this.environmentTypeSubscriber?.unsubscribe();
-    }
-    getFeaturedProduct(collectionId) {
-        let subIndustryId = localStorage.getItem("subindustryId");
-        if (!subIndustryId)
-            subIndustryId = "1eecee8d-efba-62f8-b7b5-b9742fceb17f";
-        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
-    }
-    getProductDetails(productId = null) {
-        const payload = {
-            pageNo: 0,
-            pageSize: 1,
-            itemId: productId
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
-    }
-    getAllCategories() {
-        const payload = {
-            pageNo: 0,
-            pageSize: 10,
-            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId")
-        };
-        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/category', payload).pipe(map((response) => response.data.data?.map((category) => new Category(category))));
-    }
-    getAllCollections() {
-        const payload = {
-            pageNo: 0,
-            pageSize: 10,
-            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId")
-        };
-        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/collection', payload).pipe(map((response) => response.data.data?.map((collection) => new Collection(collection))));
-    }
-    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, sortBy, pageNo, size) {
-        const payload = {
-            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
-            "collectionId": collectionIds,
-            "categoryId": categoryIds,
-            "searchText": searchText,
-            "minPrice": minPrice ?? 0,
-            "maxPrice": maxPrice ?? 0,
-            "sortBy": sortBy,
-            "pageNo": pageNo,
-            "pageSize": size
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
-    }
-    getProductByCategoryId(categoryId) {
-        const payload = {
-            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
-            "categoryId": [categoryId],
-            "pageNo": 0,
-            "pageSize": 10
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
-    }
-    generateOTP(mobile, countryCode) {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
-        return this.http.post(this.BASE_URL + `ecommerce/user/otp/trigger?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
-    }
-    verifyOTP(mobile, otp) {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
-        return this.http.put(this.BASE_URL + `ecommerce/user/authenticate?mobile=${mobile}&otp=${otp}&businessId=${businessId}`, null);
-    }
-    resendOTP(mobile, countryCode) {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
-        return this.http.post(this.BASE_URL + `ecommerce/user/resend?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
-    }
-    addItemToDB(userCart) {
-        return this.http.post(this.BASE_URL + `ecommerce/order/cart`, userCart);
-    }
-    getUserItems(userId, cartType) {
-        return this.http.get(this.BASE_URL + `ecommerce/order/cart?userId=${userId}&cartType=${cartType}`);
-    }
-    placeOrder(cartId) {
-        return this.http.post(this.BASE_URL + `ecommerce/order/order?cartId=${cartId}`, null);
-    }
-    getUserInfo(userId) {
-        return this.http.put(this.BASE_URL + `ecommerce/user/get/user?userId=${userId}`, null);
-    }
-    addUserAddress(user) {
-        return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, user);
-    }
-    updateProfile(payload) {
-        return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, payload);
-    }
-    toggleItemCartToFav() {
-    }
-    // Payment
-    createPaymentToken(payload) {
-        return this.http.post(this.BASE_URL + `ecommerce/payment/order`, payload);
-    }
-    refundPayment(orderId, payload) {
-        return this.http.post(this.BASE_URL + `ecommerce/payment/refund/bank?orderId=${orderId}`, payload);
+class EventsService {
+    constructor() {
+        this.editSection = new EventEmitter();
+        this.duplicate = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.changePosition = new EventEmitter();
+        this.addNewSectionClick = new EventEmitter();
+        this.changeContent = new EventEmitter();
+        this.restyleSection = new EventEmitter();
+        this.pageRedirectionButton = new EventEmitter();
+        this.buttonRedirection = new EventEmitter();
+        this.contactFormData = new EventEmitter();
+        //reference services
+        this.backgroundImageChangeCheck = new EventEmitter();
+        this.colorOverlayChangeChecks = new EventEmitter();
+        this.alignmentChangeChecks = new EventEmitter();
+        this.animationChangeChecks = new EventEmitter();
+        this.spacingChangeChecks = new EventEmitter();
+        this.borderChangeChecks = new EventEmitter();
+        this.cardSizeChangeChecks = new EventEmitter();
+        this.imageStyleChangeChecks = new EventEmitter();
+        this.cornerChangeChecks = new EventEmitter();
+        this.textBackgroundChangeChecks = new EventEmitter();
+        this.buttonStyleChangeChecks = new EventEmitter();
+        this.postionLayoutChangeChecks = new EventEmitter();
+        this.contentAlignmentChangeCheck = new EventEmitter();
+        this.objectPositionChangeCheck = new EventEmitter();
+        this.locationChangeCheck = new EventEmitter();
+        this.mapStyleChangeCheck = new EventEmitter();
+        this.textSizeChangeCheck = new EventEmitter();
+        this.blogByIdEvent = new EventEmitter();
+        this.openBlogListEvent = new EventEmitter();
+        this.toggleEditorEvent = new EventEmitter();
+        this.closeEditorEvent = new EventEmitter();
+        // Ecommerce event emitter
+        this.redirectToPage = new EventEmitter();
+        this.addToCart = new EventEmitter();
+        this.placeOrder = new EventEmitter();
+        this.featureCollectionList = new EventEmitter();
+        this.environmentType = new EventEmitter();
+        this.showLoadingScreen = new EventEmitter();
+        this.cashFreeEvent = new EventEmitter();
+        this.paymentStatusEvent = new EventEmitter();
     }
-    checkPaymentStatus(payload) {
-        return this.http.post(this.BASE_URL + `ecommerce/payment/status`, payload);
+    ngOnInit() {
+        this.paymentStatusEvent.subscribe((response) => {
+            if (response) { }
+            // this.storageService.clearUserCart();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: EventsService }] });
+        }], ctorParameters: () => [] });
 
-class StorageServiceService {
-    constructor(eventService, cookieService, restService) {
+class CornerDirective {
+    constructor(el, eventService) {
+        this.el = el;
         this.eventService = eventService;
-        this.cookieService = cookieService;
-        this.restService = restService;
-        this.totalCartItems = 0;
-        this.databaseName = "USER";
-        this.databaseVersion = 1;
-        this.cartCollectionName = "USER_CART";
-        this.favouriteCollectionName = "USER_FAVOURITE";
-        this.userCollectionName = "USER";
-        this.cartCollectionRef = null;
-        this.favouriteCollectionRef = null;
-        this.userCollectionRef = null;
-        this.createDataBase();
+        this.checkSizeChanges();
     }
-    get getTotalCartItems() {
-        return this.totalCartItems;
+    ngOnInit() {
     }
-    async createDataBase() {
-        const request = await window.indexedDB.open(this.databaseName, 1);
-        this.eventService.showLoadingScreen.emit(true);
-        request.onerror = () => { };
-        request.onsuccess = async (event) => {
-            this.database = await event.target.result;
-            const request = await this.getUserCart();
-            request.onsuccess = async (response) => {
-                (await this.getUserCart()).onsuccess = (userCartResponse) => {
-                    this.totalCartItems = userCartResponse.target.result.length;
-                    try {
-                        const response = this.addAllProductsToCart(userCartResponse.target.result);
-                        response.oncomplete = () => {
-                            this.eventService.showLoadingScreen.emit(false);
-                        };
-                        response.onerror = () => {
-                            this.eventService.showLoadingScreen.emit(false);
-                        };
-                    }
-                    catch (exception) {
-                        this.eventService.showLoadingScreen.emit(false);
-                    }
-                    ;
-                    console.log("Database created");
-                };
-                // UserCart.orderedItems = await response.target.result;
-            };
-        };
-        request.onupgradeneeded = (event) => {
-            this.database = event.target.result;
-            this.cartCollectionRef = this.database.createObjectStore(this.cartCollectionName, { keyPath: "itemId" });
-            this.favouriteCollectionRef = this.database.createObjectStore(this.favouriteCollectionName, { keyPath: "itemId" });
-            this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
-        };
+    ngOnDestroy() {
+        if (this.cornerSubSubscription) {
+            this.cornerSubSubscription.unsubscribe();
+        }
     }
-    async storeDataToJSON() {
-        this.eventService.showLoadingScreen.emit(true);
-        const request = await this.getUserCart();
-        request.onsuccess = async (response) => {
-            // UserCart.orderedItems = await response.target.result;
-            // console.log("Car", UserCart);
-            const favRequest = await this.getUserWhishlist();
-            favRequest.onsuccess = async (favResponse) => {
-                this.eventService.showLoadingScreen.emit(false);
-            };
-        };
-    }
-    calculateBillingDetails() {
-        // UserCart.billdetails.totalGrossValue = 0;
-        // UserCart.billdetails.totalNetValue = 0;
-        // UserCart.billdetails.deliveryCharges = 0;
-        // UserCart.billdetails.discountAmount = 0;
-        // UserCart.billdetails.totalOfferedValue = 0;
-        // UserCart.billdetails.totalTax = 0;
-        // UserCart.orderedItems.forEach((item: OrderedItems)=> {
-        //   UserCart.billdetails.totalGrossValue += (item.price * item.quantity);
-        //   UserCart.billdetails.totalTax += (item.itemTax * item.quantity);
-        // })
-        // UserCart.billdetails.totalNetValue = (UserCart.billdetails.totalGrossValue + UserCart.billdetails.totalTax + UserCart.billdetails.deliveryCharges) - UserCart.billdetails.discountAmount;
-        // return UserCart;
-    }
-    updateAllData() {
-        const userDetails = this.getUser();
-        if (userDetails) {
-            this.eventService.showLoadingScreen.emit(true);
-            const request = forkJoin([
-                this.restService.getUserItems(userDetails.userId, "CART"),
-                this.restService.getUserItems(userDetails.userId, "WISHLIST")
-            ]);
-            request.subscribe((cartResponse) => {
-                console.log("Cart Response : ", cartResponse);
-                cartResponse?.[0].data?.orderedItems?.forEach((item) => {
-                    this.addProductToCart(item);
-                });
-                // cartResponse?.[1].data?.orderedItems?.forEach((item: OrderedItems)=> {
-                //   this.addProductToWishlist(item);
-                //   UserFavourite.orderedItems.push(item as never);
-                // })
-                this.eventService.showLoadingScreen.emit(false);
-            });
-        }
-        else {
-            // this.storeDataToJSON();
-        }
-    }
-    // CART SERVICE
-    async getUserCart() {
-        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        return await transaction.objectStore(this.cartCollectionName).getAll();
-    }
-    addProductToCart(product) {
-        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        const response = transaction.objectStore(this.cartCollectionName).get(product.itemId);
-        response.onsuccess = (cartResponse) => {
-            console.log("Cart Resppnse : ", cartResponse);
-            if (cartResponse.target.result) { }
-            else {
-                this.totalCartItems += 1;
-            }
-        };
-        return transaction.objectStore(this.cartCollectionName).put(product);
-    }
-    addAllProductsToCart(products) {
-        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        products.forEach((product) => {
-            console.log(product + "info");
-            const response = transaction.objectStore(this.cartCollectionName).put(product);
-        });
-        return transaction;
-    }
-    removeProductFromCart(productId) {
-        this.totalCartItems -= 1;
-        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        return transaction.objectStore(this.cartCollectionName).delete(productId);
-    }
-    async getProductFromCart(productId) {
-        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        return await transaction.objectStore(this.cartCollectionName).get(productId);
-    }
-    // WISHLIST SERVICE
-    async getUserWhishlist() {
-        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
-        return await transaction.objectStore(this.favouriteCollectionName).getAll();
-    }
-    addProductToWishlist(product) {
-        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
-        return transaction.objectStore(this.favouriteCollectionName).put(product);
-    }
-    removeProductFromWishlist(productId) {
-        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
-        return transaction.objectStore(this.favouriteCollectionName).delete(productId);
-    }
-    async getProductFromWishlist(productId) {
-        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
-        return await transaction.objectStore(this.favouriteCollectionName).get(productId);
-    }
-    clearUserCart() {
-        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        return transaction.objectStore(this.cartCollectionName).clear();
-    }
-    clearUserWishlist() {
-        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
-        return transaction.objectStore(this.favouriteCollectionName).clear();
-    }
-    // USER SERVICE
-    addUser(user) {
-        this.cookieService.set("user", JSON.stringify(user ?? "{}"), 7);
-        return user;
-    }
-    getUser() {
-        try {
-            return JSON.parse(this.cookieService.get("user"));
-        }
-        catch (exception) { }
-        return null;
-    }
-    // payment issue
-    storePaymentFor(paymentFor) {
-        this.cookieService.set("paymentFor", paymentFor, 7);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$2.CookieService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.CookieService }, { type: RestService }] });
-
-class EventsService {
-    constructor(storageService) {
-        this.storageService = storageService;
-        this.editSection = new EventEmitter();
-        this.duplicate = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.changePosition = new EventEmitter();
-        this.addNewSectionClick = new EventEmitter();
-        this.changeContent = new EventEmitter();
-        this.restyleSection = new EventEmitter();
-        this.pageRedirectionButton = new EventEmitter();
-        this.buttonRedirection = new EventEmitter();
-        this.contactFormData = new EventEmitter();
-        //reference services
-        this.backgroundImageChangeCheck = new EventEmitter();
-        this.colorOverlayChangeChecks = new EventEmitter();
-        this.alignmentChangeChecks = new EventEmitter();
-        this.animationChangeChecks = new EventEmitter();
-        this.spacingChangeChecks = new EventEmitter();
-        this.borderChangeChecks = new EventEmitter();
-        this.cardSizeChangeChecks = new EventEmitter();
-        this.imageStyleChangeChecks = new EventEmitter();
-        this.cornerChangeChecks = new EventEmitter();
-        this.textBackgroundChangeChecks = new EventEmitter();
-        this.buttonStyleChangeChecks = new EventEmitter();
-        this.postionLayoutChangeChecks = new EventEmitter();
-        this.contentAlignmentChangeCheck = new EventEmitter();
-        this.objectPositionChangeCheck = new EventEmitter();
-        this.locationChangeCheck = new EventEmitter();
-        this.mapStyleChangeCheck = new EventEmitter();
-        this.textSizeChangeCheck = new EventEmitter();
-        this.blogByIdEvent = new EventEmitter();
-        this.openBlogListEvent = new EventEmitter();
-        this.toggleEditorEvent = new EventEmitter();
-        this.closeEditorEvent = new EventEmitter();
-        // Ecommerce event emitter
-        this.redirectToPage = new EventEmitter();
-        this.addToCart = new EventEmitter();
-        this.placeOrder = new EventEmitter();
-        this.featureCollectionList = new EventEmitter();
-        this.environmentType = new EventEmitter();
-        this.showLoadingScreen = new EventEmitter();
-        this.cashFreeEvent = new EventEmitter();
-        this.paymentStatusEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.paymentStatusEvent.subscribe((response) => {
-            if (response)
-                this.storageService.clearUserCart();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, deps: [{ token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: StorageServiceService }] });
-
-class CornerDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-        this.checkSizeChanges();
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        if (this.cornerSubSubscription) {
-            this.cornerSubSubscription.unsubscribe();
-        }
-    }
-    ngOnChanges() {
-        if (this.cornerData === 'Small') {
-            this.el.nativeElement.style.setProperty('border-radius', '.5rem');
-        }
-        if (this.cornerData === 'Medium') {
-            this.el.nativeElement.style.setProperty('border-radius', '1rem');
-        }
-        if (this.cornerData === 'Large') {
-            this.el.nativeElement.style.setProperty('border-radius', '2rem');
-        }
-        if (this.cornerData === 'None') {
-            this.el.nativeElement.style.setProperty('border-radius', '0px');
-        }
+    ngOnChanges() {
+        if (this.cornerData === 'Small') {
+            this.el.nativeElement.style.setProperty('border-radius', '.5rem');
+        }
+        if (this.cornerData === 'Medium') {
+            this.el.nativeElement.style.setProperty('border-radius', '1rem');
+        }
+        if (this.cornerData === 'Large') {
+            this.el.nativeElement.style.setProperty('border-radius', '2rem');
+        }
+        if (this.cornerData === 'None') {
+            this.el.nativeElement.style.setProperty('border-radius', '0px');
+        }
     }
     checkSizeChanges() {
         this.cornerSubSubscription = this.eventService.cornerChangeChecks.subscribe((res) => {
@@ -3177,181 +2863,479 @@ class VideoSectionComponent extends BaseSection {
         this._mainContainer = null;
         this.videoLink = '';
     }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-        if (this.content?.videoLink.url) {
-            this.videoLink = this.content?.videoLink?.url;
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
+        if (this.content?.videoLink.url) {
+            this.videoLink = this.content?.videoLink?.url;
+        }
+        const videoId = this.youTubeIdFromLink(this.videoLink);
+        this.videoLink = "https://www.youtube.com/embed/" + videoId;
+        this.deleteSelected = this.delete;
+    }
+    youTubeIdFromLink(url) {
+        return url.match(/(?:https?:\/\/)?(?:www\.|m\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\/?\?v=|\/embed\/|\/)([^\s&\?\/\#]+)/)?.[1];
+    }
+    get getVideoLink() {
+        let videoId = this.youTubeIdFromLink(this.content?.videoLink?.url || '') || '';
+        return "https://www.youtube.com/embed/" + videoId;
+    }
+    get headingSpace() {
+        return this.style?.layout.headingSpacing;
+    }
+    editSection() {
+        this._eventService.toggleEditorEvent.emit(false);
+        setTimeout(() => {
+            this._eventService.editSection.emit({ data: this.data });
+        }, 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(getVideoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VideoSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-video-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ColumnDirectiveDirective,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        ContentTitleDirective,
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(getVideoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], _mainContainer: [{
+                type: ViewChild,
+                args: ['mainContainer']
+            }] } });
+
+class NavbarButtonElementComponent {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+        this.HeaderButtonStyle = HeaderButtonStyle;
+    }
+    ngOnInit() {
+        // console.log(this.buttonData)
+    }
+    changePage(pageData) {
+        this._eventService.pageRedirectionButton.emit({ data: pageData ? pageData : this.buttonData });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarButtonElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId" }, ngImport: i0, template: "<div *ngIf=\"buttonData?.status\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n  <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important;\" [simpoColor]=\"bgColor\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}.not-selected-dropdown{background:transparent}.dropdown-item{font-size:18px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.show{padding:5px 15px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarButtonElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"buttonData?.status\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n  <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important;\" [simpoColor]=\"bgColor\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}.not-selected-dropdown{background:transparent}.dropdown-item{font-size:18px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.show{padding:5px 15px!important}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonData: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], selectedStyle: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], sectionId: [{
+                type: Input
+            }] } });
+
+class SimpoStickyDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnChanges() {
+        if (this.simpoSticky) {
+            this.el.nativeElement.style.setProperty("position", "fixed");
+            // this.el.nativeElement.style.setProperty("top", "0px");
+            this.el.nativeElement.style.setProperty("z-index", "1002");
+        }
+        else {
+            this.el.nativeElement.style.setProperty("position", "relative");
+            // this.el.nativeElement.style.setProperty("top", "0px");
+        }
+    }
+    ngOnDestroy() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoStickyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: SimpoStickyDirective, isStandalone: true, selector: "[simpoSticky]", inputs: { simpoSticky: "simpoSticky" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoStickyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoSticky]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { simpoSticky: [{
+                type: Input,
+                args: ['simpoSticky']
+            }] } });
+
+class RestService {
+    constructor(http, eventService) {
+        this.http = http;
+        this.eventService = eventService;
+        this.BASE_URL = "https://dev-api.simpo.ai/";
+        this.environmentTypeSubscriber = null;
+        this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
+            if (response == "DEV")
+                this.BASE_URL = "https://dev-api.simpo.ai/";
+            else if (response == "STAGE")
+                this.BASE_URL = "https://state-api.simpo.ai/";
+            else
+                this.BASE_URL = "https://api.simpo.ai/";
+        });
+    }
+    ngOnDestroy() {
+        if (this.environmentTypeSubscriber)
+            this.environmentTypeSubscriber?.unsubscribe();
+    }
+    getFeaturedProduct(collectionId) {
+        let subIndustryId = localStorage.getItem("subindustryId");
+        if (!subIndustryId)
+            subIndustryId = "1eecee8d-efba-62f8-b7b5-b9742fceb17f";
+        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
+    }
+    getProductDetails(productId = null) {
+        const payload = {
+            pageNo: 0,
+            pageSize: 1,
+            itemId: productId
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
+    }
+    getAllCategories() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId")
+        };
+        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/category', payload).pipe(map((response) => response.data.data?.map((category) => new Category(category))));
+    }
+    getAllCollections() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId")
+        };
+        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/collection', payload).pipe(map((response) => response.data.data?.map((collection) => new Collection(collection))));
+    }
+    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, sortBy, pageNo, size) {
+        const payload = {
+            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            "collectionId": collectionIds,
+            "categoryId": categoryIds,
+            "searchText": searchText,
+            "minPrice": minPrice ?? 0,
+            "maxPrice": maxPrice ?? 0,
+            "sortBy": sortBy,
+            "pageNo": pageNo,
+            "pageSize": size
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
+    }
+    getProductByCategoryId(categoryId) {
+        const payload = {
+            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            "categoryId": [categoryId],
+            "pageNo": 0,
+            "pageSize": 10
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
+    }
+    generateOTP(mobile, countryCode) {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
+        return this.http.post(this.BASE_URL + `ecommerce/user/otp/trigger?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
+    }
+    verifyOTP(mobile, otp) {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
+        return this.http.put(this.BASE_URL + `ecommerce/user/authenticate?mobile=${mobile}&otp=${otp}&businessId=${businessId}`, null);
+    }
+    resendOTP(mobile, countryCode) {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
+        return this.http.post(this.BASE_URL + `ecommerce/user/resend?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
+    }
+    addItemToDB(userCart) {
+        return this.http.post(this.BASE_URL + `ecommerce/order/cart`, userCart);
+    }
+    getUserItems(userId, cartType) {
+        return this.http.get(this.BASE_URL + `ecommerce/order/cart?userId=${userId}&cartType=${cartType}`);
+    }
+    placeOrder(cartId) {
+        return this.http.post(this.BASE_URL + `ecommerce/order/order?cartId=${cartId}`, null);
+    }
+    getUserInfo(userId) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/get/user?userId=${userId}`, null);
+    }
+    addUserAddress(user) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, user);
+    }
+    updateProfile(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, payload);
+    }
+    toggleItemCartToFav() {
+    }
+    // Payment
+    createPaymentToken(payload) {
+        return this.http.post(this.BASE_URL + `ecommerce/payment/order`, payload);
+    }
+    refundPayment(orderId, payload) {
+        return this.http.post(this.BASE_URL + `ecommerce/payment/refund/bank?orderId=${orderId}`, payload);
+    }
+    checkPaymentStatus(payload) {
+        return this.http.post(this.BASE_URL + `ecommerce/payment/status`, payload);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
+
+class StorageServiceService {
+    constructor(eventService, cookieService, restService) {
+        this.eventService = eventService;
+        this.cookieService = cookieService;
+        this.restService = restService;
+        this.totalCartItems = 0;
+        this.databaseName = "USER";
+        this.databaseVersion = 1;
+        this.cartCollectionName = "USER_CART";
+        this.favouriteCollectionName = "USER_FAVOURITE";
+        this.userCollectionName = "USER";
+        this.cartCollectionRef = null;
+        this.favouriteCollectionRef = null;
+        this.userCollectionRef = null;
+        this.createDataBase();
+    }
+    get getTotalCartItems() {
+        return this.totalCartItems;
+    }
+    async createDataBase() {
+        const request = await window.indexedDB.open(this.databaseName, 1);
+        this.eventService.showLoadingScreen.emit(true);
+        request.onerror = () => { };
+        request.onsuccess = async (event) => {
+            this.database = await event.target.result;
+            const request = await this.getUserCart();
+            request.onsuccess = async (response) => {
+                (await this.getUserCart()).onsuccess = (userCartResponse) => {
+                    this.totalCartItems = userCartResponse.target.result.length;
+                    try {
+                        const response = this.addAllProductsToCart(userCartResponse.target.result);
+                        response.oncomplete = () => {
+                            this.eventService.showLoadingScreen.emit(false);
+                        };
+                        response.onerror = () => {
+                            this.eventService.showLoadingScreen.emit(false);
+                        };
+                    }
+                    catch (exception) {
+                        this.eventService.showLoadingScreen.emit(false);
+                    }
+                    ;
+                    console.log("Database created");
+                };
+                // UserCart.orderedItems = await response.target.result;
+            };
+        };
+        request.onupgradeneeded = (event) => {
+            this.database = event.target.result;
+            this.cartCollectionRef = this.database.createObjectStore(this.cartCollectionName, { keyPath: "itemId" });
+            this.favouriteCollectionRef = this.database.createObjectStore(this.favouriteCollectionName, { keyPath: "itemId" });
+            this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
+        };
+    }
+    async storeDataToJSON() {
+        this.eventService.showLoadingScreen.emit(true);
+        const request = await this.getUserCart();
+        request.onsuccess = async (response) => {
+            // UserCart.orderedItems = await response.target.result;
+            // console.log("Car", UserCart);
+            const favRequest = await this.getUserWhishlist();
+            favRequest.onsuccess = async (favResponse) => {
+                this.eventService.showLoadingScreen.emit(false);
+            };
+        };
+    }
+    calculateBillingDetails() {
+        // UserCart.billdetails.totalGrossValue = 0;
+        // UserCart.billdetails.totalNetValue = 0;
+        // UserCart.billdetails.deliveryCharges = 0;
+        // UserCart.billdetails.discountAmount = 0;
+        // UserCart.billdetails.totalOfferedValue = 0;
+        // UserCart.billdetails.totalTax = 0;
+        // UserCart.orderedItems.forEach((item: OrderedItems)=> {
+        //   UserCart.billdetails.totalGrossValue += (item.price * item.quantity);
+        //   UserCart.billdetails.totalTax += (item.itemTax * item.quantity);
+        // })
+        // UserCart.billdetails.totalNetValue = (UserCart.billdetails.totalGrossValue + UserCart.billdetails.totalTax + UserCart.billdetails.deliveryCharges) - UserCart.billdetails.discountAmount;
+        // return UserCart;
+    }
+    updateAllData() {
+        const userDetails = this.getUser();
+        if (userDetails) {
+            this.eventService.showLoadingScreen.emit(true);
+            const request = forkJoin([
+                this.restService.getUserItems(userDetails.userId, "CART"),
+                this.restService.getUserItems(userDetails.userId, "WISHLIST")
+            ]);
+            request.subscribe((cartResponse) => {
+                console.log("Cart Response : ", cartResponse);
+                cartResponse?.[0].data?.orderedItems?.forEach((item) => {
+                    this.addProductToCart(item);
+                });
+                // cartResponse?.[1].data?.orderedItems?.forEach((item: OrderedItems)=> {
+                //   this.addProductToWishlist(item);
+                //   UserFavourite.orderedItems.push(item as never);
+                // })
+                this.eventService.showLoadingScreen.emit(false);
+            });
+        }
+        else {
+            // this.storeDataToJSON();
         }
-        const videoId = this.youTubeIdFromLink(this.videoLink);
-        this.videoLink = "https://www.youtube.com/embed/" + videoId;
-        this.deleteSelected = this.delete;
     }
-    youTubeIdFromLink(url) {
-        return url.match(/(?:https?:\/\/)?(?:www\.|m\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\/?\?v=|\/embed\/|\/)([^\s&\?\/\#]+)/)?.[1];
+    // CART SERVICE
+    async getUserCart() {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        return await transaction.objectStore(this.cartCollectionName).getAll();
     }
-    get getVideoLink() {
-        let videoId = this.youTubeIdFromLink(this.content?.videoLink?.url || '') || '';
-        return "https://www.youtube.com/embed/" + videoId;
+    addProductToCart(product) {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        const response = transaction.objectStore(this.cartCollectionName).get(product.itemId);
+        response.onsuccess = (cartResponse) => {
+            console.log("Cart Resppnse : ", cartResponse);
+            if (cartResponse.target.result) { }
+            else {
+                this.totalCartItems += 1;
+            }
+        };
+        return transaction.objectStore(this.cartCollectionName).put(product);
     }
-    get headingSpace() {
-        return this.style?.layout.headingSpacing;
+    addAllProductsToCart(products) {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        products.forEach((product) => {
+            console.log(product + "info");
+            const response = transaction.objectStore(this.cartCollectionName).put(product);
+        });
+        return transaction;
     }
-    editSection() {
-        this._eventService.toggleEditorEvent.emit(false);
-        setTimeout(() => {
-            this._eventService.editSection.emit({ data: this.data });
-        }, 100);
+    removeProductFromCart(productId) {
+        this.totalCartItems -= 1;
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        return transaction.objectStore(this.cartCollectionName).delete(productId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1$1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(getVideoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
-                //directive
-                ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VideoSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-video-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ColumnDirectiveDirective,
-                        ContentFitDirective,
-                        SimpoComponentModule,
-                        //directive
-                        ContentTitleDirective,
-                        AnimationDirective,
-                        BackgroundDirective,
-                        BannerContentFitDirective,
-                        BorderDirective,
-                        ButtonDirectiveDirective,
-                        ColumnDirectiveDirective,
-                        ContainerFitDirective,
-                        simpoConetenAlignmentDirective,
-                        ContentFitDirective,
-                        CornerDirective,
-                        SimpoFooterLayoutDirective,
-                        HoverDirective,
-                        ImageDirectiveDirective,
-                        OverlayDirective,
-                        PositionLayoutDirectiveDirective,
-                        TextBackgroundDirectiveDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(getVideoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], _mainContainer: [{
-                type: ViewChild,
-                args: ['mainContainer']
-            }] } });
-
-class NavbarButtonElementComponent {
-    constructor(_eventService) {
-        this._eventService = _eventService;
-        this.HeaderButtonStyle = HeaderButtonStyle;
+    async getProductFromCart(productId) {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        return await transaction.objectStore(this.cartCollectionName).get(productId);
     }
-    ngOnInit() {
-        // console.log(this.buttonData)
+    // WISHLIST SERVICE
+    async getUserWhishlist() {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        return await transaction.objectStore(this.favouriteCollectionName).getAll();
     }
-    changePage(pageData) {
-        this._eventService.pageRedirectionButton.emit({ data: pageData ? pageData : this.buttonData });
+    addProductToWishlist(product) {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        return transaction.objectStore(this.favouriteCollectionName).put(product);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarButtonElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId" }, ngImport: i0, template: "<div *ngIf=\"buttonData?.status\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n  <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important;\" [simpoColor]=\"bgColor\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}.not-selected-dropdown{background:transparent}.dropdown-item{font-size:18px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.show{padding:5px 15px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarButtonElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"buttonData?.status\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;padding: 20px 5px;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n  <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important;\" [simpoColor]=\"bgColor\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}.not-selected-dropdown{background:transparent}.dropdown-item{font-size:18px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.show{padding:5px 15px!important}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonData: [{
-                type: Input
-            }], buttonStyle: [{
-                type: Input
-            }], selectedStyle: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], sectionId: [{
-                type: Input
-            }] } });
-
-class SimpoStickyDirective {
-    constructor(el) {
-        this.el = el;
+    removeProductFromWishlist(productId) {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        return transaction.objectStore(this.favouriteCollectionName).delete(productId);
     }
-    ngOnChanges() {
-        if (this.simpoSticky) {
-            this.el.nativeElement.style.setProperty("position", "fixed");
-            // this.el.nativeElement.style.setProperty("top", "0px");
-            this.el.nativeElement.style.setProperty("z-index", "1002");
-        }
-        else {
-            this.el.nativeElement.style.setProperty("position", "relative");
-            // this.el.nativeElement.style.setProperty("top", "0px");
+    async getProductFromWishlist(productId) {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        return await transaction.objectStore(this.favouriteCollectionName).get(productId);
+    }
+    clearUserCart() {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        return transaction.objectStore(this.cartCollectionName).clear();
+    }
+    clearUserWishlist() {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        return transaction.objectStore(this.favouriteCollectionName).clear();
+    }
+    // USER SERVICE
+    setUser(user) {
+        this.cookieService.set("user", JSON.stringify(user ?? "{}"), 7);
+        return user;
+    }
+    getUser() {
+        try {
+            return JSON.parse(this.cookieService.get("user"));
         }
+        catch (exception) { }
+        return null;
     }
-    ngOnDestroy() {
+    // payment issue
+    storePaymentFor(paymentFor) {
+        this.cookieService.set("paymentFor", paymentFor, 7);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoStickyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: SimpoStickyDirective, isStandalone: true, selector: "[simpoSticky]", inputs: { simpoSticky: "simpoSticky" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$2.CookieService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoStickyDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[simpoSticky]',
-                    standalone: true
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { simpoSticky: [{
-                type: Input,
-                args: ['simpoSticky']
-            }] } });
-
-var user = {
-	addressDetailsList: [
-	],
-	businessId: "",
-	gender: "",
-	userId: "",
-	profilePic: "",
-	contact: {
-		countryCode: "",
-		email: "",
-		mobile: "",
-		name: ""
-	}
-};
-var UserInfo = {
-	user: user
-};
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.CookieService }, { type: RestService }] });
 
 class UserBasicInfoComponent {
-    constructor(restService, router, dialogRef) {
+    constructor(restService, router, dialogRef, storageService) {
         this.restService = restService;
         this.router = router;
         this.dialogRef = dialogRef;
+        this.storageService = storageService;
         this.gender = null;
         this.firstName = "";
         this.middleName = "";
         this.lastName = "";
         this.email = "";
         this.profilePic = "";
+        this.userDetails = null;
     }
     ngOnInit() {
-        this.firstName = UserInfo.user?.contact?.name?.split(" ")?.[0];
-        this.middleName = UserInfo.user?.contact?.name?.split(" ")?.[1];
-        this.lastName = UserInfo.user?.contact?.name?.split(" ")?.[2];
-        this.email = UserInfo.user?.contact?.email;
-        this.gender = UserInfo.user?.gender;
-        this.profilePic = UserInfo.user?.profilePic;
+        this.userDetails = this.storageService.getUser();
+        this.firstName = this.userDetails?.contact?.name?.split(" ")?.[0] ?? "";
+        this.middleName = this.userDetails?.contact?.name?.split(" ")?.[1] ?? "";
+        this.lastName = this.userDetails?.contact?.name?.split(" ")?.[2] ?? "";
+        this.email = this.userDetails?.contact?.email ?? "";
+        this.gender = this.userDetails?.gender;
+        this.profilePic = this.userDetails?.profilePic ?? "";
     }
     close() {
         this.dialogRef.close();
     }
     saveProfile() {
         const payload = {
-            userId: UserInfo.user?.userId,
+            userId: this.userDetails?.userId,
             gender: this.gender,
             profilePic: this.profilePic,
             contact: {
@@ -3367,7 +3351,7 @@ class UserBasicInfoComponent {
                 this.router.navigate(['/']);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
@@ -3377,7 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatDialogModule,
                         FormsModule
                     ], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }] });
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }, { type: StorageServiceService }] });
 
 class AuthenticateUserComponent {
     constructor(matData, restService, router, matDialog, storageService, dialogRef, _eventService) {
@@ -3426,8 +3410,7 @@ class AuthenticateUserComponent {
     verifyOTP() {
         this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
             // localStorage.setItem("userId", response.userId);
-            const userDetails = this.storageService.addUser(response.data);
-            UserInfo.user = userDetails;
+            const userDetails = this.storageService.setUser(response.data);
             this.storageService.updateAllData();
             if (userDetails.contact?.name?.length > 0) {
                 if (this.dialogRef)
@@ -4816,6 +4799,8 @@ class CartService {
         this.storageService = storageService;
         this.restService = restService;
     }
+    ngOnInit() {
+    }
     addItemFromCartPage(product, userCart) {
         if (product.quantity) {
             // let productIdx: number = -1;
@@ -4881,6 +4866,9 @@ class CartService {
     }
     storeCartDataToServer(cart) {
     }
+    clearCartItems() {
+        this.storageService.clearUserCart();
+    }
     storeDataToServer() {
         // const userCart = UserCart as never as Cart;
         // const userWishlist = UserFavourites as never as Cart;
@@ -5008,7 +4996,7 @@ class FeaturedProductsComponent extends BaseSection {
         }, 50);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: 
                 //directive
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
@@ -5030,7 +5018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         ButtonDirectiveDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -5489,14 +5477,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class AddressComponent {
-    constructor(ngZone, restService, matDialog, router, storageService
-    // private readonly matDialogRef: MatDialogRef<AddressComponent>
-    ) {
+    constructor(ngZone, restService, matDialog, router, storageService, matData, matDialogRef) {
         this.ngZone = ngZone;
         this.restService = restService;
         this.matDialog = matDialog;
         this.router = router;
         this.storageService = storageService;
+        this.matData = matData;
+        this.matDialogRef = matDialogRef;
+        this.selectedAddressIdx = 0;
         this.addressList = [];
         this.address = {
             "receiverName": "",
@@ -5538,6 +5527,10 @@ class AddressComponent {
     }
     ngOnInit() {
         this.getCurrentLocation();
+        if (this.matData) {
+            this.addressList = this.matData.addressList;
+            this.addNewAddress = true;
+        }
     }
     ngOnChanges(changes) {
         this.addressList = this.responseData;
@@ -5547,6 +5540,7 @@ class AddressComponent {
         this.address.addressType = address.key;
     }
     close() {
+        this.matDialogRef.close();
     }
     getCurrentLocation() {
         if (navigator.geolocation) {
@@ -5615,9 +5609,16 @@ class AddressComponent {
                 "gender": userDetails?.gender?.length > 0 ? userDetails?.gender : null
             };
             this.restService.addUserAddress(payload).subscribe((response) => {
-                this.addNewAddress = false;
-                UserInfo.user = userDetails;
-                UserInfo.user.addressDetailsList.push(this.address);
+                if (this.matData) {
+                    this.matDialogRef.close(this.address);
+                }
+                else {
+                    this.addNewAddress = false;
+                    if (userDetails) {
+                        userDetails.addressDetailsList.push(this.address);
+                        this.storageService.setUser(userDetails);
+                    }
+                }
             });
         }
         else {
@@ -5632,13 +5633,8 @@ class AddressComponent {
             }
         }
     }
-    selectAddress(idx) {
-        this.selectedAddress = {
-            selectedAddressIdx: idx
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i2$3.Router }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", selectedAddress: "selectedAddress", isCart: "isCart" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectAddress(idx)\" [ngClass]=\"{'selected-address': selectedAddress.selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i2$3.Router }, { token: StorageServiceService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", isCart: "isCart" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, decorators: [{
             type: Component,
@@ -5647,13 +5643,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CommonModule,
                         FormsModule,
                         MatDialogModule
-                    ], template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectAddress(idx)\" [ngClass]=\"{'selected-address': selectedAddress.selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i2$3.Router }, { type: StorageServiceService }], propDecorators: { responseData: [{
+                    ], template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i2$3.Router }, { type: StorageServiceService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input
-            }], selectedAddress: [{
-                type: Input
             }], isCart: [{
                 type: Input
             }] } });
@@ -5865,7 +5866,8 @@ class CartComponent extends BaseSection {
         }
         const userDetail = this.storageService.getUser();
         console.log("User Details", userDetail);
-        const address = userDetail?.addressDetailsList[this.selectedAddress?.selectedAddressIdx ?? 0];
+        console.log("Index : ", this.selectedAddress?.selectedAddressIdx);
+        const address = userDetail?.addressDetailsList[this.selectedAddress?.selectedAddressIdx >= 0 ? this.selectedAddress?.selectedAddressIdx : 0];
         const payload = {
             "userId": userDetail.userId,
             "cartId": localStorage.getItem('cartId'),
@@ -5888,7 +5890,7 @@ class CartComponent extends BaseSection {
         return this.userDetails ? [...this.userDetails?.addressDetailsList] : [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i2$2.CookieService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n    <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [selectedAddress]=\"selectedAddress\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "selectedAddress", "isCart"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n    <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, decorators: [{
             type: Component,
@@ -5904,7 +5906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         HoverDirective,
                         AddressComponent,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n    <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [selectedAddress]=\"selectedAddress\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n    <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$2.CookieService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -6093,10 +6095,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class UserProfileComponent {
-    constructor(router, _eventService, restService) {
+    constructor(router, _eventService, restService, storageService, matDialog) {
         this.router = router;
         this._eventService = _eventService;
         this.restService = restService;
+        this.storageService = storageService;
+        this.matDialog = matDialog;
         this.isLoading = true;
         this.selectedSidePanelTab = "Orders";
         this.userDetails = null;
@@ -6112,7 +6116,7 @@ class UserProfileComponent {
     }
     ngOnInit() {
         // if (this.responseData?.userDetails) {
-        this.userDetails = UserInfo.user;
+        this.userDetails = this.storageService.getUser();
         // this.tabs = this.responseData.tabs;
         // this.orderList = this.responseData.orders;
         // }
@@ -6122,6 +6126,11 @@ class UserProfileComponent {
         });
         // this.getUserInfo();
     }
+    getUserInfo() {
+        this.restService.getUserInfo("ada107e9-a38b-46b4-b065-b7f060c3fa15").subscribe((response) => {
+            this.userDetails = response.data;
+        });
+    }
     goToPanel(panel) {
         this.selectedSidePanelTab = panel.value;
     }
@@ -6135,6 +6144,16 @@ class UserProfileComponent {
     }
     goToDetails(order) {
     }
+    addNewAddress() {
+        this.matDialog.open(AddressComponent, {
+            height: 'fit-content',
+            width: '35vw',
+            data: { addressList: this.userDetails?.addressDetailsList }
+        }).afterClosed().subscribe((response) => {
+            if (response)
+                this.userDetails?.addressDetailsList.push(response);
+        });
+    }
     goToHome() {
         this.router.navigate(['/']);
     }
@@ -6151,8 +6170,11 @@ class UserProfileComponent {
     get isMobile() {
         return window.innerWidth <= 475;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of addressList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n                        <span class=\"address-type\">{{address.type}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.address}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.phone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    get getUserProfile() {
+        return this.userDetails?.profilePic ? this.userDetails.profilePic : (this.userDetails?.gender == "MALE" ? 'https://img.icons8.com/?size=100&id=108296&format=png&color=000000' : 'https://img.icons8.com/?size=100&id=108295&format=png&color=000000assets/female-icon.svg');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : '85'\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <div class=\"heading-medium d-flex justify-content-center\">\r\n                      Your Order list is empty\r\n                    </div>\r\n                    <div class=\"description d-flex justify-content-center\">\r\n                      Looks like you have not ordered anything to from us. Go ahead & explore top categories.\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -6166,8 +6188,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         HoverDirective,
                         OrderDetailsComponent,
                         NgxSkeletonLoaderModule
-                    ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of addressList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n                        <span class=\"address-type\">{{address.type}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.address}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.phone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }], propDecorators: { responseData: [{
+                    ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : '85'\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <div class=\"heading-medium d-flex justify-content-center\">\r\n                      Your Order list is empty\r\n                    </div>\r\n                    <div class=\"description d-flex justify-content-center\">\r\n                      Looks like you have not ordered anything to from us. Go ahead & explore top categories.\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: i3.MatDialog }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input