simpo-component-library 3.6.168 → 3.6.170

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]
@@ -16785,11 +16831,11 @@ class ListHomeAppointmentComponent {
         this.appointmentDetails = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListHomeAppointmentComponent, deps: [{ token: RestService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListHomeAppointmentComponent, isStandalone: true, selector: "simpo-list-home-appointment", ngImport: i0, template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                        NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                        <div class=\"item-name\">{{item.itemName}}</div>\r\n                        <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                        <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                        <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}} {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}} {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i7$3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListHomeAppointmentComponent, isStandalone: true, selector: "simpo-list-home-appointment", ngImport: i0, template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngIf=\"homeAppointmentList.length == 0\">\r\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\r\n    </div>\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                      NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                      <div class=\"item-name\">{{item.itemName}}</div>\r\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                      <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\r\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\r\n                      {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showEmptyScreen>\r\n  <section class=\"empty-cart m-auto\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n          >\r\n      </div>\r\n      <div class=\"cart-text \">\r\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\r\n            <div class=\"heading-medium\">No Booked Appointment</div>\r\n          </div>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i7$3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListHomeAppointmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-list-home-appointment', standalone: true, imports: [MatIconModule, CommonModule, SimpoComponentModule, TimelineModule], template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                        NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                        <div class=\"item-name\">{{item.itemName}}</div>\r\n                        <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                        <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                        <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}} {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}} {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}\n"] }]
+            args: [{ selector: 'simpo-list-home-appointment', standalone: true, imports: [MatIconModule, CommonModule, SimpoComponentModule, TimelineModule], template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngIf=\"homeAppointmentList.length == 0\">\r\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\r\n    </div>\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                      NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                      <div class=\"item-name\">{{item.itemName}}</div>\r\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                      <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\r\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\r\n                      {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\" *ngIf=\"!isMobile\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showEmptyScreen>\r\n  <section class=\"empty-cart m-auto\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n          >\r\n      </div>\r\n      <div class=\"cart-text \">\r\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\r\n            <div class=\"heading-medium\">No Booked Appointment</div>\r\n          </div>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }] });
 
 class UserProfileComponent extends BaseSection {
@@ -17060,6 +17106,7 @@ class UserProfileComponent extends BaseSection {
         }).then((response) => {
             if (response.isConfirmed) {
                 this.cookieService.delete("user");
+                sessionStorage.clear();
                 localStorage.removeItem("perId");
                 localStorage.removeItem('cartId');
                 this.router.navigate(['/']);