simpo-component-library 1.4.84 → 1.4.86

package/fesm2022/simpo-component-library.mjs

@@ -17,6 +17,7 @@ import { map, forkJoin } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import * as i2$3 from '@angular/router';
 import * as i2$2 from 'ngx-cookie-service';
+import Swal from 'sweetalert2';
 import * as i2$4 from '@angular/material/snack-bar';
 import * as mapboxgl from 'mapbox-gl';
 import * as i10 from 'ngx-image-zoom';
@@ -102,14 +103,8 @@ class EventsService {
         this.environmentType = new EventEmitter();
         this.showLoadingScreen = new EventEmitter();
         this.cashFreeEvent = new EventEmitter();
-        this.paymentStatusEvent = new EventEmitter();
-    }
-    ngOnInit() {
-        this.paymentStatusEvent.subscribe((response) => {
-            if (response) { }
-            // this.storageService.clearUserCart();
-        });
     }
+    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EventsService, providedIn: 'root' }); }
 }
@@ -3437,21 +3432,35 @@ class AuthenticateUserComponent extends BaseSection {
         this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
             const userDetails = this.storageService.setUser(response.data);
             this.storageService.updateAllData();
-            if (userDetails.contact?.name?.length > 0) {
-                if (this.dialogRef)
-                    this.dialogRef.close();
-                else
-                    this.router.navigate(['/']);
-            }
-            else {
-                if (this.dialogRef)
-                    this.dialogRef.close();
-                this.matDialog.open(UserBasicInfoComponent, {
-                    height: '50vh',
-                    width: '40vw',
-                    data: {}
-                });
-            }
+            Swal.fire({
+                icon: "success",
+                title: "Hurray",
+                text: "Your account successfully created",
+                showCancelButton: true,
+                confirmButtonText: "I loved it",
+                cancelButtonText: "Fill other basic details",
+                cancelButtonColor: "#928c8c",
+            }).then((result) => {
+                if (result.isConfirmed) {
+                }
+                else if (result.isDismissed) {
+                    if (userDetails.contact?.name?.length > 0) {
+                        if (this.dialogRef)
+                            this.dialogRef.close();
+                        else
+                            this.router.navigate(['/']);
+                    }
+                    else {
+                        if (this.dialogRef)
+                            this.dialogRef.close();
+                        this.matDialog.open(UserBasicInfoComponent, {
+                            height: '50vh',
+                            width: '40vw',
+                            data: {}
+                        });
+                    }
+                }
+            });
         });
     }
     resendOTP() {
@@ -3507,7 +3516,7 @@ class NavbarSectionComponent {
         this.router.navigate(['/list'], { queryParams: { searchTxt: this.searchText } });
     }
     goToFav() {
-        this.router.navigate(['/whislist']);
+        this.router.navigate(['/wishlist']);
     }
     goToAccount() {
         if (this.storageService.getUser()) {
@@ -5492,7 +5501,7 @@ class ProductListComponent extends BaseSection {
         return Math.ceil(this.totalCount / this.size);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i5.MatBottomSheet }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\">\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%;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n      <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\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\" style=\"gap: 5px; overflow-x: auto;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\">\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\">\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        <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n          <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n            <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n            </div>\r\n            <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n              <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n            </div>\r\n            <div class=\"mt-2\">\r\n              <div class=\"product-name heading-large text-left\">\r\n                {{product.name}}</div>\r\n              <div class=\"price body-large text-left\">\r\n                ${{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n            <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n          </div> -->\r\n            <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n        </div>\r\n        \r\n        <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n          <div>\r\n            <div class=\"cart-image\">\r\n              <img 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      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex\" 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\" 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\"></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\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 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=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div>{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div>{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\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()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\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>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}.bottom-filter,.onlyMobile{display:none}@media screen and (max-width: 475px){.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:0;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;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-around;align-items:center;height:50px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i12.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i12.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\">\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%;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n      <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\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\" style=\"gap: 5px; overflow-x: auto;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\">\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\">\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        <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n          <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n            <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n            </div>\r\n            <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n              <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n            </div>\r\n            <div class=\"mt-2\">\r\n              <div class=\"product-name heading-large text-left\">\r\n                {{product.name}}</div>\r\n              <div class=\"price body-large text-left\">\r\n                ${{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n            <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n          </div> -->\r\n            <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n        </div>\r\n        \r\n        <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n          <div>\r\n            <div class=\"cart-image\">\r\n              <img 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      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex\" 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\" 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\"></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\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 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=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div>{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div>{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\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()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\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>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}.bottom-filter{display:none}.onlyMobile{display:none!important}@media screen and (max-width: 475px){.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:0;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;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-around;align-items:center;height:50px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i12.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i12.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: i13.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
@@ -5513,7 +5522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatIcon,
                         MatBottomSheetModule,
                         MatRadioModule
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\">\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%;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n      <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\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\" style=\"gap: 5px; overflow-x: auto;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\">\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\">\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        <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n          <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n            <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n            </div>\r\n            <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n              <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n            </div>\r\n            <div class=\"mt-2\">\r\n              <div class=\"product-name heading-large text-left\">\r\n                {{product.name}}</div>\r\n              <div class=\"price body-large text-left\">\r\n                ${{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n            <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n          </div> -->\r\n            <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n        </div>\r\n        \r\n        <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n          <div>\r\n            <div class=\"cart-image\">\r\n              <img 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      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex\" 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\" 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\"></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\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 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=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div>{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div>{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\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()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\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>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}.bottom-filter,.onlyMobile{display:none}@media screen and (max-width: 475px){.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:0;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;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-around;align-items:center;height:50px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\">\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%;\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n      <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n          <select (change)=\"applyFilter($event, 'SORT')\">\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\" style=\"gap: 5px; overflow-x: auto;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 chip\">\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\">\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        <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n          <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n            <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n            </div>\r\n            <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n              <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n            </div>\r\n            <div class=\"mt-2\">\r\n              <div class=\"product-name heading-large text-left\">\r\n                {{product.name}}</div>\r\n              <div class=\"price body-large text-left\">\r\n                ${{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n            <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n          </div> -->\r\n            <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n        </div>\r\n        \r\n        <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n          <div>\r\n            <div class=\"cart-image\">\r\n              <img 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      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex\" 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\" 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\"></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\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n      <ng-container *ngFor=\"let filter of filterList\">\r\n        <div class=\"d-flex justify-content-between w-100 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=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by categories\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n        <div>{{category.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by collections\r\n      </div>\r\n      <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n        <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n        <div>{{collection.option | uppercase}}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"price-section\">\r\n      <div class=\"categories heading-small\">\r\n        Shop by price\r\n      </div>\r\n      <div>\r\n        <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\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()\">Filter</button>\r\n        </div>\r\n        <div class=\"price-range\">\r\n          Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\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>", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}.bottom-filter{display:none}.onlyMobile{display:none!important}@media screen and (max-width: 475px){.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:0;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;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-around;align-items:center;height:50px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -5777,85 +5786,84 @@ class CartComponent extends BaseSection {
     ngOnInit() {
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
-            if (!this.isLoading) {
-                if (this.storageService.getUser()) {
-                    this.userDetails = this.storageService.getUser();
-                    this.cartInfo.userDetails = {
-                        "userId": this.userDetails?.userId,
-                        "userName": this.userDetails?.contact.name,
-                        "mobile": this.userDetails?.contact.mobile,
-                        "email": this.userDetails?.contact.email,
-                        "deliveryAddress": null,
-                    };
-                    this.restService.getUserItems(this.userDetails.userId, "CART").subscribe((response) => {
-                        const tempUserCart = response?.data?.orderedItems ?? [];
-                        localStorage.setItem('cartId', response.data?.cartId);
-                        if (response.data?.orderedItems?.length > 0) {
-                            console.log(tempUserCart);
-                            console.log("ASYNC AWAIT TEST");
-                            this.storageService.addAllProductsToCart(tempUserCart).oncomplete = () => {
-                                console.log("completed");
-                                this.storageService.getUserCart().then((cartResponse) => {
-                                    cartResponse.onsuccess = (cartData) => {
-                                        console.log("cart Data", cartData);
-                                        this.USER_CART_ITEMS = cartData.target.result;
-                                        [...tempUserCart, ...this.USER_CART_ITEMS].forEach((item) => {
-                                            this.cartInfo.billdetails.totalGrossValue += (item.price * (item.quantity ?? 1));
-                                            this.cartInfo.billdetails.totalTax += (item.price * (item.itemTax ?? 1));
-                                        });
-                                        this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue + this.cartInfo.billdetails.totalTax - this.cartInfo.billdetails.deliveryCharges;
-                                        this.cartInfo.orderedItems = this.USER_CART_ITEMS;
-                                        this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue;
-                                        this.responseData = this.cartInfo;
-                                        console.log(this.responseData);
-                                    };
+        });
+        if (this.storageService.getUser()) {
+            this.userDetails = this.storageService.getUser();
+            this.cartInfo.userDetails = {
+                "userId": this.userDetails?.userId,
+                "userName": this.userDetails?.contact.name,
+                "mobile": this.userDetails?.contact.mobile,
+                "email": this.userDetails?.contact.email,
+                "deliveryAddress": null,
+            };
+            debugger;
+            this.restService.getUserItems(this.userDetails.userId, "CART").subscribe((response) => {
+                const tempUserCart = response?.data?.[0]?.orderedItems ?? [];
+                localStorage.setItem('cartId', response.data?.[0]?.cartId);
+                if (response.data?.[0]?.orderedItems?.length > 0) {
+                    console.log(tempUserCart);
+                    console.log("ASYNC AWAIT TEST");
+                    this.storageService.addAllProductsToCart(tempUserCart).oncomplete = () => {
+                        console.log("completed");
+                        this.storageService.getUserCart().then((cartResponse) => {
+                            cartResponse.onsuccess = (cartData) => {
+                                console.log("cart Data", cartData);
+                                this.USER_CART_ITEMS = cartData.target.result;
+                                [...tempUserCart, ...this.USER_CART_ITEMS].forEach((item) => {
+                                    this.cartInfo.billdetails.totalGrossValue += (item.price * (item.quantity ?? 1));
+                                    this.cartInfo.billdetails.totalTax += (item.quantity * (item.itemTax ?? 1));
                                 });
+                                this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue + this.cartInfo.billdetails.totalTax - this.cartInfo.billdetails.deliveryCharges;
+                                this.cartInfo.orderedItems = this.USER_CART_ITEMS;
+                                this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue;
+                                this.responseData = this.cartInfo;
+                                console.log(this.responseData);
                             };
-                        }
-                        else {
-                            this.storageService.getUserCart().then((cartResponse) => {
-                                cartResponse.onsuccess = (cartData) => {
-                                    console.log("cart Data", cartData);
-                                    this.USER_CART_ITEMS = cartData.target.result;
-                                    [...this.USER_CART_ITEMS].forEach((item) => {
-                                        this.cartInfo.billdetails.totalGrossValue += (item.price * (item.quantity ?? 1));
-                                        this.cartInfo.billdetails.totalTax += (item.price * (item.itemTax ?? 1));
-                                    });
-                                    this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue + this.cartInfo.billdetails.totalTax - this.cartInfo.billdetails.deliveryCharges;
-                                    this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue;
-                                    this.cartInfo.orderedItems = this.USER_CART_ITEMS;
-                                    console.log(this.responseData);
-                                    this.responseData = this.cartInfo;
-                                    this.restService.addItemToDB(this.responseData).subscribe((response) => {
-                                        localStorage.setItem('cartId', response.data?.cartId);
-                                    });
-                                };
-                            });
-                        }
-                    });
+                        });
+                    };
                 }
                 else {
                     this.storageService.getUserCart().then((cartResponse) => {
-                        console.log(cartResponse);
                         cartResponse.onsuccess = (cartData) => {
+                            console.log("cart Data", cartData);
                             this.USER_CART_ITEMS = cartData.target.result;
-                            this.USER_CART_ITEMS.forEach((item) => {
+                            [...this.USER_CART_ITEMS].forEach((item) => {
                                 this.cartInfo.billdetails.totalGrossValue += (item.price * (item.quantity ?? 1));
-                                this.cartInfo.billdetails.totalTax += (item.price * (item.itemTax ?? 1));
+                                this.cartInfo.billdetails.totalTax += (item.quantity * (item.itemTax ?? 1));
                             });
                             this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue + this.cartInfo.billdetails.totalTax - this.cartInfo.billdetails.deliveryCharges;
                             this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue;
                             this.cartInfo.orderedItems = this.USER_CART_ITEMS;
+                            console.log(this.responseData);
                             this.responseData = this.cartInfo;
+                            this.restService.addItemToDB(this.responseData).subscribe((response) => {
+                                localStorage.setItem('cartId', response.data?.cartId);
+                            });
                         };
                     });
-                    // this.responseData = this.storageService.calculateBillingDetails();
-                    console.log(this.responseData);
                 }
-                console.log(this.responseData);
-                this.styles = this.data?.styles;
-            }
-        });
+            });
+        }
+        else {
+            this.storageService.getUserCart().then((cartResponse) => {
+                console.log(cartResponse);
+                cartResponse.onsuccess = (cartData) => {
+                    this.USER_CART_ITEMS = cartData.target.result;
+                    this.USER_CART_ITEMS.forEach((item) => {
+                        this.cartInfo.billdetails.totalGrossValue += (item.price * (item.quantity ?? 1));
+                        this.cartInfo.billdetails.totalTax += (item.price * (item.itemTax ?? 1));
+                    });
+                    this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue + this.cartInfo.billdetails.totalTax - this.cartInfo.billdetails.deliveryCharges;
+                    this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue;
+                    this.cartInfo.orderedItems = this.USER_CART_ITEMS;
+                    this.responseData = this.cartInfo;
+                };
+            });
+            // this.responseData = this.storageService.calculateBillingDetails();
+            console.log(this.responseData);
+        }
+        console.log(this.responseData);
+        this.styles = this.data?.styles;
     }
     proceedToCheckout() {
         if (this.storageService.getUser()) {
@@ -5953,7 +5961,9 @@ class CartComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i2$2.CookieService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"item-parent d-flex\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img 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            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"item-parent d-flex\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label}}</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\"  [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label}}</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img 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            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+                //DIRECTIVE
+                ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, decorators: [{
             type: Component,
@@ -5969,7 +5979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         HoverDirective,
                         AddressComponent,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"item-parent d-flex\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\">Checkout Cart</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\">Continue Shopping</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\">Place Order</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img 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            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n      <div class=\"bar\"></div>\r\n      <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n    </div>\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <ng-container [ngSwitch]=\"currentTab\">\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n          <div class=\"my-bag\">\r\n            My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          <div class=\"cart-items\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n              <div class=\"item-parent d-flex\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                  <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n                  <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                      &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                      <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n                        <div class=\"d-flex\"> <i  class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n                  <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                  <div>\r\n                    <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n          <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\"></simpo-address>\r\n        </div>\r\n        <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n      </ng-container>\r\n      <div class=\"right-panel\">\r\n        <div class=\"my-bag\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalNetValue ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{(responseData?.billdetails?.totalTax ?? 0)}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{(responseData?.totalAmount ?? 0)}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n              <div class=\"btn\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</div>\r\n              <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label}}</div>\r\n            </ng-container>\r\n            \r\n            <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n              <div class=\"btn\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\"  [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label}}</div>\r\n            </ng-container>\r\n            <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n              <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img 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            Your cart is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$2.CookieService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -6398,6 +6408,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class EndUserService {
+    constructor(storageService) {
+        this.storageService = storageService;
+        this.paymentStatusEvent = new EventEmitter();
+        this.eventRef = null;
+    }
+    ngOnInit() {
+        this.eventRef = this.paymentStatusEvent.subscribe((response) => {
+            if (response)
+                this.storageService.clearUserCart();
+        });
+    }
+    ngOnDestroy() {
+        this.eventRef?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EndUserService, deps: [{ token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EndUserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: EndUserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: StorageServiceService }] });
+
 class Cart {
     constructor(json, type = null) {
         this.cartId = json?.["cartId"];
@@ -6494,5 +6529,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, Cart, CartComponent, Category, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, SPACINGALIGN, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, Cart, CartComponent, Category, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, SPACINGALIGN, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map