simpo-component-library 1.6.54 → 1.6.56

package/fesm2022/simpo-component-library.mjs

@@ -17,10 +17,10 @@ import * as i13$1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i7 from 'primeng/api';
 import { MessageService } from 'primeng/api';
-import { forkJoin, map } from 'rxjs';
+import { map, forkJoin } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
-import * as i2$2 from 'ngx-cookie-service';
 import * as i2$3 from '@angular/router';
+import * as i2$2 from 'ngx-cookie-service';
 import Swal from 'sweetalert2';
 import * as i5 from '@angular/material/bottom-sheet';
 import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
@@ -1226,7 +1226,7 @@ class CardSkeletonLoaderComponent {
         this.showTitles = false;
     }
     getScreenSize() {
-        this.count = 2;
+        this.count = window.innerWidth > 475 ? this.count : 2;
     }
     ngOnInit() {
         this.getScreenSize();
@@ -3157,6 +3157,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 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 = "";
+        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}&isEndUser=true`).pipe(map((response) => response.data?.map((product) => new Product(product))));
+    }
+    getCategoriesByCollectionId(collectionId) {
+        return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
+    }
+    getProductDetails(productId = null) {
+        const payload = {
+            pageNo: 0,
+            pageSize: 1,
+            itemId: productId,
+            subIndustryId: localStorage.getItem("subIndustryId"),
+            userId: localStorage.getItem("perId") ?? null,
+            request: "USER"
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
+    }
+    getCollectionByIds(collectionIds) {
+        const payload = {
+            ids: collectionIds
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/inventory/collection/list/all`, payload).pipe(map((response) => response.data?.map((collection) => new Collection(collection))));
+    }
+    getAllCategories() {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
+        const subIndustryId = localStorage.getItem("subIndustryId") ?? "";
+        return this.http.get(this.BASE_URL + `ecommerce/inventory/featured?businessId=${businessId}&subId=${subIndustryId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
+    }
+    getAllCollections() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            request: "USER",
+            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"),
+            "subIndustryId": localStorage.getItem("subIndustryId"),
+            "collectionId": collectionIds,
+            "categoryId": categoryIds,
+            "searchText": searchText,
+            "minPrice": minPrice ?? 0,
+            "maxPrice": maxPrice ?? 0,
+            "sortBy": sortBy,
+            "pageNo": pageNo,
+            "pageSize": size,
+            "userId": localStorage.getItem("perId") ?? null,
+            request: "USER"
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
+            return {
+                count: response.data.count,
+                data: response.data.data?.map((product) => new Product(product))
+            };
+        }));
+    }
+    getProductByCategoryId(categoryId) {
+        const payload = {
+            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            "categoryId": [categoryId],
+            "subIndustryId": localStorage.getItem("subIndustryId"),
+            "pageNo": 0,
+            "pageSize": 10,
+            "userId": localStorage.getItem("perId") ?? null,
+            request: "USER"
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
+            return {
+                count: response.count,
+                data: response.data.data?.map((product) => new Product(product))
+            };
+        }));
+    }
+    getProductByCollectionId(collectionId) {
+        const payload = {
+            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            "collectionId": [collectionId],
+            "subIndustryId": localStorage.getItem("subIndustryId"),
+            "pageNo": 0,
+            "pageSize": 10,
+            "userId": localStorage.getItem("perId") ?? null,
+            request: "USER"
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
+            return {
+                count: response.count,
+                data: response.data.data?.map((product) => new Product(product))
+            };
+        }));
+    }
+    addReview(payload) {
+        return this.http.post(this.BASE_URL + `ecommerce/user/add/review`, payload);
+    }
+    getAllReviews(productId) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/filter/reviews?productId=${productId}`, null);
+    }
+    generateOTP(mobile, countryCode) {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
+        return this.http.post(this.BASE_URL + `ecommerce/user/otp/trigger?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
+    }
+    verifyOTP(mobile, otp, deviceInfo) {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
+        return this.http.put(this.BASE_URL + `ecommerce/user/authenticate?mobile=${mobile}&otp=${otp}&businessId=${businessId}`, deviceInfo);
+    }
+    resendOTP(mobile, countryCode) {
+        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
+        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);
+    }
+    getUserOrders(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/order/user/order`, payload);
+    }
+    toggleItemCartToFav() {
+    }
+    moveWishlistToCart() {
+        return this.http.get(this.BASE_URL + `ecommerce/update/cart`);
+    }
+    getUserWishlist(userId) {
+        return this.http.get(this.BASE_URL + `ecommerce/order/cart?userId=${userId}&cartType=WISHLIST`);
+    }
+    moveItemToCart(userId, payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/order/update/cart?userId=${userId}`, payload);
+    }
+    // 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;
@@ -3357,7 +3542,9 @@ class StorageServiceService {
     }
     getUser() {
         try {
-            return JSON.parse(this.cookieService.get("user"));
+            const user = JSON.parse(this.cookieService.get("user"));
+            localStorage.setItem("perId", user?.userId);
+            return user;
         }
         catch (exception) { }
         return null;
@@ -3376,196 +3563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.CookieService }, { type: RestService }] });
 
-class RestService {
-    constructor(http, eventService, storageService) {
-        this.http = http;
-        this.eventService = eventService;
-        this.storageService = storageService;
-        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 = "";
-        // collectionId = "1ef5b924-66ad-68f5-b931-2bd654300b1f"
-        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}&isEndUser=true`).pipe(map((response) => response.data?.map((product) => new Product(product))));
-    }
-    // getCollectionById(collectionId: string) {
-    //     return this.http.get(this.BASE_URL + `product/category/id?categoryId=1ef6944e-8483-6fc5-92d7-5bc8a38cc5b1`)
-    // }
-    getCategoriesByCollectionId(collectionId) {
-        return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
-    }
-    getProductDetails(productId = null) {
-        const payload = {
-            pageNo: 0,
-            pageSize: 1,
-            itemId: productId,
-            subIndustryId: localStorage.getItem("subIndustryId"),
-            userId: this.storageService.getUser()?.userId ?? null,
-            request: "USER"
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
-    }
-    getCollectionByIds(collectionIds) {
-        const payload = {
-            ids: collectionIds
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/inventory/collection/list/all`, payload).pipe(map((response) => response.data?.map((collection) => new Collection(collection))));
-    }
-    getAllCategories() {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
-        const subIndustryId = localStorage.getItem("subIndustryId") ?? "";
-        return this.http.get(this.BASE_URL + `ecommerce/inventory/featured?businessId=${businessId}&subId=${subIndustryId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
-    }
-    getAllCollections() {
-        const payload = {
-            pageNo: 0,
-            pageSize: 10,
-            request: "USER",
-            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"),
-            "subIndustryId": localStorage.getItem("subIndustryId"),
-            "collectionId": collectionIds,
-            "categoryId": categoryIds,
-            "searchText": searchText,
-            "minPrice": minPrice ?? 0,
-            "maxPrice": maxPrice ?? 0,
-            "sortBy": sortBy,
-            "pageNo": pageNo,
-            "pageSize": size,
-            "userId": this.storageService.getUser()?.userId ?? null,
-            request: "USER"
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
-            return {
-                count: response.data.count,
-                data: response.data.data?.map((product) => new Product(product))
-            };
-        }));
-    }
-    getProductByCategoryId(categoryId) {
-        const payload = {
-            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
-            "categoryId": [categoryId],
-            "subIndustryId": localStorage.getItem("subIndustryId"),
-            "pageNo": 0,
-            "pageSize": 10,
-            "userId": this.storageService.getUser()?.userId ?? null,
-            request: "USER"
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
-            return {
-                count: response.count,
-                data: response.data.data?.map((product) => new Product(product))
-            };
-        }));
-    }
-    getProductByCollectionId(collectionId) {
-        const payload = {
-            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
-            "collectionId": [collectionId],
-            "subIndustryId": localStorage.getItem("subIndustryId"),
-            "pageNo": 0,
-            "pageSize": 10,
-            "userId": this.storageService.getUser()?.userId ?? null,
-            request: "USER"
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
-            return {
-                count: response.count,
-                data: response.data.data?.map((product) => new Product(product))
-            };
-        }));
-    }
-    addReview(payload) {
-        return this.http.post(this.BASE_URL + `ecommerce/user/add/review`, payload);
-    }
-    getAllReviews(productId) {
-        return this.http.put(this.BASE_URL + `ecommerce/user/filter/reviews?productId=${productId}`, null);
-    }
-    generateOTP(mobile, countryCode) {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
-        return this.http.post(this.BASE_URL + `ecommerce/user/otp/trigger?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
-    }
-    verifyOTP(mobile, otp, deviceInfo) {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
-        return this.http.put(this.BASE_URL + `ecommerce/user/authenticate?mobile=${mobile}&otp=${otp}&businessId=${businessId}`, deviceInfo);
-    }
-    resendOTP(mobile, countryCode) {
-        const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
-        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);
-    }
-    getUserOrders(payload) {
-        return this.http.put(this.BASE_URL + `ecommerce/order/user/order`, payload);
-    }
-    toggleItemCartToFav() {
-    }
-    moveWishlistToCart() {
-        return this.http.get(this.BASE_URL + `ecommerce/update/cart`);
-    }
-    getUserWishlist(userId) {
-        return this.http.get(this.BASE_URL + `ecommerce/order/cart?userId=${userId}&cartType=WISHLIST`);
-    }
-    moveItemToCart(userId, payload) {
-        return this.http.put(this.BASE_URL + `ecommerce/order/update/cart?userId=${userId}`, payload);
-    }
-    // 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 }, { token: StorageServiceService }], 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 }, { type: StorageServiceService }] });
-
 class UserBasicInfoComponent {
     constructor(restService, router, dialogRef, storageService, messageService) {
         this.restService = restService;
@@ -8734,14 +8731,24 @@ class ProductCategoryListComponent extends BaseSection {
         });
     }
     selectCategory(category) {
+        this.apiLoading = true;
         this.restService.getProductByCategoryId(category.categoryId).subscribe((response) => {
-            this.productListContainer?.nativeElement?.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+            this.scrollElementToTop();
+            this.apiLoading = false;
             this.productList = response.data;
-            document.body.scrollTop = 0;
-            document.documentElement.scrollTop = 0;
             this.selectedCategory = category;
         });
     }
+    scrollElementToTop() {
+        if (this.productListContainer?.nativeElement)
+            this.productListContainer.nativeElement.scrollTop = 0;
+        if (this.productCategoryListSection?.nativeElement) {
+            this.productCategoryListSection.nativeElement.scrollIntoView({ behavior: 'smooth' });
+            // setTimeout(()=> {
+            //   window.scrollBy(0, -100);
+            // }, 200);
+        }
+    }
     addItemToCart(product, type) {
         // if (this.isItemOutOfStock(product)) {
         //   this.messageService.add({ severity: 'warn', summary: 'Cart', detail: 'Item is not available as of now. We will notify you once available' });
@@ -8815,7 +8822,7 @@ class ProductCategoryListComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, viewQueries: [{ propertyName: "productListContainer", first: true, predicate: ["productListContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\" #productListContainer>\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\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", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!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.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, viewQueries: [{ propertyName: "productListContainer", first: true, predicate: ["productListContainer"], descendants: true }, { propertyName: "productCategoryListSection", first: true, predicate: ["productCategoryList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\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", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!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.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
             type: Component,
@@ -8833,7 +8840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SmallProductListingComponent,
                         ContentTitleDirective,
                         CardSkeletonLoaderComponent
-                    ], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\" #productListContainer>\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\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", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
+                    ], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\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", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -8849,6 +8856,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }], productListContainer: [{
                 type: ViewChild,
                 args: ["productListContainer"]
+            }], productCategoryListSection: [{
+                type: ViewChild,
+                args: ["productCategoryList"]
             }] } });
 
 class CategoryProductComponent extends BaseSection {