simpo-component-library 3.6.168 → 3.6.169

package/esm2022/lib/services/cart.service.mjs

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { OrderedItems } from '../ecommerce/styles/OrderedItems.modal';
 import { syncItemToServerDBRequest } from '../ecommerce/styles/product.modal';
+import { firstValueFrom } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "./storage.service";
 import * as i2 from "./rest.service";
@@ -46,15 +47,40 @@ export class CartService {
         const orderedItem = this.objectMapper(product, varientId);
         this.storageService.addProductToWishlist(orderedItem);
     }
-    addItemToTrial(product, varientId) {
+    async addItemToTrial(product, varientId) {
         const orderedItem = this.objectMapper(product, varientId);
-        let user = this.storageService.getUser();
+        const user = this.storageService.getUser();
         if (user) {
-            let request = new syncItemToServerDBRequest(user.userId, 'TRIAL_CART', [orderedItem]);
-            this.restService.addTrialItem(request).subscribe();
+            const request = new syncItemToServerDBRequest(user.userId, 'TRIAL_CART', [orderedItem]);
+            try {
+                await firstValueFrom(this.restService.addTrialItem(request));
+                return true;
+            }
+            catch (error) {
+                console.error('Error adding trial item to server:', error);
+                return false;
+            }
+        }
+        else {
+            try {
+                const dbRequest = await this.storageService.getTrialCart();
+                const trialCartItem = await new Promise((resolve, reject) => {
+                    dbRequest.onsuccess = (event) => resolve(event.target.result);
+                    dbRequest.onerror = (event) => reject(event.target.error);
+                });
+                const isItemAlreadyAdded = trialCartItem.some((item) => item.itemId === product.itemId &&
+                    (product?.itemVariant?.length === 0 || product.varientId === item.varientId));
+                if (!isItemAlreadyAdded) {
+                    await this.storageService.addProductToTrial(orderedItem);
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                console.error('Error accessing trial cart from local storage:', error);
+                return false;
+            }
         }
-        else
-            this.storageService.addProductToTrial(orderedItem);
     }
     addItemToFavFromCart(product) {
         this.storageService.addProductToWishlist(product);
@@ -80,4 +106,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.StorageServiceService }, { type: i2.RestService }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FydC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9zZXJ2aWNlcy9jYXJ0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixVQUFVLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQ3RFLE9BQU8sRUFBVyx5QkFBeUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7O0FBU3ZGLE1BQU0sT0FBTyxXQUFXO0lBQ3RCLFlBQ21CLGNBQXFDLEVBQ3JDLFdBQXdCO1FBRHhCLG1CQUFjLEdBQWQsY0FBYyxDQUF1QjtRQUNyQyxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtJQUUzQyxDQUFDO0lBR00sbUJBQW1CLENBQUMsT0FBcUIsRUFBRSxRQUFhO1FBQzdELElBQUksT0FBTyxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ3JCLCtCQUErQjtZQUMvQiw4REFBOEQ7WUFDOUQsdUNBQXVDO1lBQ3ZDLHdCQUF3QjtZQUN4QixNQUFNO1lBQ04sSUFBSSxDQUFDLGNBQWMsQ0FBQyxnQkFBZ0IsQ0FBQyxPQUF1QixDQUFDLENBQUM7WUFDOUQsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNoRCxDQUFDO2FBQU0sQ0FBQztZQUNOLHdCQUF3QjtZQUN4QixJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDakMsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUNoRCxDQUFDO0lBQ0gsQ0FBQztJQUNNLHVCQUF1QixDQUFDLE9BQXFCLEVBQUUsWUFBaUI7UUFDckUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNsRCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFDTSwwQkFBMEIsQ0FBQyxPQUFxQixFQUFFLFlBQWlCO1FBQ3hFLElBQUksQ0FBQyxjQUFjLENBQUMseUJBQXlCLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVNLGFBQWEsQ0FBQyxPQUErQixFQUFFLFNBQWtCO1FBRXRFLElBQUksT0FBTyxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBRXJCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBa0IsRUFBRSxTQUFTLENBQUMsQ0FBQztZQUNyRSxPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLENBQUMsV0FBMkIsQ0FBQyxDQUFDO1FBQzNFLENBQUM7YUFBTSxDQUFDO1lBQ04sT0FBTyxJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBa0IsQ0FBQyxDQUFDO1FBQ3JELENBQUM7SUFDSCxDQUFDO0lBQ00sa0JBQWtCLENBQUMsT0FBZ0IsRUFBRSxTQUFrQjtRQUU1RCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsY0FBYyxDQUFDLG9CQUFvQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFDTSxjQUFjLENBQUMsT0FBZ0IsRUFBRSxTQUFrQjtRQUV4RCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQztRQUUxRCxJQUFJLElBQUksR0FBZ0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLEVBQUUsQ0FBQTtRQUNyRCxJQUFHLElBQUksRUFBRSxDQUFDO1lBQ1IsSUFBSSxPQUFPLEdBQUcsSUFBSSx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLFlBQVksRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUE7WUFDckYsSUFBSSxDQUFDLFdBQVcsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDckQsQ0FBQzs7WUFDQyxJQUFJLENBQUMsY0FBYyxDQUFDLGlCQUFpQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7SUFDTSxvQkFBb0IsQ0FBQyxPQUFxQjtRQUMvQyxJQUFJLENBQUMsY0FBYyxDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFDTSx5QkFBeUIsQ0FBQyxXQUF5QjtRQUN4RCxJQUFJLENBQUMsY0FBYyxDQUFDLG9CQUFvQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFDTSx1QkFBdUIsQ0FBQyxTQUFpQjtRQUM5QyxJQUFJLENBQUMsY0FBYyxDQUFDLHlCQUF5QixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzNELENBQUM7SUFDTSxrQkFBa0IsQ0FBQyxPQUErQjtRQUNyRCxJQUFJLENBQUMsY0FBYyxDQUFDLHFCQUFxQixDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBQ08sWUFBWSxDQUFDLE9BQWdCLEVBQUUsU0FBa0I7UUFDdkQsT0FBTyxJQUFJLFlBQVksQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFDLENBQUM7SUFDOUMsQ0FBQzsrR0F4RVUsV0FBVzttSEFBWCxXQUFXLGNBRlYsTUFBTTs7NEZBRVAsV0FBVztrQkFIdkIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFdmVudEVtaXR0ZXIsIEluamVjdGFibGUsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPcmRlcmVkSXRlbXMgfSBmcm9tICcuLi9lY29tbWVyY2Uvc3R5bGVzL09yZGVyZWRJdGVtcy5tb2RhbCc7XHJcbmltcG9ydCB7IFByb2R1Y3QsIHN5bmNJdGVtVG9TZXJ2ZXJEQlJlcXVlc3QgfSBmcm9tICcuLi9lY29tbWVyY2Uvc3R5bGVzL3Byb2R1Y3QubW9kYWwnO1xyXG5pbXBvcnQgeyBSZXN0U2VydmljZSB9IGZyb20gJy4vcmVzdC5zZXJ2aWNlJztcclxuaW1wb3J0IHsgU3RvcmFnZVNlcnZpY2VTZXJ2aWNlIH0gZnJvbSAnLi9zdG9yYWdlLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBDYXJ0IH0gZnJvbSAnLi4vZWNvbW1lcmNlL3N0eWxlcy9jYXJ0Lm1vZGFsJztcclxuaW1wb3J0IHsgVXNlciB9IGZyb20gJ0BzaW1wby11aS9lY29tbWVyY2Uvc3R5bGVzL3VzZXIubW9kYWwnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIENhcnRTZXJ2aWNlIHtcclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgcmVhZG9ubHkgc3RvcmFnZVNlcnZpY2U6IFN0b3JhZ2VTZXJ2aWNlU2VydmljZSxcclxuICAgIHByaXZhdGUgcmVhZG9ubHkgcmVzdFNlcnZpY2U6IFJlc3RTZXJ2aWNlXHJcbiAgKSB7XHJcbiAgfVxyXG5cclxuXHJcbiAgcHVibGljIGFkZEl0ZW1Gcm9tQ2FydFBhZ2UocHJvZHVjdDogT3JkZXJlZEl0ZW1zLCB1c2VyQ2FydDogYW55KSB7XHJcbiAgICBpZiAocHJvZHVjdC5xdWFudGl0eSkge1xyXG4gICAgICAvLyBsZXQgcHJvZHVjdElkeDogbnVtYmVyID0gLTE7XHJcbiAgICAgIC8vIFVzZXJDYXJ0Lm9yZGVyZWRJdGVtcy5mb3JFYWNoKChpdGVtOiBPcmRlcmVkSXRlbXMsIGlkeCk9PiB7XHJcbiAgICAgIC8vICAgaWYgKGl0ZW0uaXRlbUlkID09IHByb2R1Y3QuaXRlbUlkKVxyXG4gICAgICAvLyAgICAgcHJvZHVjdElkeCA9IGlkeDtcclxuICAgICAgLy8gfSk7XHJcbiAgICAgIHRoaXMuc3RvcmFnZVNlcnZpY2UuYWRkUHJvZHVjdFRvQ2FydChwcm9kdWN0IGFzIE9yZGVyZWRJdGVtcyk7XHJcbiAgICAgIHJldHVybiB0aGlzLnJlc3RTZXJ2aWNlLmFkZEl0ZW1Ub0RCKHVzZXJDYXJ0KTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIC8vIHJlbW92ZSBpdGVtIGZyb20gY2FydFxyXG4gICAgICB0aGlzLnJlbW92ZUl0ZW1Gcm9tQ2FydChwcm9kdWN0KTtcclxuICAgICAgcmV0dXJuIHRoaXMucmVzdFNlcnZpY2UuYWRkSXRlbVRvREIodXNlckNhcnQpO1xyXG4gICAgfVxyXG4gIH1cclxuICBwdWJsaWMgYWRkSXRlbUZyb21XaXNobGlzdFBhZ2UocHJvZHVjdDogT3JkZXJlZEl0ZW1zLCB1c2VyV2lzaGxpc3Q6IGFueSkge1xyXG4gICAgdGhpcy5zdG9yYWdlU2VydmljZS5hZGRQcm9kdWN0VG9XaXNobGlzdChwcm9kdWN0KTtcclxuICAgIHJldHVybiB0aGlzLnJlc3RTZXJ2aWNlLmFkZEl0ZW1Ub0RCKHVzZXJXaXNobGlzdCk7XHJcbiAgfVxyXG4gIHB1YmxpYyByZW1vdmVJdGVtRnJvbVdpc2hsaXN0UGFnZShwcm9kdWN0OiBPcmRlcmVkSXRlbXMsIHVzZXJXaXNobGlzdDogYW55KSB7XHJcbiAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLnJlbW92ZVByb2R1Y3RGcm9tV2lzaGxpc3QocHJvZHVjdC52YXJpZW50SWQpO1xyXG4gICAgcmV0dXJuIHRoaXMucmVzdFNlcnZpY2UuYWRkSXRlbVRvREIodXNlcldpc2hsaXN0KTtcclxuICB9XHJcblxyXG4gIHB1YmxpYyBhZGRJdGVtVG9DYXJ0KHByb2R1Y3Q6IFByb2R1Y3QgfCBPcmRlcmVkSXRlbXMsIHZhcmllbnRJZD86IHN0cmluZykge1xyXG5cclxuICAgIGlmIChwcm9kdWN0LnF1YW50aXR5KSB7XHJcblxyXG4gICAgICBjb25zdCBvcmRlcmVkSXRlbSA9IHRoaXMub2JqZWN0TWFwcGVyKHByb2R1Y3QgYXMgUHJvZHVjdCwgdmFyaWVudElkKTtcclxuICAgICAgcmV0dXJuIHRoaXMuc3RvcmFnZVNlcnZpY2UuYWRkUHJvZHVjdFRvQ2FydChvcmRlcmVkSXRlbSBhcyBPcmRlcmVkSXRlbXMpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgcmV0dXJuIHRoaXMucmVtb3ZlSXRlbUZyb21DYXJ0KHByb2R1Y3QgYXMgUHJvZHVjdCk7XHJcbiAgICB9XHJcbiAgfVxyXG4gIHB1YmxpYyBhZGRJdGVtVG9GYXZvdXJpdGUocHJvZHVjdDogUHJvZHVjdCwgdmFyaWVudElkPzogc3RyaW5nKSB7XHJcblxyXG4gICAgY29uc3Qgb3JkZXJlZEl0ZW0gPSB0aGlzLm9iamVjdE1hcHBlcihwcm9kdWN0LCB2YXJpZW50SWQpO1xyXG4gICAgdGhpcy5zdG9yYWdlU2VydmljZS5hZGRQcm9kdWN0VG9XaXNobGlzdChvcmRlcmVkSXRlbSk7XHJcbiAgfVxyXG4gIHB1YmxpYyBhZGRJdGVtVG9UcmlhbChwcm9kdWN0OiBQcm9kdWN0LCB2YXJpZW50SWQ/OiBzdHJpbmcpIHtcclxuXHJcbiAgICBjb25zdCBvcmRlcmVkSXRlbSA9IHRoaXMub2JqZWN0TWFwcGVyKHByb2R1Y3QsIHZhcmllbnRJZCk7XHJcblxyXG4gICAgbGV0IHVzZXI6IFVzZXIgfCBudWxsID0gdGhpcy5zdG9yYWdlU2VydmljZS5nZXRVc2VyKClcclxuICAgIGlmKHVzZXIpIHtcclxuICAgICAgbGV0IHJlcXVlc3QgPSBuZXcgc3luY0l0ZW1Ub1NlcnZlckRCUmVxdWVzdCh1c2VyLnVzZXJJZCwgJ1RSSUFMX0NBUlQnLCBbb3JkZXJlZEl0ZW1dKVxyXG4gICAgICB0aGlzLnJlc3RTZXJ2aWNlLmFkZFRyaWFsSXRlbShyZXF1ZXN0KS5zdWJzY3JpYmUoKTtcclxuICAgIH0gZWxzZVxyXG4gICAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLmFkZFByb2R1Y3RUb1RyaWFsKG9yZGVyZWRJdGVtKTtcclxuICB9XHJcbiAgcHVibGljIGFkZEl0ZW1Ub0ZhdkZyb21DYXJ0KHByb2R1Y3Q6IE9yZGVyZWRJdGVtcykge1xyXG4gICAgdGhpcy5zdG9yYWdlU2VydmljZS5hZGRQcm9kdWN0VG9XaXNobGlzdChwcm9kdWN0KTtcclxuICB9XHJcbiAgcHVibGljIGFkZE9yZGVyZWRJdGVtVG9GYXZvdXJpdGUob3JkZXJlZEl0ZW06IE9yZGVyZWRJdGVtcykge1xyXG4gICAgdGhpcy5zdG9yYWdlU2VydmljZS5hZGRQcm9kdWN0VG9XaXNobGlzdChvcmRlcmVkSXRlbSk7XHJcbiAgfVxyXG4gIHB1YmxpYyByZW1vdmVJdGVtRnJvbUZhdm91cml0ZSh2YXJpZW50SWQ6IHN0cmluZykge1xyXG4gICAgdGhpcy5zdG9yYWdlU2VydmljZS5yZW1vdmVQcm9kdWN0RnJvbVdpc2hsaXN0KHZhcmllbnRJZCk7XHJcbiAgfVxyXG4gIHB1YmxpYyByZW1vdmVJdGVtRnJvbUNhcnQocHJvZHVjdDogUHJvZHVjdCB8IE9yZGVyZWRJdGVtcykge1xyXG4gICAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLnJlbW92ZVByb2R1Y3RGcm9tQ2FydChwcm9kdWN0LnZhcmllbnRJZCk7XHJcbiAgfVxyXG4gIHByaXZhdGUgb2JqZWN0TWFwcGVyKHByb2R1Y3Q6IFByb2R1Y3QsIHZhcmlhbnRJZD86IHN0cmluZyk6IE9yZGVyZWRJdGVtcyB7XHJcbiAgICByZXR1cm4gbmV3IE9yZGVyZWRJdGVtcyhwcm9kdWN0LCB2YXJpYW50SWQpO1xyXG4gIH1cclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FydC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9zZXJ2aWNlcy9jYXJ0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixVQUFVLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHdDQUF3QyxDQUFDO0FBQ3RFLE9BQU8sRUFBVyx5QkFBeUIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBS3ZGLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxNQUFNLENBQUM7Ozs7QUFLdEMsTUFBTSxPQUFPLFdBQVc7SUFDdEIsWUFDbUIsY0FBcUMsRUFDckMsV0FBd0I7UUFEeEIsbUJBQWMsR0FBZCxjQUFjLENBQXVCO1FBQ3JDLGdCQUFXLEdBQVgsV0FBVyxDQUFhO0lBRTNDLENBQUM7SUFHTSxtQkFBbUIsQ0FBQyxPQUFxQixFQUFFLFFBQWE7UUFDN0QsSUFBSSxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDckIsK0JBQStCO1lBQy9CLDhEQUE4RDtZQUM5RCx1Q0FBdUM7WUFDdkMsd0JBQXdCO1lBQ3hCLE1BQU07WUFDTixJQUFJLENBQUMsY0FBYyxDQUFDLGdCQUFnQixDQUFDLE9BQXVCLENBQUMsQ0FBQztZQUM5RCxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2hELENBQUM7YUFBTSxDQUFDO1lBQ04sd0JBQXdCO1lBQ3hCLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUNqQyxPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2hELENBQUM7SUFDSCxDQUFDO0lBQ00sdUJBQXVCLENBQUMsT0FBcUIsRUFBRSxZQUFpQjtRQUNyRSxJQUFJLENBQUMsY0FBYyxDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ2xELE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUNNLDBCQUEwQixDQUFDLE9BQXFCLEVBQUUsWUFBaUI7UUFDeEUsSUFBSSxDQUFDLGNBQWMsQ0FBQyx5QkFBeUIsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDakUsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBRU0sYUFBYSxDQUFDLE9BQStCLEVBQUUsU0FBa0I7UUFFdEUsSUFBSSxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUM7WUFFckIsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFrQixFQUFFLFNBQVMsQ0FBQyxDQUFDO1lBQ3JFLE9BQU8sSUFBSSxDQUFDLGNBQWMsQ0FBQyxnQkFBZ0IsQ0FBQyxXQUEyQixDQUFDLENBQUM7UUFDM0UsQ0FBQzthQUFNLENBQUM7WUFDTixPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFrQixDQUFDLENBQUM7UUFDckQsQ0FBQztJQUNILENBQUM7SUFDTSxrQkFBa0IsQ0FBQyxPQUFnQixFQUFFLFNBQWtCO1FBRTVELE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQzFELElBQUksQ0FBQyxjQUFjLENBQUMsb0JBQW9CLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVNLEtBQUssQ0FBQyxjQUFjLENBQUMsT0FBZ0IsRUFBRSxTQUFrQjtRQUM5RCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQztRQUUxRCxNQUFNLElBQUksR0FBZ0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUV4RCxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ1QsTUFBTSxPQUFPLEdBQUcsSUFBSSx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLFlBQVksRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUM7WUFFeEYsSUFBSSxDQUFDO2dCQUNILE1BQU0sY0FBYyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7Z0JBQzdELE9BQU8sSUFBSSxDQUFDO1lBQ2QsQ0FBQztZQUFDLE9BQU8sS0FBSyxFQUFFLENBQUM7Z0JBQ2YsT0FBTyxDQUFDLEtBQUssQ0FBQyxvQ0FBb0MsRUFBRSxLQUFLLENBQUMsQ0FBQztnQkFDM0QsT0FBTyxLQUFLLENBQUM7WUFDZixDQUFDO1FBRUgsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUM7Z0JBQ0gsTUFBTSxTQUFTLEdBQVEsTUFBTSxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUVoRSxNQUFNLGFBQWEsR0FBbUIsTUFBTSxJQUFJLE9BQU8sQ0FBQyxDQUFDLE9BQU8sRUFBRSxNQUFNLEVBQUUsRUFBRTtvQkFDMUUsU0FBUyxDQUFDLFNBQVMsR0FBRyxDQUFDLEtBQVUsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7b0JBQ25FLFNBQVMsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxLQUFVLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO2dCQUNqRSxDQUFDLENBQUMsQ0FBQztnQkFFSCxNQUFNLGtCQUFrQixHQUFHLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFrQixFQUFFLEVBQUUsQ0FDbkUsSUFBSSxDQUFDLE1BQU0sS0FBSyxPQUFPLENBQUMsTUFBTTtvQkFDOUIsQ0FBQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sS0FBSyxDQUFDLElBQUksT0FBTyxDQUFDLFNBQVMsS0FBSyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQzdFLENBQUM7Z0JBRUYsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7b0JBQ3hCLE1BQU0sSUFBSSxDQUFDLGNBQWMsQ0FBQyxpQkFBaUIsQ0FBQyxXQUFXLENBQUMsQ0FBQztvQkFDekQsT0FBTyxJQUFJLENBQUM7Z0JBQ2QsQ0FBQztnQkFFRCxPQUFPLEtBQUssQ0FBQztZQUVmLENBQUM7WUFBQyxPQUFPLEtBQUssRUFBRSxDQUFDO2dCQUNmLE9BQU8sQ0FBQyxLQUFLLENBQUMsZ0RBQWdELEVBQUUsS0FBSyxDQUFDLENBQUM7Z0JBQ3ZFLE9BQU8sS0FBSyxDQUFDO1lBQ2YsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBR00sb0JBQW9CLENBQUMsT0FBcUI7UUFDL0MsSUFBSSxDQUFDLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBQ00seUJBQXlCLENBQUMsV0FBeUI7UUFDeEQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBQ00sdUJBQXVCLENBQUMsU0FBaUI7UUFDOUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyx5QkFBeUIsQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBQ00sa0JBQWtCLENBQUMsT0FBK0I7UUFDdkQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxxQkFBcUIsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDL0QsQ0FBQztJQUNPLFlBQVksQ0FBQyxPQUFnQixFQUFFLFNBQWtCO1FBQ3ZELE9BQU8sSUFBSSxZQUFZLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQzlDLENBQUM7K0dBM0dVLFdBQVc7bUhBQVgsV0FBVyxjQUZWLE1BQU07OzRGQUVQLFdBQVc7a0JBSHZCLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRXZlbnRFbWl0dGVyLCBJbmplY3RhYmxlLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgT3JkZXJlZEl0ZW1zIH0gZnJvbSAnLi4vZWNvbW1lcmNlL3N0eWxlcy9PcmRlcmVkSXRlbXMubW9kYWwnO1xyXG5pbXBvcnQgeyBQcm9kdWN0LCBzeW5jSXRlbVRvU2VydmVyREJSZXF1ZXN0IH0gZnJvbSAnLi4vZWNvbW1lcmNlL3N0eWxlcy9wcm9kdWN0Lm1vZGFsJztcclxuaW1wb3J0IHsgUmVzdFNlcnZpY2UgfSBmcm9tICcuL3Jlc3Quc2VydmljZSc7XHJcbmltcG9ydCB7IFN0b3JhZ2VTZXJ2aWNlU2VydmljZSB9IGZyb20gJy4vc3RvcmFnZS5zZXJ2aWNlJztcclxuaW1wb3J0IHsgQ2FydCB9IGZyb20gJy4uL2Vjb21tZXJjZS9zdHlsZXMvY2FydC5tb2RhbCc7XHJcbmltcG9ydCB7IFVzZXIgfSBmcm9tICdAc2ltcG8tdWkvZWNvbW1lcmNlL3N0eWxlcy91c2VyLm1vZGFsJztcclxuaW1wb3J0IHsgZmlyc3RWYWx1ZUZyb20gfSBmcm9tICdyeGpzJztcclxuXHJcbkBJbmplY3RhYmxlKHtcclxuICBwcm92aWRlZEluOiAncm9vdCcsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDYXJ0U2VydmljZSB7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlYWRvbmx5IHN0b3JhZ2VTZXJ2aWNlOiBTdG9yYWdlU2VydmljZVNlcnZpY2UsXHJcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJlc3RTZXJ2aWNlOiBSZXN0U2VydmljZVxyXG4gICkge1xyXG4gIH1cclxuXHJcblxyXG4gIHB1YmxpYyBhZGRJdGVtRnJvbUNhcnRQYWdlKHByb2R1Y3Q6IE9yZGVyZWRJdGVtcywgdXNlckNhcnQ6IGFueSkge1xyXG4gICAgaWYgKHByb2R1Y3QucXVhbnRpdHkpIHtcclxuICAgICAgLy8gbGV0IHByb2R1Y3RJZHg6IG51bWJlciA9IC0xO1xyXG4gICAgICAvLyBVc2VyQ2FydC5vcmRlcmVkSXRlbXMuZm9yRWFjaCgoaXRlbTogT3JkZXJlZEl0ZW1zLCBpZHgpPT4ge1xyXG4gICAgICAvLyAgIGlmIChpdGVtLml0ZW1JZCA9PSBwcm9kdWN0Lml0ZW1JZClcclxuICAgICAgLy8gICAgIHByb2R1Y3RJZHggPSBpZHg7XHJcbiAgICAgIC8vIH0pO1xyXG4gICAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLmFkZFByb2R1Y3RUb0NhcnQocHJvZHVjdCBhcyBPcmRlcmVkSXRlbXMpO1xyXG4gICAgICByZXR1cm4gdGhpcy5yZXN0U2VydmljZS5hZGRJdGVtVG9EQih1c2VyQ2FydCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAvLyByZW1vdmUgaXRlbSBmcm9tIGNhcnRcclxuICAgICAgdGhpcy5yZW1vdmVJdGVtRnJvbUNhcnQocHJvZHVjdCk7XHJcbiAgICAgIHJldHVybiB0aGlzLnJlc3RTZXJ2aWNlLmFkZEl0ZW1Ub0RCKHVzZXJDYXJ0KTtcclxuICAgIH1cclxuICB9XHJcbiAgcHVibGljIGFkZEl0ZW1Gcm9tV2lzaGxpc3RQYWdlKHByb2R1Y3Q6IE9yZGVyZWRJdGVtcywgdXNlcldpc2hsaXN0OiBhbnkpIHtcclxuICAgIHRoaXMuc3RvcmFnZVNlcnZpY2UuYWRkUHJvZHVjdFRvV2lzaGxpc3QocHJvZHVjdCk7XHJcbiAgICByZXR1cm4gdGhpcy5yZXN0U2VydmljZS5hZGRJdGVtVG9EQih1c2VyV2lzaGxpc3QpO1xyXG4gIH1cclxuICBwdWJsaWMgcmVtb3ZlSXRlbUZyb21XaXNobGlzdFBhZ2UocHJvZHVjdDogT3JkZXJlZEl0ZW1zLCB1c2VyV2lzaGxpc3Q6IGFueSkge1xyXG4gICAgdGhpcy5zdG9yYWdlU2VydmljZS5yZW1vdmVQcm9kdWN0RnJvbVdpc2hsaXN0KHByb2R1Y3QudmFyaWVudElkKTtcclxuICAgIHJldHVybiB0aGlzLnJlc3RTZXJ2aWNlLmFkZEl0ZW1Ub0RCKHVzZXJXaXNobGlzdCk7XHJcbiAgfVxyXG5cclxuICBwdWJsaWMgYWRkSXRlbVRvQ2FydChwcm9kdWN0OiBQcm9kdWN0IHwgT3JkZXJlZEl0ZW1zLCB2YXJpZW50SWQ/OiBzdHJpbmcpIHtcclxuXHJcbiAgICBpZiAocHJvZHVjdC5xdWFudGl0eSkge1xyXG5cclxuICAgICAgY29uc3Qgb3JkZXJlZEl0ZW0gPSB0aGlzLm9iamVjdE1hcHBlcihwcm9kdWN0IGFzIFByb2R1Y3QsIHZhcmllbnRJZCk7XHJcbiAgICAgIHJldHVybiB0aGlzLnN0b3JhZ2VTZXJ2aWNlLmFkZFByb2R1Y3RUb0NhcnQob3JkZXJlZEl0ZW0gYXMgT3JkZXJlZEl0ZW1zKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLnJlbW92ZUl0ZW1Gcm9tQ2FydChwcm9kdWN0IGFzIFByb2R1Y3QpO1xyXG4gICAgfVxyXG4gIH1cclxuICBwdWJsaWMgYWRkSXRlbVRvRmF2b3VyaXRlKHByb2R1Y3Q6IFByb2R1Y3QsIHZhcmllbnRJZD86IHN0cmluZykge1xyXG5cclxuICAgIGNvbnN0IG9yZGVyZWRJdGVtID0gdGhpcy5vYmplY3RNYXBwZXIocHJvZHVjdCwgdmFyaWVudElkKTtcclxuICAgIHRoaXMuc3RvcmFnZVNlcnZpY2UuYWRkUHJvZHVjdFRvV2lzaGxpc3Qob3JkZXJlZEl0ZW0pO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGFzeW5jIGFkZEl0ZW1Ub1RyaWFsKHByb2R1Y3Q6IFByb2R1Y3QsIHZhcmllbnRJZD86IHN0cmluZyk6IFByb21pc2U8Ym9vbGVhbj4ge1xyXG4gICAgY29uc3Qgb3JkZXJlZEl0ZW0gPSB0aGlzLm9iamVjdE1hcHBlcihwcm9kdWN0LCB2YXJpZW50SWQpO1xyXG5cclxuICAgIGNvbnN0IHVzZXI6IFVzZXIgfCBudWxsID0gdGhpcy5zdG9yYWdlU2VydmljZS5nZXRVc2VyKCk7XHJcblxyXG4gICAgaWYgKHVzZXIpIHtcclxuICAgICAgY29uc3QgcmVxdWVzdCA9IG5ldyBzeW5jSXRlbVRvU2VydmVyREJSZXF1ZXN0KHVzZXIudXNlcklkLCAnVFJJQUxfQ0FSVCcsIFtvcmRlcmVkSXRlbV0pO1xyXG5cclxuICAgICAgdHJ5IHtcclxuICAgICAgICBhd2FpdCBmaXJzdFZhbHVlRnJvbSh0aGlzLnJlc3RTZXJ2aWNlLmFkZFRyaWFsSXRlbShyZXF1ZXN0KSk7XHJcbiAgICAgICAgcmV0dXJuIHRydWU7XHJcbiAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XHJcbiAgICAgICAgY29uc29sZS5lcnJvcignRXJyb3IgYWRkaW5nIHRyaWFsIGl0ZW0gdG8gc2VydmVyOicsIGVycm9yKTtcclxuICAgICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICAgIH1cclxuXHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0cnkge1xyXG4gICAgICAgIGNvbnN0IGRiUmVxdWVzdDogYW55ID0gYXdhaXQgdGhpcy5zdG9yYWdlU2VydmljZS5nZXRUcmlhbENhcnQoKTtcclxuXHJcbiAgICAgICAgY29uc3QgdHJpYWxDYXJ0SXRlbTogT3JkZXJlZEl0ZW1zW10gPSBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSwgcmVqZWN0KSA9PiB7XHJcbiAgICAgICAgICBkYlJlcXVlc3Qub25zdWNjZXNzID0gKGV2ZW50OiBhbnkpID0+IHJlc29sdmUoZXZlbnQudGFyZ2V0LnJlc3VsdCk7XHJcbiAgICAgICAgICBkYlJlcXVlc3Qub25lcnJvciA9IChldmVudDogYW55KSA9PiByZWplY3QoZXZlbnQudGFyZ2V0LmVycm9yKTtcclxuICAgICAgICB9KTtcclxuXHJcbiAgICAgICAgY29uc3QgaXNJdGVtQWxyZWFkeUFkZGVkID0gdHJpYWxDYXJ0SXRlbS5zb21lKChpdGVtOiBPcmRlcmVkSXRlbXMpID0+XHJcbiAgICAgICAgICBpdGVtLml0ZW1JZCA9PT0gcHJvZHVjdC5pdGVtSWQgJiZcclxuICAgICAgICAgIChwcm9kdWN0Py5pdGVtVmFyaWFudD8ubGVuZ3RoID09PSAwIHx8IHByb2R1Y3QudmFyaWVudElkID09PSBpdGVtLnZhcmllbnRJZClcclxuICAgICAgICApO1xyXG5cclxuICAgICAgICBpZiAoIWlzSXRlbUFscmVhZHlBZGRlZCkge1xyXG4gICAgICAgICAgYXdhaXQgdGhpcy5zdG9yYWdlU2VydmljZS5hZGRQcm9kdWN0VG9UcmlhbChvcmRlcmVkSXRlbSk7XHJcbiAgICAgICAgICByZXR1cm4gdHJ1ZTtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIHJldHVybiBmYWxzZTtcclxuXHJcbiAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XHJcbiAgICAgICAgY29uc29sZS5lcnJvcignRXJyb3IgYWNjZXNzaW5nIHRyaWFsIGNhcnQgZnJvbSBsb2NhbCBzdG9yYWdlOicsIGVycm9yKTtcclxuICAgICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICBwdWJsaWMgYWRkSXRlbVRvRmF2RnJvbUNhcnQocHJvZHVjdDogT3JkZXJlZEl0ZW1zKSB7XHJcbiAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLmFkZFByb2R1Y3RUb1dpc2hsaXN0KHByb2R1Y3QpO1xyXG4gIH1cclxuICBwdWJsaWMgYWRkT3JkZXJlZEl0ZW1Ub0Zhdm91cml0ZShvcmRlcmVkSXRlbTogT3JkZXJlZEl0ZW1zKSB7XHJcbiAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLmFkZFByb2R1Y3RUb1dpc2hsaXN0KG9yZGVyZWRJdGVtKTtcclxuICB9XHJcbiAgcHVibGljIHJlbW92ZUl0ZW1Gcm9tRmF2b3VyaXRlKHZhcmllbnRJZDogc3RyaW5nKSB7XHJcbiAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLnJlbW92ZVByb2R1Y3RGcm9tV2lzaGxpc3QodmFyaWVudElkKTtcclxuICB9XHJcbiAgcHVibGljIHJlbW92ZUl0ZW1Gcm9tQ2FydChwcm9kdWN0OiBQcm9kdWN0IHwgT3JkZXJlZEl0ZW1zKSB7XHJcbiAgICB0aGlzLnN0b3JhZ2VTZXJ2aWNlLnJlbW92ZVByb2R1Y3RGcm9tQ2FydChwcm9kdWN0LnZhcmllbnRJZCk7XHJcbiAgfVxyXG4gIHByaXZhdGUgb2JqZWN0TWFwcGVyKHByb2R1Y3Q6IFByb2R1Y3QsIHZhcmlhbnRJZD86IHN0cmluZyk6IE9yZGVyZWRJdGVtcyB7XHJcbiAgICByZXR1cm4gbmV3IE9yZGVyZWRJdGVtcyhwcm9kdWN0LCB2YXJpYW50SWQpO1xyXG4gIH1cclxufVxyXG4iXX0=

package/fesm2022/simpo-component-library.mjs

@@ -17,7 +17,7 @@ import * as i2$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { map, fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, forkJoin } from 'rxjs';
+import { map, fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, forkJoin, firstValueFrom } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i14$1 from '@angular/material/slider';
@@ -7373,15 +7373,40 @@ class CartService {
         const orderedItem = this.objectMapper(product, varientId);
         this.storageService.addProductToWishlist(orderedItem);
     }
-    addItemToTrial(product, varientId) {
+    async addItemToTrial(product, varientId) {
         const orderedItem = this.objectMapper(product, varientId);
-        let user = this.storageService.getUser();
+        const user = this.storageService.getUser();
         if (user) {
-            let request = new syncItemToServerDBRequest(user.userId, 'TRIAL_CART', [orderedItem]);
-            this.restService.addTrialItem(request).subscribe();
+            const request = new syncItemToServerDBRequest(user.userId, 'TRIAL_CART', [orderedItem]);
+            try {
+                await firstValueFrom(this.restService.addTrialItem(request));
+                return true;
+            }
+            catch (error) {
+                console.error('Error adding trial item to server:', error);
+                return false;
+            }
+        }
+        else {
+            try {
+                const dbRequest = await this.storageService.getTrialCart();
+                const trialCartItem = await new Promise((resolve, reject) => {
+                    dbRequest.onsuccess = (event) => resolve(event.target.result);
+                    dbRequest.onerror = (event) => reject(event.target.error);
+                });
+                const isItemAlreadyAdded = trialCartItem.some((item) => item.itemId === product.itemId &&
+                    (product?.itemVariant?.length === 0 || product.varientId === item.varientId));
+                if (!isItemAlreadyAdded) {
+                    await this.storageService.addProductToTrial(orderedItem);
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                console.error('Error accessing trial cart from local storage:', error);
+                return false;
+            }
         }
-        else
-            this.storageService.addProductToTrial(orderedItem);
     }
     addItemToFavFromCart(product) {
         this.storageService.addProductToWishlist(product);
@@ -15765,6 +15790,9 @@ class ProductListComponent extends BaseSection {
             this.getScreenSize();
         }
     }
+    get stylesLayout() {
+        return { ...this.styles?.layout };
+    }
     handleProductListScroll() {
         const el = this.listScrollContainer?.nativeElement;
         if (!el || this.isListLoading || this.isAllListLoaded)
@@ -16140,8 +16168,25 @@ class ProductListComponent extends BaseSection {
     toggleCollections() {
         this.showAllCollections = !this.showAllCollections;
     }
+    async addToTrialCart(product) {
+        let isItemAdded = true;
+        if (product?.itemVariant?.length) {
+            const itemVarient = this.getItemVarient(product, product.varientId);
+            if (itemVarient) {
+                itemVarient.wishlist = true;
+                isItemAdded = await this.cartService.addItemToTrial(product, itemVarient.variantId);
+            }
+        }
+        else {
+            isItemAdded = await this.cartService.addItemToTrial(product);
+        }
+        if (isItemAdded)
+            this.messageService.add({ severity: 'success', summary: 'Try at home', detail: 'Item added to your trial cart' });
+        else
+            this.messageService.add({ severity: 'error', summary: 'Try at home', detail: 'Item already added to your trial cart' });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i2$1.MatDialog }, { token: CartService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\r\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <!-- <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo\r\n          -1)*size}}-{{minSize}} of {{ totalCount }} Results</div> -->\r\n        <div class=\"d-flex m-auto gap-15\" style=\"width: 75%; overflow-x: auto;\">\r\n          <ng-container *ngFor=\"let filter of filterList\">\r\n            <div class=\"d-flex justify-content-between w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">\r\n                x\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\"\r\n      [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\"\r\n          [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\" style=\"height: 70vh; overflow-y: auto;\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div #listScrollContainer class=\"product-parent\" style=\"height: 100%; overflow-y: auto;\"\r\n            *ngIf=\"responseData && responseData.length > 0\" (scroll)=\"handleProductListScroll()\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n\r\n\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <!-- <div *ngIf=\"!isListLoading && isAllListLoaded && responseData\" class=\"text-center\" style=\"padding: 12px; color: #aaa;\">\r\n        No more products.\r\n      </div> -->\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (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\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <!-- <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button> -->\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{\r\n          pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\r\n        (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div class=\"product-card position-relative\">\r\n    <!-- Product Image -->\r\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n      class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n        (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n        [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n        (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n      </div>\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <!-- Product Details -->\r\n    <div class=\"mt-2 w-100\">\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 loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n            [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n            [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n            [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n            (click)=\"selectVarient(product, varient)\">\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n        <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n          <div>\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.discountedPrice | number:'1.0-0'}}\r\n          </div>\r\n          <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n          [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n        <!-- BEGIN: Add to Cart Section (hidden by default, shown on hover of product-card) -->\r\n        <div *ngIf=\"content?.display?.showButton && !ecomConfigs.appointmentBookingEnabled\" class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n            [id]=\"data?.id+getButtonId(1)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n            (click)=\"addItemToCart($event, product, 'ADD')\">\r\n            Add to Cart\r\n          </button>\r\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n            [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n              [style.color]=\"getButtonStyle(1)?.textColor\"\r\n              (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n              [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n        </div>\r\n        <div class=\"try-button-section\"\r\n          *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\">\r\n          <div class=\"try-at-home\">\r\n            <button>TRY AT HOME</button>\r\n          </div>\r\n          <div class=\"video-call-image\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\" />\r\n          </div>\r\n        </div>\r\n        <!-- END: Add to Cart Section -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;padding:10px!important}.product{padding:10px;cursor:pointer;border-radius:10px}.product-img{height:25vh;width:100%;border-radius:10px;transition:opacity .3s ease-in-out,transform .4s ease-in-out}.product-img.fade-out{opacity:0;transform:scale(.95)}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center;border-radius:10px}.default-image img{width:100%;height:25vh;border-radius:10px}.categories-section{border-bottom:1px solid #D8D8D8;padding-bottom:1rem}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card .varient-list{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover .varient-list{display:flex}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex}.fav-icon{position:absolute;z-index:100;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:20%;position:sticky;top:0;height:70vh;overflow-y:auto}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;color:#de57e5;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}.empty-cart{height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:15px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;margin-left:10px;height:70vh;overflow-y:auto}.bottom-filter{display:none}.onlyMobile{display:none!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}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:70%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px}.try-button-section .video-call-image{width:30%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%;padding:10px}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\" [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex m-auto gap-15\" style=\"width: 75%; overflow-x: auto;\">\r\n          <ng-container *ngFor=\"let filter of filterList\">\r\n            <div class=\"d-flex justify-content-between w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">x</span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between\" style=\"height: 70vh; overflow-y: auto;\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div #listScrollContainer class=\"product-parent\" style=\"height: 100%; overflow-y: auto;\" *ngIf=\"responseData && responseData.length > 0\" (scroll)=\"handleProductListScroll()\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\" [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\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\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\" />\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\" />\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [id]=\"data?.id+getButtonId(0)\" (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div class=\"product-card position-relative\">\r\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n      </div>\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"mt-2 w-100\">\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 loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [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 align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n        <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n          <div>\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.discountedPrice | number:'1.0-0'}}\r\n          </div>\r\n          <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n        <div *ngIf=\"content?.display?.showButton && !ecomConfigs.appointmentBookingEnabled\" class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\" [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\" [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n        </div>\r\n        <div class=\"try-button-section\" *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\">\r\n          <div class=\"try-at-home\">\r\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\" (click)=\"addToTrialCart(product)\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n            [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT HOME</button>\r\n          </div>\r\n          <div class=\"video-call-image\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;padding:10px!important;align-items:flex-start;position:relative}.product{padding:10px;cursor:pointer;border-radius:10px;position:relative;overflow:visible;box-sizing:border-box;min-width:auto;background-color:#fff;height:auto;transition:all .3s ease-in-out;z-index:0}.product:hover{z-index:10;box-shadow:0 8px 16px #0003;transform:scale(1.05);margin-bottom:-100px;transition:all .3s ease-in-out}.product-img{border-radius:10px;width:100%;height:25vh;box-shadow:0 8px 16px #0003}.default-image img{width:100%;height:25vh;box-shadow:0 8px 16px #0003}.product-card{height:100%;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card .varient-list{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover .varient-list{display:flex}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex}.fav-icon{position:absolute;z-index:100;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:20%;position:sticky;top:0;height:70vh;overflow-y:auto}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;color:#de57e5;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}.empty-cart{height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:15px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;margin-left:10px;height:70vh;overflow-y:auto}.bottom-filter{display:none}.onlyMobile{display:none!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}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important;height:auto!important;transform:none!important;z-index:1!important}.product:hover{height:auto!important;transform:none!important;box-shadow:none!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:70%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:16px!important;padding:5px 0!important}.try-button-section .video-call-image{width:30%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%;padding:10px}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
@@ -16166,8 +16211,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SmallProductListingComponent,
                         ColorDirective,
                         MatChipsModule,
-                        ButtonEditorDirective
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n      <mat-icon>home</mat-icon>\r\n    </div> -->\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\r\n        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <!-- <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo\r\n          -1)*size}}-{{minSize}} of {{ totalCount }} Results</div> -->\r\n        <div class=\"d-flex m-auto gap-15\" style=\"width: 75%; overflow-x: auto;\">\r\n          <ng-container *ngFor=\"let filter of filterList\">\r\n            <div class=\"d-flex justify-content-between w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">\r\n                x\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\"\r\n      [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\"\r\n          [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex justify-content-between\" style=\"height: 70vh; overflow-y: auto;\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div #listScrollContainer class=\"product-parent\" style=\"height: 100%; overflow-y: auto;\"\r\n            *ngIf=\"responseData && responseData.length > 0\" (scroll)=\"handleProductListScroll()\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n\r\n\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <!-- <div *ngIf=\"!isListLoading && isAllListLoaded && responseData\" class=\"text-center\" style=\"padding: 12px; color: #aaa;\">\r\n        No more products.\r\n      </div> -->\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n    (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\"\r\n    (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n        (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n        (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <!-- <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button> -->\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{\r\n          pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n  <section>\r\n    <ng-container *ngFor=\"let category of categories\">\r\n      <div class=\"category\">\r\n        <img [src]=\"category.imgUrl\">\r\n        <span>{{ category.option }}</span>\r\n      </div>\r\n    </ng-container>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\r\n        (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div class=\"product-card position-relative\">\r\n    <!-- Product Image -->\r\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n      class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n        (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n        [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n        (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n      </div>\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <!-- Product Details -->\r\n    <div class=\"mt-2 w-100\">\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 loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n            [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n            [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n            [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n            (click)=\"selectVarient(product, varient)\">\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n        <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n          <div>\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.discountedPrice | number:'1.0-0'}}\r\n          </div>\r\n          <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n          [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n        <!-- BEGIN: Add to Cart Section (hidden by default, shown on hover of product-card) -->\r\n        <div *ngIf=\"content?.display?.showButton && !ecomConfigs.appointmentBookingEnabled\" class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n            [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n            [id]=\"data?.id+getButtonId(1)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n            (click)=\"addItemToCart($event, product, 'ADD')\">\r\n            Add to Cart\r\n          </button>\r\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n            [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n              [style.color]=\"getButtonStyle(1)?.textColor\"\r\n              (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n              [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n        </div>\r\n        <div class=\"try-button-section\"\r\n          *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\">\r\n          <div class=\"try-at-home\">\r\n            <button>TRY AT HOME</button>\r\n          </div>\r\n          <div class=\"video-call-image\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\" />\r\n          </div>\r\n        </div>\r\n        <!-- END: Add to Cart Section -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;padding:10px!important}.product{padding:10px;cursor:pointer;border-radius:10px}.product-img{height:25vh;width:100%;border-radius:10px;transition:opacity .3s ease-in-out,transform .4s ease-in-out}.product-img.fade-out{opacity:0;transform:scale(.95)}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center;border-radius:10px}.default-image img{width:100%;height:25vh;border-radius:10px}.categories-section{border-bottom:1px solid #D8D8D8;padding-bottom:1rem}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card .varient-list{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover .varient-list{display:flex}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex}.fav-icon{position:absolute;z-index:100;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:20%;position:sticky;top:0;height:70vh;overflow-y:auto}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;color:#de57e5;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}.empty-cart{height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:15px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;margin-left:10px;height:70vh;overflow-y:auto}.bottom-filter{display:none}.onlyMobile{display:none!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}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:70%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px}.try-button-section .video-call-image{width:30%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%;padding:10px}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"] }]
+                        ButtonEditorDirective,
+                        SpacingHorizontalDirective,
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\" [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex m-auto gap-15\" style=\"width: 75%; overflow-x: auto;\">\r\n          <ng-container *ngFor=\"let filter of filterList\">\r\n            <div class=\"d-flex justify-content-between w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">x</span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\" style=\"overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between chip\" [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-between\" style=\"height: 70vh; overflow-y: auto;\">\r\n      <div class=\"filter-side onlyDesktop\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div #listScrollContainer class=\"product-parent\" style=\"height: 100%; overflow-y: auto;\" *ngIf=\"responseData && responseData.length > 0\" (scroll)=\"handleProductListScroll()\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\" [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\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\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of displayedCategories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"category.status\" />\r\n        <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCategories\">\r\n              <mat-icon>expand_more</mat-icon>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showAllCategories\">\r\n              <mat-icon>expand_less</mat-icon>\r\n            </ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by collections</b></h6>\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" [checked]=\"collection.status\" />\r\n        <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n      </div>\r\n      <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\">\r\n        <span class=\"toggle-text\">\r\n          {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n          <span class=\"dropdown-icon\">\r\n            <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n            <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n          </span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\r\n      <div>\r\n        <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n          <input matSliderStartThumb [(ngModel)]=\"pricingMin\" />\r\n          <input matSliderEndThumb [(ngModel)]=\"pricingMax\" />\r\n        </mat-slider>\r\n      </div>\r\n      <div class=\"price-button-section\">\r\n        <div class=\"button-section\">\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [id]=\"data?.id+getButtonId(0)\" (click)=\"applyFilter()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <div class=\"product-card position-relative\">\r\n    <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\r\n      <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n      <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n        <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n        <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n      </div>\r\n      <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n    </div>\r\n\r\n    <div class=\"mt-2 w-100\">\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 loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [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 align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n        <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\r\n          <div>\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.discountedPrice | number:'1.0-0'}}\r\n          </div>\r\n          <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n            <span [innerHTML]='currency'></span>\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n        <div *ngIf=\"content?.display?.showButton && !ecomConfigs.appointmentBookingEnabled\" class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n          <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\" [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n            <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n            <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\" [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n        </div>\r\n        <div class=\"try-button-section\" *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\">\r\n          <div class=\"try-at-home\">\r\n            <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\" (click)=\"addToTrialCart(product)\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n            [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT HOME</button>\r\n          </div>\r\n          <div class=\"video-call-image\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;padding:10px!important;align-items:flex-start;position:relative}.product{padding:10px;cursor:pointer;border-radius:10px;position:relative;overflow:visible;box-sizing:border-box;min-width:auto;background-color:#fff;height:auto;transition:all .3s ease-in-out;z-index:0}.product:hover{z-index:10;box-shadow:0 8px 16px #0003;transform:scale(1.05);margin-bottom:-100px;transition:all .3s ease-in-out}.product-img{border-radius:10px;width:100%;height:25vh;box-shadow:0 8px 16px #0003}.default-image img{width:100%;height:25vh;box-shadow:0 8px 16px #0003}.product-card{height:100%;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card .varient-list{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover .varient-list{display:flex}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex}.fav-icon{position:absolute;z-index:100;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:20%;position:sticky;top:0;height:70vh;overflow-y:auto}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;color:#de57e5;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}.empty-cart{height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:15px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;margin-left:10px;height:70vh;overflow-y:auto}.bottom-filter{display:none}.onlyMobile{display:none!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}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important;height:auto!important;transform:none!important;z-index:1!important}.product:hover{height:auto!important;transform:none!important;box-shadow:none!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:70%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:16px!important;padding:5px 0!important}.try-button-section .video-call-image{width:30%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%;padding:10px}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;gap:10px;position:absolute;bottom:10px;left:10px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;height:30px;width:30px;justify-content:center;pointer-events:auto}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]