simpo-component-library 3.6.167 → 3.6.169

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]
@@ -16740,8 +16786,8 @@ class ListHomeAppointmentComponent {
         this.getHomeAppointmentList();
     }
     getHomeAppointmentList() {
-        // const user = this.storageService.getUser()
-        const user = { userId: '5ad40df5-6005-401d-9223-24d336acfddf' };
+        const user = this.storageService.getUser();
+        // const user = {userId: '5ad40df5-6005-401d-9223-24d336acfddf'}
         this.restService.getHomeAppointmentList(user?.userId ?? '').subscribe((res) => {
             this.homeAppointmentList = res.data;
         });