simpo-component-library 1.4.214 → 1.4.217

package/fesm2022/simpo-component-library.mjs

@@ -3043,6 +3043,7 @@ class RestService {
         let subIndustryId = localStorage.getItem("subIndustryId");
         if (!subIndustryId)
             subIndustryId = "";
+        // collectionId = "1ef5b924-66ad-68f5-b931-2bd654300b1f"
         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) {
@@ -3223,8 +3224,8 @@ class StorageServiceService {
         };
         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.cartCollectionRef = this.database.createObjectStore(this.cartCollectionName, { keyPath: "varientId" });
+            this.favouriteCollectionRef = this.database.createObjectStore(this.favouriteCollectionName, { keyPath: "varientId" });
             this.userCollectionRef = this.database.createObjectStore(this.userCollectionName, { keyPath: "userId" });
         };
     }
@@ -3297,7 +3298,7 @@ class StorageServiceService {
     }
     addProductToCart(product) {
         const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
-        const response = transaction.objectStore(this.cartCollectionName).get(product.itemId);
+        const response = transaction.objectStore(this.cartCollectionName).get(product.varientId);
         response.onsuccess = (cartResponse) => {
             console.log("Cart Resppnse : ", cartResponse);
             if (cartResponse.target.result) { }
@@ -5115,9 +5116,9 @@ var BUSINESS_CONSTANTS;
 })(BUSINESS_CONSTANTS || (BUSINESS_CONSTANTS = {}));
 
 class OrderedItems {
-    constructor(json) {
+    constructor(json, varientId) {
         this.itemId = json?.["itemId"] ?? "";
-        this.variantId = json?.["variantId"] ?? "";
+        this.varientId = varientId ?? this.itemId;
         this.businessId = json?.["businessId"];
         this.itemName = json?.["name"];
         this.businessName = json?.["businessName"];
@@ -5157,20 +5158,20 @@ class CartService {
         return this.restService.addItemToDB(userWishlist);
     }
     removeItemFromWishlistPage(product, userWishlist) {
-        this.storageService.removeProductFromWishlist(product.itemId);
+        this.storageService.removeProductFromWishlist(product.varientId);
         return this.restService.addItemToDB(userWishlist);
     }
-    addItemToCart(product) {
+    addItemToCart(product, varientId) {
         if (product.quantity) {
-            const orderedItem = this.objectMapper(product);
+            const orderedItem = this.objectMapper(product, varientId);
             return this.storageService.addProductToCart(orderedItem);
         }
         else {
             return this.removeItemFromCart(product);
         }
     }
-    addItemToFavourite(product) {
-        const orderedItem = this.objectMapper(product);
+    addItemToFavourite(product, varientId) {
+        const orderedItem = this.objectMapper(product, varientId);
         this.storageService.addProductToWishlist(orderedItem);
     }
     addItemToFavFromCart(product) {
@@ -5179,39 +5180,31 @@ class CartService {
     addOrderedItemToFavourite(orderedItem) {
         this.storageService.addProductToWishlist(orderedItem);
     }
-    removeItemFromFavourite(product) {
-        this.storageService.removeProductFromWishlist(product.itemId);
+    removeItemFromFavourite(varientId) {
+        this.storageService.removeProductFromWishlist(varientId);
     }
     removeItemFromCart(product) {
-        this.storageService.removeProductFromCart(product.itemId);
+        this.storageService.removeProductFromCart(product.varientId);
     }
     getItemIdxJSON(id, type) {
         return this.storageService.getProductFromCart(id);
     }
     storeItemToDB(product, type) {
         if (type == "CART") {
-            const orderProduct = this.objectMapper(this.storageService.getProductFromCart(product.itemId));
+            const orderProduct = this.objectMapper(this.storageService.getProductFromCart(product.varientId));
             if (orderProduct) {
                 this.storageService.addProductToCart(orderProduct);
             }
         }
         else {
-            const orderProduct = this.objectMapper(this.storageService.getProductFromWishlist(product.itemId));
+            const orderProduct = this.objectMapper(this.storageService.getProductFromWishlist(product.varientId));
             if (orderProduct) {
                 this.storageService.addProductToWishlist(orderProduct);
             }
         }
     }
-    getItemByIdx(itemId, type) {
-        const productIdx = this.getItemIdxJSON(itemId, type);
-        // console.log(type, productIdx);
-        // const json = (type == "FAVOURITE") ? UserFavourites : UserCart;
-        // if (productIdx >= 0)
-        //   return json.orderedItems[productIdx];
-        return null;
-    }
-    objectMapper(product) {
-        return new OrderedItems(product);
+    objectMapper(product, variantId) {
+        return new OrderedItems(product, variantId);
     }
     storeCartDataToServer(cart) {
     }
@@ -5310,10 +5303,11 @@ class FeaturedProductsComponent extends BaseSection {
                         this.USER_CART?.forEach((item) => {
                             if (item.itemId == product.itemId) {
                                 if (product.itemVariant.length > 0) {
-                                    const itemVarient = this.getItemVarient(product, product.varientId ?? "");
-                                    if (itemVarient) {
-                                        product.itemImages = itemVarient?.variantImages ?? [];
+                                    const itemVarient = product.itemVariant[0];
+                                    if (itemVarient.variantId == item.varientId) {
+                                        product.itemImages = itemVarient.variantImages ?? [];
                                         product.price = itemVarient.itemVariantPrice;
+                                        product.quantity = item.quantity;
                                     }
                                 }
                                 else {
@@ -5331,10 +5325,11 @@ class FeaturedProductsComponent extends BaseSection {
                         this.USER_WISHLIST?.forEach((item) => {
                             if (item.itemId == product.itemId) {
                                 if (product.itemVariant.length > 0) {
-                                    const itemVarient = this.getItemVarient(product, product.varientId ?? "");
-                                    if (itemVarient) {
+                                    const itemVarient = product.itemVariant[0];
+                                    if (itemVarient.variantId == item.varientId) {
                                         product.itemImages = itemVarient?.variantImages ?? [];
                                         product.price = itemVarient.itemVariantPrice;
+                                        product.whislist = true;
                                     }
                                 }
                                 else {
@@ -5352,18 +5347,22 @@ class FeaturedProductsComponent extends BaseSection {
             this.messageService.add({ severity: 'warn', summary: 'Cart', detail: 'Item is not available as of now. We will notify you once available' });
             return;
         }
-        if (product.itemVariant?.length > 0) {
-            this.router.navigate(['/details']);
+        if (!product?.quantity)
+            product.quantity = 0;
+        if (type == 'ADD') {
+            product.quantity += 1;
         }
         else {
-            if (!product?.quantity)
-                product.quantity = 0;
-            if (type == 'ADD') {
-                product.quantity += 1;
-            }
-            else {
-                product.quantity -= 1;
+            product.quantity -= 1;
+        }
+        if (product.itemVariant.length) {
+            const itemVarient = this.getItemVarient(product, product.varientId);
+            if (itemVarient) {
+                itemVarient.quantity = product.quantity;
+                this.cartService.addItemToCart(product, itemVarient.variantId);
             }
+        }
+        else {
             this.cartService.addItemToCart(product);
         }
     }
@@ -5371,26 +5370,32 @@ class FeaturedProductsComponent extends BaseSection {
         if (type == 'ADD') {
             product.whislist = true;
             this.messageService.add({ severity: 'success', summary: 'Wishlist', detail: 'Item added to your wishlist' });
-            this.cartService.addItemToFavourite(product);
+            if (product.itemVariant.length) {
+                const itemVarient = this.getItemVarient(product, product.varientId);
+                if (itemVarient) {
+                    itemVarient.wishlist = true;
+                    this.cartService.addItemToFavourite(product, itemVarient.variantId);
+                }
+            }
+            else {
+                this.cartService.addItemToFavourite(product);
+            }
         }
         else {
             product.whislist = false;
             this.messageService.add({ severity: 'info', summary: 'Wishlist', detail: 'Item remove from your wishlist' });
-            this.cartService.removeItemFromFavourite(product);
+            this.cartService.removeItemFromFavourite(product.varientId);
         }
         // event.preventDefault();
         event.stopPropagation();
     }
     proceedToProductDesc(product) {
-        console.log("Called");
         if (this.isRelatedProduct) {
-            console.log("Change Detected");
             this.changeDetailProduct.emit(product);
         }
         else {
-            this.router.navigate([`details`], { queryParams: { id: product.itemId } });
+            this.router.navigate([`details`], { queryParams: { id: product.itemId, varientId: product.varientId } });
         }
-        // this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
     }
     togglePreviewImage(product, idx) {
         const element = document.getElementById('preview_' + idx);
@@ -5411,13 +5416,38 @@ class FeaturedProductsComponent extends BaseSection {
         });
         return selectedVarient;
     }
+    selectVarient(product, varient) {
+        // nedd to change
+        product.varientId = varient.variantId;
+        product.itemImages = varient.variantImages;
+        product.price = varient.itemVariantPrice;
+        product.itemInventory = varient.itemInventory;
+        product.quantity = this.getVarientQuantity(varient);
+        product.whislist = this.isVarientPresentInWishtlist(varient);
+    }
     get currency() {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
+    getVarientQuantity(productVarient) {
+        let itemQuantity = 0;
+        this.USER_CART?.forEach((item) => {
+            if (productVarient.variantId == item.varientId)
+                itemQuantity = item.quantity;
+        });
+        return itemQuantity;
+    }
+    isVarientPresentInWishtlist(productVarient) {
+        let present = false;
+        this.USER_WISHLIST?.forEach((item) => {
+            if (productVarient.variantId == item.varientId)
+                present = true;
+        });
+        return present;
+    }
     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: i5$1.MatBottomSheet }, { token: StorageServiceService }, { token: i5.MessageService }], 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", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<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        <ng-container *ngIf=\"!filterLoading\">\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)\">\r\n                <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n              </div>\r\n              <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n                <div class=\"tags\">\r\n                  <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                    <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.value}}\r\n                    </div>\r\n                    <div class=\"discounted-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.discountedPrice}}\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</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                    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"action-btn\">\r\n            <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n          </div>\r\n        </ng-container>\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<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" 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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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:220px}.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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i11.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", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\">\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        <ng-container *ngIf=\"!filterLoading\">\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)\">\r\n                <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n              </div>\r\n              <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n                <div class=\"tags\">\r\n                  <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n                <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n                  <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n                    <img [src]=\"varient.variantImages[0].imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                    <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.value}}\r\n                    </div>\r\n                    <div class=\"discounted-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.discountedPrice}}\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</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                    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"action-btn\">\r\n            <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n          </div>\r\n        </ng-container>\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<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" 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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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:220px}.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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i11.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: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+                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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
             type: Component,
@@ -5439,7 +5469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         ButtonDirectiveDirective,
                         ToastModule
-                    ], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<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        <ng-container *ngIf=\"!filterLoading\">\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)\">\r\n                <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n              </div>\r\n              <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n                <div class=\"tags\">\r\n                  <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                    <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.value}}\r\n                    </div>\r\n                    <div class=\"discounted-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.discountedPrice}}\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</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                    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"action-btn\">\r\n            <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n          </div>\r\n        </ng-container>\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<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" 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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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:220px}.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"] }]
+                    ], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\">\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        <ng-container *ngIf=\"!filterLoading\">\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)\">\r\n                <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n              </div>\r\n              <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n                <div class=\"tags\">\r\n                  <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n                <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n                  <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n                    <img [src]=\"varient.variantImages[0].imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n                  </ng-container>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                    <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.value}}\r\n                    </div>\r\n                    <div class=\"discounted-price\">\r\n                      <span [innerHTML]='currency'></span>\r\n                      {{product.price.discountedPrice}}\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                    <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                      [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</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                    <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"action-btn\">\r\n            <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n          </div>\r\n        </ng-container>\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<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" 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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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:220px}.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]
@@ -5586,6 +5616,7 @@ class ProductDescComponent extends BaseSection {
                     this.isLoading = false;
                     this.responseData = response[0];
                     this.responseData.itemVariant.forEach((varient, idx) => {
+                        varient.quantity = 0;
                         Object.keys(varient.properties).forEach((varientKey) => {
                             if (idx == 0)
                                 this.selectedVarient.set(varientKey, varient.properties[varientKey]);
@@ -5593,6 +5624,10 @@ class ProductDescComponent extends BaseSection {
                                 this.varients.set(varientKey, [...(this.varients.get(varientKey) ?? []), varient.properties[varientKey]]);
                         });
                     });
+                    const itemVariant = this.getItemVarient();
+                    if (itemVariant) {
+                        this.responseData.itemImages = itemVariant.variantImages;
+                    }
                     console.log("Description", this.responseData?.name, this.responseData?.descriptor?.name);
                     this.titleService.setTitle(this.responseData?.name);
                     this.metaTagService.updateTag({ name: 'description', content: this.responseData?.descriptor?.name });
@@ -5603,8 +5638,18 @@ class ProductDescComponent extends BaseSection {
                             cartResponse.onsuccess = (cartData) => {
                                 this.USER_CART = cartData.target.result;
                                 this.USER_CART?.forEach((item) => {
-                                    if (item.itemId == productId)
-                                        this.responseData.quantity = item.quantity;
+                                    if (item.itemId == productId) {
+                                        if (this.responseData.itemVariant.length > 0) {
+                                            const itemVariant = this.getItemVarient();
+                                            if (itemVariant && item.varientId == itemVariant.variantId) {
+                                                itemVariant.quantity = item.quantity;
+                                                this.responseData.quantity = item.quantity;
+                                            }
+                                        }
+                                        else {
+                                            this.responseData.quantity = item.quantity;
+                                        }
+                                    }
                                 });
                             };
                         });
@@ -5612,8 +5657,18 @@ class ProductDescComponent extends BaseSection {
                             wishlistResponse.onsuccess = (whislistData) => {
                                 this.USER_WISHLIST = whislistData.target.result;
                                 this.USER_WISHLIST?.forEach((item) => {
-                                    if (item.itemId == productId)
-                                        this.isItemAsFavorite = true;
+                                    if (item.itemId == productId) {
+                                        if (this.responseData.itemVariant.length > 0) {
+                                            const itemVariant = this.getItemVarient();
+                                            if (itemVariant && itemVariant.variantId == item.varientId) {
+                                                itemVariant.wishlist = true;
+                                                this.isItemAsFavorite = true;
+                                            }
+                                        }
+                                        else {
+                                            this.isItemAsFavorite = true;
+                                        }
+                                    }
                                 });
                             };
                         });
@@ -5628,27 +5683,30 @@ class ProductDescComponent extends BaseSection {
     selectVarient(key, value) {
         this.selectedVarient.set(key, value);
         this.responseData.itemVariant.forEach((varient) => {
-            let foundVarient = false;
+            let foundVarient = true;
             Object.keys(varient.properties).forEach((property) => {
-                foundVarient = (this.selectedVarient.get(property) == varient.properties[property]);
+                foundVarient = (this.selectedVarient.get(property) == varient.properties[property]) && foundVarient;
+                console.log(this.selectedVarient.get(property), varient.properties[property]);
             });
+            console.log(foundVarient);
             if (foundVarient) {
                 this.itemImages = varient.variantImages;
                 this.currentImg = this.itemImages[0]?.imgUrl;
                 this.responseData.price.value = varient.itemVariantPrice.value;
                 this.responseData.price.discountedPrice = varient.itemVariantPrice.discountedPrice;
                 this.responseData.price.sellingPrice = varient.itemVariantPrice.sellingPrice;
-                this.responseData.quantity = varient.quantity;
-                this.isItemAsFavorite = varient.wishlist;
+                this.responseData.itemInventory = varient.itemInventory;
+                this.responseData.quantity = this.getVarientQuantity(varient);
+                this.isItemAsFavorite = this.isVarientPresentInWishtlist(varient);
             }
         });
     }
     getItemVarient() {
         let selectedVarient = null;
         this.responseData.itemVariant?.forEach((varient) => {
-            let foundVarient = false;
+            let foundVarient = true;
             Object.keys(varient.properties).forEach((property) => {
-                foundVarient = (this.selectedVarient.get(property) == varient.properties[property]);
+                foundVarient = (this.selectedVarient.get(property) == varient.properties[property]) && foundVarient;
             });
             if (foundVarient)
                 selectedVarient = varient;
@@ -5683,6 +5741,12 @@ class ProductDescComponent extends BaseSection {
             return;
         }
         if (this.responseData.itemVariant?.length > 0) {
+            const itemVarient = this.getItemVarient();
+            if (itemVarient) {
+                itemVarient.quantity = itemVarient.quantity + 1;
+                this.responseData.quantity = itemVarient.quantity;
+            }
+            this.cartService.addItemToCart(this.responseData, itemVarient?.variantId);
         }
         else {
             if (!this.responseData?.quantity)
@@ -5693,8 +5757,8 @@ class ProductDescComponent extends BaseSection {
             else {
                 this.responseData.quantity -= 1;
             }
+            this.cartService.addItemToCart(this.responseData);
         }
-        this.cartService.addItemToCart(this.responseData);
     }
     goToFilter(category) {
         category = category.replaceAll(" ", "_");
@@ -5703,12 +5767,30 @@ class ProductDescComponent extends BaseSection {
     addToFavourite() {
         this.isItemAsFavorite = true;
         this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Item added to your wishlist', key: 'wishlist' });
-        this.cartService.addItemToFavourite(this.responseData);
+        if (this.responseData.itemVariant?.length > 0) {
+            const itemVarient = this.getItemVarient();
+            if (itemVarient) {
+                itemVarient.wishlist = true;
+                this.cartService.addItemToFavourite(this.responseData, itemVarient.variantId);
+            }
+        }
+        else {
+            this.cartService.addItemToFavourite(this.responseData);
+        }
     }
     removeToFavourite() {
         this.isItemAsFavorite = false;
         this.messageService.add({ severity: 'info', summary: 'Success', detail: 'Item removed from your wishlist', key: 'wishlist' });
-        this.cartService.removeItemFromFavourite(this.responseData);
+        if (this.responseData.itemVariant?.length > 0) {
+            const itemVarient = this.getItemVarient();
+            if (itemVarient) {
+                itemVarient.wishlist = false;
+                this.cartService.removeItemFromFavourite(this.responseData.varientId);
+            }
+        }
+        else {
+            this.cartService.removeItemFromFavourite(this.responseData.varientId);
+        }
     }
     getProductByCategory() {
         this.restService.getProductByCategoryId(this.responseData?.itemCategorisation?.itemCategories?.[0]?.refId ?? "").subscribe((response) => {
@@ -5730,6 +5812,22 @@ class ProductDescComponent extends BaseSection {
     getKeyByIdx(property, index) {
         return Object.keys(property)[index];
     }
+    getVarientQuantity(productVarient) {
+        let itemQuantity = 0;
+        this.USER_CART?.forEach((item) => {
+            if (productVarient.variantId == item.varientId)
+                itemQuantity = item.quantity;
+        });
+        return itemQuantity;
+    }
+    isVarientPresentInWishtlist(productVarient) {
+        let present = false;
+        this.USER_WISHLIST?.forEach((item) => {
+            if (productVarient.variantId == item.varientId)
+                present = true;
+        });
+        return present;
+    }
     get isItemOutOfStock() {
         return this.responseData.itemInventory.openingStock == 0;
     }
@@ -5974,12 +6072,21 @@ class ProductListComponent extends BaseSection {
         if (type == 'ADD') {
             product.whislist = true;
             this.messageService.add({ severity: 'success', summary: 'Wishlist', detail: 'Item added to your wishlist' });
-            this.cartService.addItemToFavourite(product);
+            if (product.itemVariant.length) {
+                const itemVarient = this.getItemVarient(product, product.varientId);
+                if (itemVarient) {
+                    itemVarient.wishlist = true;
+                    this.cartService.addItemToFavourite(product, itemVarient.variantId);
+                }
+            }
+            else {
+                this.cartService.addItemToFavourite(product);
+            }
         }
         else {
             product.whislist = false;
             this.messageService.add({ severity: 'info', summary: 'Wishlist', detail: 'Item removed from your wishlist' });
-            this.cartService.removeItemFromFavourite(product);
+            this.cartService.removeItemFromFavourite(product.varientId);
         }
         event.stopPropagation();
     }
@@ -5990,7 +6097,6 @@ class ProductListComponent extends BaseSection {
         }
         product.quantity += (type == 'ADD' ? 1 : -1);
         this.cartService.addItemToCart(product);
-        // event.stopPropagation();
     }
     searchProduct() {
         this.navigateFilter(this.sortBy ?? "lowestPrice");
@@ -6035,8 +6141,19 @@ class ProductListComponent extends BaseSection {
                     this.USER_CART = cartData.target.result;
                     this.responseData?.forEach((product) => {
                         this.USER_CART?.forEach((item) => {
-                            if (item.itemId == product.itemId)
-                                product.quantity = item.quantity;
+                            if (item.itemId == product.itemId) {
+                                if (product.itemVariant.length > 0) {
+                                    const itemVarient = product.itemVariant[0];
+                                    if (itemVarient.variantId == item.varientId) {
+                                        product.itemImages = itemVarient.variantImages ?? [];
+                                        product.price = itemVarient.itemVariantPrice;
+                                        product.quantity = item.quantity;
+                                    }
+                                }
+                                else {
+                                    product.quantity = item.quantity;
+                                }
+                            }
                         });
                     });
                 };
@@ -6046,8 +6163,19 @@ class ProductListComponent extends BaseSection {
                     this.USER_WISHLIST = whislistData.target.result;
                     this.responseData?.forEach((product) => {
                         this.USER_WISHLIST?.forEach((item) => {
-                            if (item.itemId == product.itemId)
-                                product.wishlist = true;
+                            if (item.itemId == product.itemId) {
+                                if (product.itemVariant.length > 0) {
+                                    const itemVarient = product.itemVariant[0];
+                                    if (itemVarient.variantId == item.varientId) {
+                                        product.itemImages = itemVarient?.variantImages ?? [];
+                                        product.price = itemVarient.itemVariantPrice;
+                                        product.whislist = true;
+                                    }
+                                }
+                                else {
+                                    product.whislist = true;
+                                }
+                            }
                         });
                     });
                 };
@@ -6077,6 +6205,14 @@ class ProductListComponent extends BaseSection {
     isItemOutOfStock(product) {
         return product.itemInventory.openingStock == 0;
     }
+    getItemVarient(product, varientId) {
+        let selectedVarient = null;
+        product.itemVariant?.forEach((varient) => {
+            if (varient.variantId == varientId)
+                selectedVarient = varient;
+        });
+        return selectedVarient;
+    }
     get isMobile() {
         return window.innerWidth < 475;
     }
@@ -7536,7 +7672,7 @@ class Product {
     constructor(json) {
         this.itemId = json?.["itemId"];
         this.storeId = json?.["storeId"];
-        this.varientId = json?.["varientId"];
+        this.varientId = json?.["itemId"];
         this.name = json?.["name"];
         this.itemCategorisation = json?.["itemCategorisation"];
         this.itemInventory = json?.["itemInventory"];
@@ -7558,6 +7694,12 @@ class Product {
         this.prviewIdx = 0;
         this.quantity = json?.["quantity"] ?? 0;
         this.whislist = false;
+        if (this.itemVariant.length > 0) {
+            this.itemImages = this.itemVariant[0].variantImages;
+            this.price = this.itemVariant[0].itemVariantPrice;
+            this.varientId = this.itemVariant[0].variantId;
+            this.itemInventory = this.itemVariant[0].itemInventory;
+        }
     }
 }