simpo-component-library 1.4.88 → 1.4.100

package/fesm2022/simpo-component-library.mjs

@@ -10,23 +10,28 @@ import * as i3 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i2$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i8 from 'ngx-skeleton-loader';
+import * as i7 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as i1 from '@angular/platform-browser';
 import { map, forkJoin } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
-import * as i2$3 from '@angular/router';
-import * as i2$4 from 'ngx-cookie-service';
+import * as i2$4 from '@angular/router';
+import * as i2$3 from 'ngx-cookie-service';
+import Swal from 'sweetalert2';
 import * as i2$5 from '@angular/material/snack-bar';
 import * as mapboxgl from 'mapbox-gl';
-import * as i9 from 'ngx-image-zoom';
+import * as i10 from 'ngx-image-zoom';
 import { NgxImageZoomModule } from 'ngx-image-zoom';
-import * as i9$1 from '@angular/material/slider';
+import * as i12 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/bottom-sheet';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import * as i13 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
 import * as i4 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
-import * as i5 from 'primeng/api';
+import * as i5$1 from 'primeng/api';
 
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -90,7 +95,6 @@ class EventsService {
         this.openBlogListEvent = new EventEmitter();
         this.toggleEditorEvent = new EventEmitter();
         this.closeEditorEvent = new EventEmitter();
-        this.stopCarouselEvent = new EventEmitter();
         // Ecommerce event emitter
         this.redirectToPage = new EventEmitter();
         this.addToCart = new EventEmitter();
@@ -99,7 +103,9 @@ class EventsService {
         this.environmentType = new EventEmitter();
         this.showLoadingScreen = new EventEmitter();
         this.cashFreeEvent = new EventEmitter();
+        this.addressAddedIdx = new EventEmitter();
     }
+    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' }); }
 }
@@ -193,6 +199,13 @@ var BANNERALIGNMENT;
     BANNERALIGNMENT["top"] = "flex-lg-column";
     BANNERALIGNMENT["bottom"] = "flex-lg-column-reverse";
 })(BANNERALIGNMENT || (BANNERALIGNMENT = {}));
+var SPACINGALIGN;
+(function (SPACINGALIGN) {
+    SPACINGALIGN["large"] = "8rem";
+    SPACINGALIGN["medium"] = "6rem";
+    SPACINGALIGN["small"] = "2rem";
+    SPACINGALIGN["none"] = "0rem";
+})(SPACINGALIGN || (SPACINGALIGN = {}));
 var BANNERHALIGN;
 (function (BANNERHALIGN) {
     BANNERHALIGN["left"] = "justify-content-start text-start";
@@ -1560,11 +1573,17 @@ class BorderDirective {
         this.eventService.borderChangeChecks.subscribe((res) => {
             if (this.el.nativeElement.id === res.id) {
                 if (res.data?.display) {
-                    this.el.nativeElement.style.setProperty('border-bottom', res.data.thickness + 'px' +
-                        ' ' +
-                        res.data.type +
-                        ' ' +
-                        res.data.color);
+                    this.el.nativeElement.style.setProperty("border-radius", (res.data?.radius ?? 0) + "px");
+                    if (res.data?.direction?.includes("ALL")) {
+                        res.data.direction = ["LEFT", "RIGHT", "TOP", "BOTTOM"];
+                    }
+                    for (let idx = 0; idx < (res.data?.direction?.length ?? 0); idx++) {
+                        this.el.nativeElement.style.setProperty(`border-` + res.data?.direction?.[idx]?.toLowerCase(), res.data.thickness + 'px' +
+                            ' ' +
+                            res.data.type +
+                            ' ' +
+                            res.data.color);
+                    }
                 }
                 else {
                     this.el.nativeElement.style.setProperty('border-bottom', 'none');
@@ -1574,11 +1593,17 @@ class BorderDirective {
     }
     ngOnChanges() {
         if (this.borderData?.display) {
-            this.el.nativeElement.style.setProperty('border-bottom', this.borderData.thickness + 'px' +
-                ' ' +
-                this.borderData.type +
-                ' ' +
-                this.borderData.color);
+            if (this.borderData?.direction?.includes("ALL")) {
+                this.borderData.direction = ["LEFT", "RIGHT", "TOP", "BOTTOM"];
+            }
+            this.el.nativeElement.style.setProperty("border-radius", (this.borderData?.radius ?? 0) + "px");
+            for (let idx = 0; idx < (this.borderData?.direction?.length ?? 0); idx++) {
+                this.el.nativeElement.style.setProperty(`border-` + this.borderData?.direction?.[idx].toLowerCase(), this.borderData.thickness + 'px' +
+                    ' ' +
+                    this.borderData.type +
+                    ' ' +
+                    this.borderData.color);
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BorderDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2126,7 +2151,6 @@ class BannerSectionComponent extends BaseSection {
         this._eventService = _eventService;
     }
     ngOnInit() {
-        console.log(this.data);
         this.deleteSelected = this.delete;
         this.content = this.data?.content;
         this.styles = this.data?.styles;
@@ -2809,7 +2833,7 @@ class TextImageSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\">\r\n        <img [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\"\r\n          loading=\"lazy\" loading=\"lazy\" />\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n              [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { 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: "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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n      <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n      >\r\n        <div class=\"col-10 col-sm-8 col-lg-6\">\r\n          <img\r\n            [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" loading=\"lazy\"\r\n            loading=\"lazy\"/>\r\n        </div>\r\n        <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { 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: "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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
@@ -2839,7 +2863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\">\r\n        <img [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\"\r\n          loading=\"lazy\" loading=\"lazy\" />\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n              [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n      <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n      >\r\n        <div class=\"col-10 col-sm-8 col-lg-6\">\r\n          <img\r\n            [src]=\"content?.image?.url\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" loading=\"lazy\"\r\n            loading=\"lazy\"/>\r\n        </div>\r\n        <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [buttonId]=\"button.id\" [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\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  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}@media only screen and (max-width: 475px){.col-10{width:100%!important}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2989,74 +3013,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 args: ['simpoSticky']
             }] } });
 
-var orderedItems$1 = [
-];
-var cartType$1 = "CART";
-var billdetails$1 = {
-	totalNetValue: 0,
-	totalGrossValue: 0,
-	totalTax: 0,
-	totalOfferedValue: 0,
-	deliveryCharges: 0,
-	couponId: "",
-	discountAmount: 0,
-	afterDiscountAmount: 0,
-	taxBreakup: {
-		cgstValue: 0,
-		sgstValue: 0,
-		igstValue: 0
-	}
-};
-var userDetails = {
-	userId: "",
-	userName: "",
-	mobile: "",
-	email: "",
-	pinCode: ""
-};
-var locationDetails$1 = {
-	countryId: "",
-	cityId: "",
-	stateId: "",
-	localityId: "",
-	countryName: "",
-	cityName: "",
-	stateName: "",
-	localityName: "",
-	pinCode: ""
-};
-var platform$1 = "WEB";
-var totalAmount$1 = 0;
-var cartId = "";
-var UserCart = {
-	orderedItems: orderedItems$1,
-	cartType: cartType$1,
-	billdetails: billdetails$1,
-	userDetails: userDetails,
-	locationDetails: locationDetails$1,
-	platform: platform$1,
-	totalAmount: totalAmount$1,
-	cartId: cartId
-};
-
-var user = {
-	addressDetailsList: [
-	],
-	businessId: "",
-	gender: "",
-	userId: "",
-	profilePic: "",
-	contact: {
-		countryCode: "",
-		email: "",
-		mobile: "",
-		name: ""
-	}
-};
-var UserInfo = {
-	user: user
-};
-
 class RestService {
     constructor(http, eventService) {
         this.http = http;
@@ -3077,7 +3033,7 @@ class RestService {
             this.environmentTypeSubscriber?.unsubscribe();
     }
     getFeaturedProduct(collectionId) {
-        let subIndustryId = localStorage.getItem("subindustryId");
+        let subIndustryId = localStorage.getItem("subIndustryId");
         if (!subIndustryId)
             subIndustryId = "1eecee8d-efba-62f8-b7b5-b9742fceb17f";
         return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
@@ -3159,6 +3115,9 @@ class RestService {
     updateProfile(payload) {
         return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, payload);
     }
+    getUserOrders(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/order/user/order`, payload);
+    }
     toggleItemCartToFav() {
     }
     // Payment
@@ -3181,104 +3140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
 
-class UserBasicInfoComponent {
-    constructor(restService, router, dialogRef) {
-        this.restService = restService;
-        this.router = router;
-        this.dialogRef = dialogRef;
-        this.gender = null;
-        this.firstName = "";
-        this.middleName = "";
-        this.lastName = "";
-        this.email = "";
-        this.profilePic = "";
-    }
-    ngOnInit() {
-        this.firstName = UserInfo.user?.contact?.name?.split(" ")?.[0];
-        this.middleName = UserInfo.user?.contact?.name?.split(" ")?.[1];
-        this.lastName = UserInfo.user?.contact?.name?.split(" ")?.[2];
-        this.email = UserInfo.user?.contact?.email;
-        this.gender = UserInfo.user?.gender;
-        this.profilePic = UserInfo.user?.profilePic;
-    }
-    close() {
-        this.dialogRef.close();
-    }
-    saveProfile() {
-        const payload = {
-            userId: UserInfo.user?.userId,
-            gender: this.gender,
-            profilePic: this.profilePic,
-            contact: {
-                countryCode: "91",
-                email: this.email,
-                name: this.firstName + " " + (this.middleName?.length > 0 ? this.middleName + " " : "") + this.lastName
-            }
-        };
-        this.restService.updateProfile(payload).subscribe((response) => {
-            if (this.dialogRef)
-                this.dialogRef.close();
-            else
-                this.router.navigate(['/']);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-user-basic-info', standalone: true, imports: [
-                        CommonModule,
-                        MatDialogModule,
-                        FormsModule
-                    ], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }] });
-
-var orderedItems = [
-];
-var cartType = "WISHLIST";
-var billdetails = {
-	totalNetValue: 0,
-	totalGrossValue: 0,
-	totalTax: 0,
-	totalOfferedValue: 0,
-	deliveryCharges: 0,
-	couponId: "",
-	discountAmount: 0,
-	afterDiscountAmount: 0,
-	taxBreakup: {
-		cgstValue: 0,
-		sgstValue: 0,
-		igstValue: 0
-	}
-};
-var locationDetails = {
-	countryId: "",
-	cityId: "",
-	stateId: "",
-	localityId: "",
-	countryName: "",
-	cityName: "",
-	stateName: "",
-	localityName: "",
-	pinCode: ""
-};
-var platform = "WEB";
-var totalAmount = 0;
-var UserFavourite = {
-	orderedItems: orderedItems,
-	cartType: cartType,
-	billdetails: billdetails,
-	locationDetails: locationDetails,
-	platform: platform,
-	totalAmount: totalAmount
-};
-
 class StorageServiceService {
     constructor(eventService, cookieService, restService) {
         this.eventService = eventService;
         this.cookieService = cookieService;
         this.restService = restService;
+        this.totalCartItems = 0;
         this.databaseName = "USER";
         this.databaseVersion = 1;
         this.cartCollectionName = "USER_CART";
@@ -3289,6 +3156,9 @@ class StorageServiceService {
         this.userCollectionRef = null;
         this.createDataBase();
     }
+    get getTotalCartItems() {
+        return this.totalCartItems;
+    }
     async createDataBase() {
         const request = await window.indexedDB.open(this.databaseName, 1);
         this.eventService.showLoadingScreen.emit(true);
@@ -3297,8 +3167,24 @@ class StorageServiceService {
             this.database = await event.target.result;
             const request = await this.getUserCart();
             request.onsuccess = async (response) => {
-                this.eventService.showLoadingScreen.emit(false);
-                UserCart.orderedItems = await response.target.result;
+                (await this.getUserCart()).onsuccess = (userCartResponse) => {
+                    this.totalCartItems = userCartResponse.target.result.length;
+                    try {
+                        const response = this.addAllProductsToCart(userCartResponse.target.result);
+                        response.oncomplete = () => {
+                            this.eventService.showLoadingScreen.emit(false);
+                        };
+                        response.onerror = () => {
+                            this.eventService.showLoadingScreen.emit(false);
+                        };
+                    }
+                    catch (exception) {
+                        this.eventService.showLoadingScreen.emit(false);
+                    }
+                    ;
+                    console.log("Database created");
+                };
+                // UserCart.orderedItems = await response.target.result;
             };
         };
         request.onupgradeneeded = (event) => {
@@ -3312,29 +3198,27 @@ class StorageServiceService {
         this.eventService.showLoadingScreen.emit(true);
         const request = await this.getUserCart();
         request.onsuccess = async (response) => {
-            UserCart.orderedItems = await response.target.result;
-            console.log("Car", UserCart);
+            // UserCart.orderedItems = await response.target.result;
+            // console.log("Car", UserCart);
             const favRequest = await this.getUserWhishlist();
             favRequest.onsuccess = async (favResponse) => {
-                UserFavourite.orderedItems = await favResponse.target.result;
-                console.log("favourite:", UserFavourite);
                 this.eventService.showLoadingScreen.emit(false);
             };
         };
     }
     calculateBillingDetails() {
-        UserCart.billdetails.totalGrossValue = 0;
-        UserCart.billdetails.totalNetValue = 0;
-        UserCart.billdetails.deliveryCharges = 0;
-        UserCart.billdetails.discountAmount = 0;
-        UserCart.billdetails.totalOfferedValue = 0;
-        UserCart.billdetails.totalTax = 0;
-        UserCart.orderedItems.forEach((item) => {
-            UserCart.billdetails.totalGrossValue += (item.price * item.quantity);
-            UserCart.billdetails.totalTax += (item.itemTax * item.quantity);
-        });
-        UserCart.billdetails.totalNetValue = (UserCart.billdetails.totalGrossValue + UserCart.billdetails.totalTax + UserCart.billdetails.deliveryCharges) - UserCart.billdetails.discountAmount;
-        return UserCart;
+        // UserCart.billdetails.totalGrossValue = 0;
+        // UserCart.billdetails.totalNetValue = 0;
+        // UserCart.billdetails.deliveryCharges = 0;
+        // UserCart.billdetails.discountAmount = 0;
+        // UserCart.billdetails.totalOfferedValue = 0;
+        // UserCart.billdetails.totalTax = 0;
+        // UserCart.orderedItems.forEach((item: OrderedItems)=> {
+        //   UserCart.billdetails.totalGrossValue += (item.price * item.quantity);
+        //   UserCart.billdetails.totalTax += (item.itemTax * item.quantity);
+        // })
+        // UserCart.billdetails.totalNetValue = (UserCart.billdetails.totalGrossValue + UserCart.billdetails.totalTax + UserCart.billdetails.deliveryCharges) - UserCart.billdetails.discountAmount;
+        // return UserCart;
     }
     updateAllData() {
         const userDetails = this.getUser();
@@ -3346,21 +3230,18 @@ class StorageServiceService {
             ]);
             request.subscribe((cartResponse) => {
                 console.log("Cart Response : ", cartResponse);
-                UserCart.orderedItems = [];
-                UserFavourite.orderedItems = [];
                 cartResponse?.[0].data?.orderedItems?.forEach((item) => {
                     this.addProductToCart(item);
-                    UserCart.orderedItems.push(item);
-                });
-                cartResponse?.[1].data?.orderedItems?.forEach((item) => {
-                    this.addProductToWishlist(item);
-                    UserFavourite.orderedItems.push(item);
                 });
+                // cartResponse?.[1].data?.orderedItems?.forEach((item: OrderedItems)=> {
+                //   this.addProductToWishlist(item);
+                //   UserFavourite.orderedItems.push(item as never);
+                // })
                 this.eventService.showLoadingScreen.emit(false);
             });
         }
         else {
-            this.storeDataToJSON();
+            // this.storeDataToJSON();
         }
     }
     // CART SERVICE
@@ -3370,9 +3251,34 @@ class StorageServiceService {
     }
     addProductToCart(product) {
         const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        const response = transaction.objectStore(this.cartCollectionName).get(product.itemId);
+        response.onsuccess = (cartResponse) => {
+            console.log("Cart Resppnse : ", cartResponse);
+            if (cartResponse.target.result) { }
+            else {
+                this.totalCartItems += 1;
+            }
+        };
         return transaction.objectStore(this.cartCollectionName).put(product);
     }
+    addAllProductToWishlist(products) {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        products.forEach((product) => {
+            console.log(product + "wishlist");
+            const response = transaction.objectStore(this.favouriteCollectionName).put(product);
+        });
+        return transaction;
+    }
+    addAllProductsToCart(products) {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        products.forEach((product) => {
+            console.log(product + "info");
+            const response = transaction.objectStore(this.cartCollectionName).put(product);
+        });
+        return transaction;
+    }
     removeProductFromCart(productId) {
+        this.totalCartItems -= 1;
         const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
         return transaction.objectStore(this.cartCollectionName).delete(productId);
     }
@@ -3397,8 +3303,16 @@ class StorageServiceService {
         const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
         return await transaction.objectStore(this.favouriteCollectionName).get(productId);
     }
+    clearUserCart() {
+        const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
+        return transaction.objectStore(this.cartCollectionName).clear();
+    }
+    clearUserWishlist() {
+        const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
+        return transaction.objectStore(this.favouriteCollectionName).clear();
+    }
     // USER SERVICE
-    addUser(user) {
+    setUser(user) {
         this.cookieService.set("user", JSON.stringify(user ?? "{}"), 7);
         return user;
     }
@@ -3413,7 +3327,7 @@ class StorageServiceService {
     storePaymentFor(paymentFor) {
         this.cookieService.set("paymentFor", paymentFor, 7);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$4.CookieService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }, { token: i2$3.CookieService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, decorators: [{
@@ -3421,10 +3335,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.CookieService }, { type: RestService }] });
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.CookieService }, { type: RestService }] });
 
-class AuthenticateUserComponent {
+class UserBasicInfoComponent {
+    constructor(restService, router, dialogRef, storageService) {
+        this.restService = restService;
+        this.router = router;
+        this.dialogRef = dialogRef;
+        this.storageService = storageService;
+        this.gender = null;
+        this.firstName = "";
+        this.middleName = "";
+        this.lastName = "";
+        this.email = "";
+        this.profilePic = "";
+        this.userDetails = null;
+    }
+    ngOnInit() {
+        this.userDetails = this.storageService.getUser();
+        this.firstName = this.userDetails?.contact?.name?.split(" ")?.[0] ?? "";
+        this.middleName = this.userDetails?.contact?.name?.split(" ")?.[1] ?? "";
+        this.lastName = this.userDetails?.contact?.name?.split(" ")?.[2] ?? "";
+        this.email = this.userDetails?.contact?.email ?? "";
+        this.gender = this.userDetails?.gender;
+        this.profilePic = this.userDetails?.profilePic ?? "";
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    saveProfile() {
+        const payload = {
+            userId: this.userDetails?.userId,
+            gender: this.gender,
+            profilePic: this.profilePic,
+            contact: {
+                countryCode: "91",
+                email: this.email,
+                name: this.firstName + " " + (this.middleName?.length > 0 ? this.middleName + " " : "") + this.lastName
+            }
+        };
+        this.restService.updateProfile(payload).subscribe((response) => {
+            if (this.dialogRef)
+                this.dialogRef.close();
+            else
+                this.router.navigate(['/']);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$4.Router }, { token: i3.MatDialogRef }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-user-basic-info', standalone: true, imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        FormsModule
+                    ], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div>\r\n        <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\">\r\n        </div>\r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            </div>\r\n        </div>    \r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\" (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\" (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">Skip</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:48%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}.form-control-group{margin:15px 0}.form-control-group img{height:50px;width:50px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.form-control-group .active{border:2px solid #0267C1}.action-btn{position:absolute;bottom:-35px;right:10px;display:flex;align-items:center;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$4.Router }, { type: i3.MatDialogRef }, { type: StorageServiceService }] });
+
+class AuthenticateUserComponent extends BaseSection {
     constructor(matData, restService, router, matDialog, storageService, dialogRef, _eventService) {
+        super();
         this.matData = matData;
         this.restService = restService;
         this.router = router;
@@ -3444,7 +3415,6 @@ class AuthenticateUserComponent {
     ngOnInit() {
         if (this.matData)
             this.data = this.matData;
-        this.styles = this.data?.styles;
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
@@ -3469,25 +3439,37 @@ class AuthenticateUserComponent {
     }
     verifyOTP() {
         this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
-            // localStorage.setItem("userId", response.userId);
-            const userDetails = this.storageService.addUser(response.data);
-            UserInfo.user = userDetails;
+            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() {
@@ -3498,8 +3480,8 @@ class AuthenticateUserComponent {
     get isMobile() {
         return window.innerWidth <= 475;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n                <h2 class=\"text-center\">Welcome</h2>\r\n                <p class=\"text-center\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\">Use email\r\n                        instead</div>\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n                <h2 class=\"text-center\">Verify OTP</h2>\r\n                <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$4.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\">Welcome</h2>\r\n                <p class=\"text-center\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                        instead</div>\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n                <h2 class=\"text-center\">Verify OTP</h2>\r\n                <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
             type: Component,
@@ -3509,18 +3491,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CommonModule,
                         SimpoComponentModule,
                         ButtonDirectiveDirective,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n                <h2 class=\"text-center\">Welcome</h2>\r\n                <p class=\"text-center\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\">Use email\r\n                        instead</div>\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n                <h2 class=\"text-center\">Verify OTP</h2>\r\n                <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\">Welcome</h2>\r\n                <p class=\"text-center\">Log or Signup in to your account</p>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n                <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                        instead</div>\r\n                </div>\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n                <h2 class=\"text-center\">Verify OTP</h2>\r\n                <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n                        [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n        </ng-container>\r\n    </div>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: RestService }, { type: i2$3.Router }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i3.MatDialogRef, decorators: [{
+                }] }, { type: RestService }, { type: i2$4.Router }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i3.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
-            }], responseData: [{
-                type: Input
             }] } });
 
 class NavbarSectionComponent {
@@ -3545,7 +3525,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()) {
@@ -3558,7 +3538,7 @@ class NavbarSectionComponent {
                 this.matDialog.open(AuthenticateUserComponent, {
                     height: '50vh',
                     width: '35vw',
-                    data: this.data
+                    data: this.content
                 });
             }
         }
@@ -3651,7 +3631,7 @@ class NavbarSectionComponent {
         }, 100);
     }
     get getCartItemsCount() {
-        return UserCart?.orderedItems?.length;
+        return this.storageService.getTotalCartItems;
     }
     getKeys(object) {
         return Object.keys(object);
@@ -3661,7 +3641,7 @@ class NavbarSectionComponent {
         object.forEach((key) => keys.push(Object.values(key)));
         return [...new Set(keys)];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i3.MatDialog }, { token: i2$4.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i3.MatDialog }, { token: i2$3.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n              <mat-icon>favorite_border</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
@@ -3693,7 +3673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective
                     ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n              <mat-icon>favorite_border</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i3.MatDialog }, { type: i2$4.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i3.MatDialog }, { type: i2$3.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
                 type: Input
@@ -3837,7 +3817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
 
 class SkeletonLoaderSectionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SkeletonLoaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SkeletonLoaderSectionComponent, decorators: [{
             type: Component,
@@ -4245,7 +4225,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n            class=\"individual-cards\"\r\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n            <div class=\"image\">\r\n              <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n                loading=\"lazy\">\r\n              <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\"\r\n                loading=\"lazy\">\r\n            </div>\r\n            <div class=\"heading-medium title mt-4\">\r\n              {{content.postTitle}}\r\n            </div>\r\n            <div class=\"body-large adate mt-3\">\r\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n          <div class=\"no-blog-post\">\r\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n          </div>\r\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n            <ngx-skeleton-loader 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            <div class=\"second-section-wrapper\">\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                width: '100%',\r\n                'border-radius': '0',\r\n                height: '15px',\r\n                'margin-bottom': '10px'\r\n              }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '90%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '60%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section mt-3rem\">\r\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n            [buttonStyle]=\"buttonData?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n        </div>\r\n\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", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { 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: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n            class=\"individual-cards\"\r\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n            <div class=\"image\">\r\n              <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n                loading=\"lazy\">\r\n              <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\"\r\n                loading=\"lazy\">\r\n            </div>\r\n            <div class=\"heading-medium title mt-4\">\r\n              {{content.postTitle}}\r\n            </div>\r\n            <div class=\"body-large adate mt-3\">\r\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n          <div class=\"no-blog-post\">\r\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n          </div>\r\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n            <ngx-skeleton-loader 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            <div class=\"second-section-wrapper\">\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                width: '100%',\r\n                'border-radius': '0',\r\n                height: '15px',\r\n                'margin-bottom': '10px'\r\n              }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '90%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '60%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section mt-3rem\">\r\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n            [buttonStyle]=\"buttonData?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n        </div>\r\n\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", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { 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: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
             type: Component,
@@ -4840,211 +4820,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 args: ['mainContainer']
             }] } });
 
-class RemoveCarouselDirective {
-    constructor(el, renderer, eventService) {
-        this.el = el;
-        this.renderer = renderer;
-        this.eventService = eventService;
-        this.animationSpeed = animation;
-        //   this.eventServiceSubscription = this.eventService.animationChangeChecks.subscribe(
-        //     (res:any) => {
-        //       if(this.el.nativeElement.id === res.id){
-        //         this.animationData = res.data
-        //         this.applyAnimation();
-        //       }
-        //     }
-        //   )
-    }
-    ngOnDestroy() {
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        if (this.eventServiceSubscription) {
-            this.eventServiceSubscription.unsubscribe();
-        }
-    }
-    ngOnInit() {
-    }
-    ngOnChanges() {
-        if (this.carouselRemove) {
-            console.log(this.carouselRemove);
-        }
-        // if (changes['carouselRemove']) {
-        // this.eventServiceSubscription = this.eventService.stopCarouselEvent.subscribe((res: any) => {
-        //   if (res.stopCarousel) {
-        //     this.stopCarousel(res);
-        //   }
-        // });
-        //   }
-    }
-    stopCarousel(res) {
-        // Ensure the carousel is not auto-playing
-        // this.renderer.setAttribute(this.el.nativeElement, 'data-interval', 'false');
-        // // Optionally, you can also remove the `data-ride` attribute to completely stop carousel functionality
-        this.renderer.setAttribute(this.el.nativeElement, 'data-interval', '100000');
-        // Update carousel items to ensure the correct item is marked as active
-        const carouselItems = this.el.nativeElement.querySelectorAll('.carousel-item');
-        carouselItems.forEach((item, index) => {
-            if (index === res.activeItem) {
-                item.classList.add('active');
-            }
-            else {
-                item.classList.remove('active');
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RemoveCarouselDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: RemoveCarouselDirective, isStandalone: true, selector: "[simpoCarouselRemove]", inputs: { carouselRemove: ["simpoCarouselRemove", "carouselRemove"], currentIndex: "currentIndex" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RemoveCarouselDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoCarouselRemove]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: EventsService }], propDecorators: { carouselRemove: [{
-                type: Input,
-                args: ['simpoCarouselRemove']
-            }], currentIndex: [{
-                type: Input
-            }] } });
-
-class CarouselBannerComponent extends BaseSection {
-    selectSlide(index) {
-        this.currentIndex = index;
-    }
-    constructor(_eventService) {
-        super();
-        this._eventService = _eventService;
-        // styles?: BannerStylesModel;
-        this.currentIndex = 0;
-    }
-    ngOnInit() {
-        this.deleteSelected = this.delete;
-        // this.content = this.data?.content;
-        // this.styles = this.data?.styles;
-        const id = this.data?.id;
-        // const action = this.data?.action;
-        // if(!this.styles  || !this.content) {
-        //   return;
-        // }
-        // this._eventService.stopCarouselEvent.subscribe((res:any)=>{
-        //   console.log(res)
-        // })
-        // let a = document.querySelector('data-ride');
-    }
-    // ngAfterViewInit(){
-    //   this._eventService.stopCarouselEvent.subscribe((res:any)=>{
-    //     console.log(res)
-    //     this.selectSlide(res.activeItem)
-    //     this.currentIndex = res.activeItem;
-    //     this.carouselElement1.nativeElement.setAttribute('data-interval','false')
-    //   })
-    // }
-    // get stylesLayout() {
-    //   return {...this.styles?.layout} as LayOutModel;
-    // }
-    // get getBlurValue() {
-    //   return this.styles?.blur;
-    // }
-    // get getBackgroundColor() {
-    //   return {...this.styles?.background} as BackgroundModel
-    // }
-    // get getBackgroundOpacity() {
-    //   if (this.styles?.overlay)
-    //     return this.opacityValue(this.styles.overlay);
-    //   return '0';
-    // }
-    stylesLayout(item) {
-        return { ...item.styles?.layout };
-    }
-    get getJustifyContent() {
-        return "justify-content: center !important;";
-    }
-    canMergeNavbar(item) {
-        return item.styles?.merge;
-    }
-    isBorderlessImage(item) {
-        return item.styles?.borderLessImage && (item.styles?.positionLayout.value == "left" || item.styles?.positionLayout.value == "right");
-    }
-    getPositionLayout(item) {
-        return { ...item.styles?.positionLayout };
-    }
-    opacityValue(value) {
-        switch (value) {
-            case "LIGHT":
-                return '0.2';
-            case "MODERATE":
-                return '0.3';
-            case "STRONG":
-                return '0.5';
-            case "VERY_STRONG":
-                return '0.7';
-            default:
-                return '0';
-        }
-    }
-    editSection() {
-        this._eventService.toggleEditorEvent.emit(false);
-        setTimeout(() => {
-            this._eventService.editSection.emit({ data: this.data });
-        }, 100);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CarouselBannerComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CarouselBannerComponent, isStandalone: true, selector: "simpo-carousel-banner", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "carouselElement1", first: true, predicate: ["carouselExampleInterval1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n    <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n        #carouselExampleInterval1\r\n        [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n        <!-- <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of data?.listBanners; let i = index\" [class.active]=\"i === 0\"\r\n                data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n        </ol> -->\r\n        <div class=\"carousel-inner\">\r\n            <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n                <div [id]=\"item.id\" class=\"carousel-item\" [simpoOverlay]=\"item?.styles?.background\"\r\n                    [simpoBorder]=\"item?.styles?.border\" [simpoBackground]=\"item?.styles?.background\"\r\n                    [ngClass]=\"{'active': i === currentIndex}\">\r\n                    <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n                    <div [simpoAnimation]=\"item?.styles?.animation\" class=\"h-100\" [id]=\"item.id\">\r\n                        <div class=\"px-4 py-5 h-100\">\r\n                            <div class=\"d-flex w-full justify-content-start\" [simpoLayout]=\"item?.styles?.layout\" style=\"height: 100%;\">\r\n                                <div class=\"w-50\" *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n                                    [simpoContainerAlignment]=\"stylesLayout(item)\" style=\"position: relative;height: 100%;\">\r\n                                    <img [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n                                        [id]=\"i\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n                                        [simpoCorner]=\"item?.styles?.corners\" [class]=\"i+(item?.content?.image?.id || '')\"\r\n                                        class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n                                        [alt]=\"item?.content?.image?.altText\" width=\"100\" height=\"100\" loading=\"lazy\" />\r\n                                </div>\r\n                                <div class=\"w-50\">\r\n                                    <div class=\"d-flex flex-column justify-content-start h-100\"\r\n                                        [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n                                        [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n                                        [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n                                        <div *ngFor=\"let text of item?.content?.inputText\">\r\n                                            <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n                                                [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                            </div>\r\n                                        </div>\r\n                                        <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n                                            <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n                                                <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n                                                    <div class=\"container_card visible\">\r\n                                                        <div class=\"card-section\">\r\n                                                            <div class=\"second-part-card\">\r\n    \r\n                                                            </div>\r\n                                                            <div class=\"first-part-card\"\r\n                                                                [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                                <img class=\"tick-img\"\r\n                                                                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                                                                    alt=\"something\"\r\n                                                                    style=\"width: 5%;height: 5%;position:relative\" />\r\n    \r\n                                                                {{ listItem.value }}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <div *ngIf=\"item?.action && item?.action?.display\"\r\n                                            class=\"button-display d-flex gap-3\"\r\n                                            [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n                                            <div *ngFor=\"let button of item?.action?.buttons\">\r\n                                                <app-button-element [buttonContent]=\"button.content\"\r\n                                                    [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                                                    [sectionId]=\"item?.id\"\r\n                                                    [color]=\"item?.styles?.background?.accentColor\"></app-button-element>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                </div>\r\n                <ng-template #ImageSection>\r\n                    <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                        [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n                        style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n                        [simpoBorderless]=\"getPositionLayout(item)\">\r\n                        <img [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n                            [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n                    </div>\r\n                </ng-template>\r\n\r\n            </ng-container>\r\n        </div>\r\n    </div>\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>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CarouselBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-carousel-banner', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        SimpoComponentModule,
-                        MatGridListModule,
-                        SimpoButtonComponent,
-                        SimpoBorderlessDirective,
-                        AnimationDirective,
-                        BackgroundDirective,
-                        simpoConetenAlignmentDirective,
-                        ContentFitDirective,
-                        BannerContentFitDirective,
-                        BorderDirective,
-                        ButtonDirectiveDirective,
-                        ColumnDirectiveDirective,
-                        ContainerFitDirective,
-                        simpoConetenAlignmentDirective,
-                        CornerDirective,
-                        SimpoFooterLayoutDirective,
-                        HoverDirective,
-                        ImageDirectiveDirective,
-                        OverlayDirective,
-                        PositionLayoutDirectiveDirective,
-                        TextBackgroundDirectiveDirective,
-                        ObjectPositionDirective,
-                        ColorDirective,
-                        SimpoContainerAligment,
-                        SimpoBlurContentDirective,
-                        RemoveCarouselDirective,
-                        BannerSectionComponent
-                    ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n    <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n        #carouselExampleInterval1\r\n        [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n        <!-- <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of data?.listBanners; let i = index\" [class.active]=\"i === 0\"\r\n                data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n        </ol> -->\r\n        <div class=\"carousel-inner\">\r\n            <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n                <div [id]=\"item.id\" class=\"carousel-item\" [simpoOverlay]=\"item?.styles?.background\"\r\n                    [simpoBorder]=\"item?.styles?.border\" [simpoBackground]=\"item?.styles?.background\"\r\n                    [ngClass]=\"{'active': i === currentIndex}\">\r\n                    <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n                    <div [simpoAnimation]=\"item?.styles?.animation\" class=\"h-100\" [id]=\"item.id\">\r\n                        <div class=\"px-4 py-5 h-100\">\r\n                            <div class=\"d-flex w-full justify-content-start\" [simpoLayout]=\"item?.styles?.layout\" style=\"height: 100%;\">\r\n                                <div class=\"w-50\" *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n                                    [simpoContainerAlignment]=\"stylesLayout(item)\" style=\"position: relative;height: 100%;\">\r\n                                    <img [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n                                        [id]=\"i\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n                                        [simpoCorner]=\"item?.styles?.corners\" [class]=\"i+(item?.content?.image?.id || '')\"\r\n                                        class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n                                        [alt]=\"item?.content?.image?.altText\" width=\"100\" height=\"100\" loading=\"lazy\" />\r\n                                </div>\r\n                                <div class=\"w-50\">\r\n                                    <div class=\"d-flex flex-column justify-content-start h-100\"\r\n                                        [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n                                        [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n                                        [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n                                        <div *ngFor=\"let text of item?.content?.inputText\">\r\n                                            <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n                                                [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                            </div>\r\n                                        </div>\r\n                                        <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n                                            <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n                                                <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n                                                    <div class=\"container_card visible\">\r\n                                                        <div class=\"card-section\">\r\n                                                            <div class=\"second-part-card\">\r\n    \r\n                                                            </div>\r\n                                                            <div class=\"first-part-card\"\r\n                                                                [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                                <img class=\"tick-img\"\r\n                                                                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                                                                    alt=\"something\"\r\n                                                                    style=\"width: 5%;height: 5%;position:relative\" />\r\n    \r\n                                                                {{ listItem.value }}\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <div *ngIf=\"item?.action && item?.action?.display\"\r\n                                            class=\"button-display d-flex gap-3\"\r\n                                            [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n                                            <div *ngFor=\"let button of item?.action?.buttons\">\r\n                                                <app-button-element [buttonContent]=\"button.content\"\r\n                                                    [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                                                    [sectionId]=\"item?.id\"\r\n                                                    [color]=\"item?.styles?.background?.accentColor\"></app-button-element>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                </div>\r\n                <ng-template #ImageSection>\r\n                    <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                        [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n                        style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n                        [simpoBorderless]=\"getPositionLayout(item)\">\r\n                        <img [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n                            [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n                    </div>\r\n                </ng-template>\r\n\r\n            </ng-container>\r\n        </div>\r\n    </div>\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>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{height:80vh;position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.75;object-fit:cover}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { carouselElement1: [{
-                type: ViewChild,
-                args: ['carouselExampleInterval1']
-            }], data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }] } });
-
 class OrderedItems {
     constructor(json) {
         this.itemId = json?.["itemId"] ?? "";
         this.businessId = json?.["businessId"];
         this.itemName = json?.["name"];
-        this.brandName = json?.["brandName"];
+        this.businessName = json?.["businessName"];
         this.imgUrl = json?.["itemImages"]?.[0]?.["imgUrl"];
         this.price = json?.["price"]?.["value"];
         this.itemTax = json?.["price"]?.["taxAmount"];
@@ -5059,154 +4840,87 @@ class CartService {
         this.storageService = storageService;
         this.restService = restService;
     }
-    addItemFromCartPage(product) {
+    ngOnInit() {
+    }
+    addItemFromCartPage(product, userCart) {
         if (product.quantity) {
-            let productIdx = -1;
-            UserCart.orderedItems.forEach((item, idx) => {
-                if (item.itemId == product.itemId)
-                    productIdx = idx;
-            });
+            // let productIdx: number = -1;
+            // UserCart.orderedItems.forEach((item: OrderedItems, idx)=> {
+            //   if (item.itemId == product.itemId)
+            //     productIdx = idx;
+            // });
             this.storageService.addProductToCart(product);
-            return this.restService.addItemToDB(UserCart);
+            return this.restService.addItemToDB(userCart);
         }
         else {
             // remove item from cart
             this.removeItemFromCart(product);
-            return this.restService.addItemToDB(UserCart);
+            return this.restService.addItemToDB(userCart);
         }
     }
-    addItemToCart(product, isFromCart = false) {
+    addItemToCart(product) {
         if (product.quantity) {
-            const orderedItem = !isFromCart ? this.objectMapper(product) : product;
-            let productIdx = -1;
-            UserCart.orderedItems.forEach((item, idx) => {
-                if (item.itemId == product.itemId)
-                    productIdx = idx;
-            });
-            if (productIdx >= 0) {
-                UserCart.orderedItems[productIdx].quantity = product.quantity;
-            }
-            else {
-                UserCart.orderedItems.push(orderedItem);
-            }
-            console.log(UserCart);
-            this.storageService.addProductToCart(orderedItem);
+            const orderedItem = this.objectMapper(product);
+            return this.storageService.addProductToCart(orderedItem);
         }
         else {
-            // remove item from cart
-            this.removeItemFromCart(product);
+            return this.removeItemFromCart(product);
         }
     }
     addItemToFavourite(product) {
         const orderedItem = this.objectMapper(product);
-        let productIdx = -1;
-        UserFavourite.orderedItems.forEach((item, idx) => {
-            if (item.itemId == product.itemId)
-                productIdx = idx;
-        });
-        if (productIdx >= 0) {
-            UserFavourite.orderedItems[productIdx].quantity = product.quantity;
-        }
-        else {
-            UserFavourite.orderedItems.push(orderedItem);
-        }
         this.storageService.addProductToWishlist(orderedItem);
     }
     removeItemFromFavourite(product) {
-        const index = this.getItemIdxJSON(product.itemId, 'FAVOURITE');
-        if (index >= 0) {
-            const item = UserFavourite.orderedItems.splice(index, 1)[0];
-            // UserFavourites.orderedItems.push(item as never);
-            this.storageService.removeProductFromWishlist(product.itemId);
-        }
+        this.storageService.removeProductFromWishlist(product.itemId);
     }
     removeItemFromCart(product) {
-        const index = this.getItemIdxJSON(product.itemId, 'CART');
-        if (index >= 0) {
-            const item = UserCart.orderedItems.splice(index, 1)[0];
-            // UserCart.orderedItems.push(item as never);
-            this.storageService.removeProductFromCart(product.itemId);
-        }
-    }
-    // public convertFavToCart(product: OrderedItems) {
-    //   const index = this.getItemIdxJSON(product.getItemId, UserFavourites);
-    //   if (index >= 0) {
-    //     const item = UserFavourites.orderedItems.splice(index, 1)[0];
-    //     UserCart.orderedItems.push(item as never);
-    //   }
-    // }
-    // public convertCartToFav(product: OrderedItems) {
-    //   const index = this.getItemIdxJSON(product.getItemId, UserCart);
-    //   if (index >= 0) {
-    //     const item = UserCart.orderedItems.splice(index, 1)[0];
-    //     UserFavourites.orderedItems.push(item as never);
-    //   }
-    // }
+        this.storageService.removeProductFromCart(product.itemId);
+    }
+    getItemIdxJSON(id, type) {
+        return this.storageService.getProductFromCart(id);
+    }
     storeItemToDB(product, type) {
         if (type == "CART") {
             const orderProduct = this.objectMapper(this.storageService.getProductFromCart(product.itemId));
             if (orderProduct) {
                 this.storageService.addProductToCart(orderProduct);
-                UserCart.orderedItems.push(orderProduct);
             }
         }
         else {
             const orderProduct = this.objectMapper(this.storageService.getProductFromWishlist(product.itemId));
             if (orderProduct) {
                 this.storageService.addProductToWishlist(orderProduct);
-                UserFavourite.orderedItems.push(orderProduct);
             }
         }
     }
-    getItemIdxJSON(itemId, type) {
-        const json = (type == "FAVOURITE") ? UserFavourite : UserCart;
-        let productIndex = -1;
-        json.orderedItems.forEach((p, idx) => {
-            if (p.itemId == itemId)
-                productIndex = idx;
-        });
-        return productIndex;
-    }
     getItemByIdx(itemId, type) {
         const productIdx = this.getItemIdxJSON(itemId, type);
-        console.log(type, productIdx);
-        const json = (type == "FAVOURITE") ? UserFavourite : UserCart;
-        if (productIdx >= 0)
-            return json.orderedItems[productIdx];
+        // console.log(type, productIdx);
+        // const json = (type == "FAVOURITE") ? UserFavourites : UserCart;
+        // if (productIdx >= 0)
+        //   return json.orderedItems[productIdx];
         return null;
     }
     objectMapper(product) {
         return new OrderedItems(product);
     }
+    storeCartDataToServer(cart) {
+    }
+    clearCartItems() {
+        this.storageService.clearUserCart();
+    }
     storeDataToServer() {
-        const userCart = UserCart;
-        const userWishlist = UserFavourite;
-        if (userCart.cartId?.length == 0)
-            delete userCart.cartId;
-        if (userWishlist.cartId?.length == 0)
-            delete userWishlist.cartId;
-        return forkJoin([
-            this.restService.addItemToDB(UserCart),
-            this.restService.addItemToDB(UserFavourite)
-        ]);
-    }
-    storeDBToJSON() {
-        // this.storageService.getUserCart().then((response)=> {
-        //   
-        // })
-        // const userId = UserDetails.user?.userId;
-        // if (!userId)
-        //   return;
-        // this.restService.getUserItems(userId, "CART").subscribe((response: any)=> {
-        //   UserCart.orderedItems = response.data.orderedItems;
-        //   UserCart.billdetails = response.data.billdetails;
-        //   UserCart.totalAmount = response.totalAmount;
-        // })
-        // this.restService.getUserItems(userId, "WISHLIST").subscribe((response: any)=> {
-        //   UserFavourites.orderedItems = response.data.orderedItems;
-        //   UserFavourites.billdetails = response.data.billdetails;
-        //   UserFavourites.totalAmount = response.totalAmount;
-        // })
+        // const userCart = UserCart as never as Cart;
+        // const userWishlist = UserFavourites as never as Cart;
+        // if (userCart.cartId?.length == 0)
+        //   delete userCart.cartId;
+        // if (userWishlist.cartId?.length == 0)
+        //   delete userWishlist.cartId;
+        // return forkJoin([
+        //   this.restService.addItemToDB(UserCart),
+        //   this.restService.addItemToDB(UserFavourites)
+        // ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartService, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartService, providedIn: 'root' }); }
@@ -5219,18 +4933,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
         }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
 
 class FeaturedProductsComponent extends BaseSection {
-    constructor(platformId, _eventService, restService, router, cartService) {
+    constructor(platformId, _eventService, restService, router, cartService, storageService) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
         this.restService = restService;
         this.router = router;
         this.cartService = cartService;
+        this.storageService = storageService;
         this.isRelatedProduct = false;
         this.isLoading = false;
         this.edit = true;
         this._eventSubscriber = null;
         this.screenWidth = 0;
+        this.USER_CART = null;
+        this.USER_WISHLIST = null;
         if (isPlatformBrowser(this.platformId)) {
             this.getScreenSize();
         }
@@ -5242,9 +4959,7 @@ class FeaturedProductsComponent extends BaseSection {
         this.content = this.data?.content;
         this.styles = this.data?.styles;
         this.button = this.data?.action.buttons[0];
-        // if (this.isRelatedProduct) {
         this.getFeatureProduct();
-        // }
         this._eventSubscriber = this._eventService.featureCollectionList.subscribe((response) => {
             this.getFeatureProduct();
         });
@@ -5265,11 +4980,33 @@ class FeaturedProductsComponent extends BaseSection {
     getFeatureProduct() {
         this.restService.getFeaturedProduct(this.content?.collectionId).subscribe((response) => {
             this.responseData = response;
-            this.responseData?.forEach((product) => {
-                UserCart.orderedItems.forEach((item) => {
-                    if (item.itemId == product.itemId)
-                        product.quantity = item.quantity;
-                });
+            this.storageService.getUserCart().then((cartResponse) => {
+                cartResponse.onsuccess = (cartData) => {
+                    console.log(cartData);
+                    this.USER_CART = cartData.target.result;
+                    console.log(this.USER_CART);
+                    console.log(this.responseData);
+                    this.responseData?.forEach((product) => {
+                        this.USER_CART?.forEach((item) => {
+                            if (item.itemId == product.itemId)
+                                product.quantity = item.quantity;
+                        });
+                    });
+                };
+            });
+            this.storageService.getUserWhishlist().then((wishlistResponse) => {
+                wishlistResponse.onsuccess = (whislistData) => {
+                    this.USER_WISHLIST = whislistData.target.result;
+                    console.log("WHISLIST");
+                    console.log(this.USER_WISHLIST);
+                    console.log(this.responseData);
+                    this.responseData?.forEach((product) => {
+                        this.USER_WISHLIST?.forEach((item) => {
+                            if (item.itemId == product.itemId)
+                                product.whislist = true;
+                        });
+                    });
+                };
             });
         });
     }
@@ -5278,18 +5015,19 @@ class FeaturedProductsComponent extends BaseSection {
         this.cartService.addItemToCart(product);
     }
     toggleItemToFav(product, type) {
-        if (type == 'ADD')
+        if (type == 'ADD') {
+            product.whislist = true;
             this.cartService.addItemToFavourite(product);
-        else
+        }
+        else {
+            product.whislist = false;
             this.cartService.removeItemFromFavourite(product);
+        }
     }
     proceedToProductDesc(productId) {
         this.router.navigate([`details`], { queryParams: { id: productId } });
         // this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
     }
-    isItemFav(product) {
-        return this.cartService.getItemIdxJSON(product.itemId, 'FAVOURITE') > -1;
-    }
     togglePreviewImage(product, idx) {
         const element = document.getElementById('preview_' + idx);
         element?.classList.add("transition-preivew");
@@ -5298,11 +5036,8 @@ class FeaturedProductsComponent extends BaseSection {
             element?.classList.remove('transition-preivew');
         }, 50);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", 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\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\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 > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\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<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: [".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}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: 
-                // TODO: `HttpClientModule` should not be imported into a component directly.
-                // Please refactor the code to add `provideHttpClient()` call to the provider list in the
-                // application bootstrap logic and remove the `HttpClientModule` import from this component.
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: CartService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", 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\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\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\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\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<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>", 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}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: 
                 //directive
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
@@ -5312,9 +5047,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         CommonModule,
                         FormsModule,
                         SimpoComponentModule,
-                        // TODO: `HttpClientModule` should not be imported into a component directly.
-                        // Please refactor the code to add `provideHttpClient()` call to the provider list in the
-                        // application bootstrap logic and remove the `HttpClientModule` import from this component.
                         //directive
                         MatIcon,
                         AnimationDirective,
@@ -5327,11 +5059,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         ButtonDirectiveDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\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 > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\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<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: [".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}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n        <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n          [style.width]=\"getProductWidth()\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\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\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n            <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n          </div>\r\n          <div class=\"mt-15\">\r\n            <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              {{product.name}}</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n                &#8377;\r\n                {{product.price.sellingPrice}}\r\n              </div>\r\n              <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n                <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n                <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n                <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                  <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                  <span>{{product.quantity}}</span>\r\n                  <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\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<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>", 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}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.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{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: RestService }, { type: i2$3.Router }, { type: CartService }], propDecorators: { data: [{
+                }] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }, { type: CartService }, { type: StorageServiceService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -5339,6 +5071,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }], isRelatedProduct: [{
                 type: Input
+            }], edit: [{
+                type: Input
             }], delete: [{
                 type: Input
             }], getScreenSize: [{
@@ -5376,10 +5110,10 @@ class FeaturedCategoryComponent extends BaseSection {
             this.responseData = response.filter((category) => category.featuredCollection || true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$4.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, decorators: [{
             type: Component,
@@ -5395,11 +5129,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         OverlayDirective,
                         TextBackgroundDirectiveDirective,
                         ColorDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
+                }] }, { type: i2$4.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -5411,11 +5145,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class FeaturedProductModal {
+    constructor(json) {
+        this.id = "featured_product";
+        this.sectionType = "featuredProduct";
+        this.sectionName = "Featured Product Section";
+        this.action = json?.["action"];
+        this.content = json?.["content"];
+        this.styles = json?.["styles"];
+    }
+}
+
 // import { rmSync } from 'fs';
 // import { RestService } from '../../../services/rest.service';
 // import { HttpClientModule } from '@angular/common/http';
 class ProductDescComponent extends BaseSection {
-    constructor(platformId, _eventService, router, activatedRoute, restService, cartService) {
+    constructor(platformId, _eventService, router, activatedRoute, restService, cartService, storageService) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
@@ -5423,8 +5168,12 @@ class ProductDescComponent extends BaseSection {
         this.activatedRoute = activatedRoute;
         this.restService = restService;
         this.cartService = cartService;
-        this.isLoading = true;
+        this.storageService = storageService;
+        this.isLoading = false;
         this.relatedProductData = [];
+        this.isItemAsFavorite = false;
+        this.USER_CART = null;
+        this.USER_WISHLIST = null;
         if (isPlatformBrowser(this.platformId)) {
             this.getScreenSize();
         }
@@ -5438,19 +5187,34 @@ class ProductDescComponent extends BaseSection {
         this.button = this.data?.action?.buttons[0];
         this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
         this.getProductByCategory();
+        this._eventService.showLoadingScreen.subscribe((response) => {
+            this.isLoading = response;
+        });
         this.activatedRoute.queryParams.subscribe((qParam) => {
             const productId = qParam["id"];
             if (productId) {
                 this.restService.getProductDetails(productId).subscribe((response) => {
                     this.responseData = response[0];
                     if (this.responseData) {
-                        const cartItem = this.cartService.getItemByIdx(this.responseData?.itemId, "CART");
-                        const favItem = this.cartService.getItemByIdx(this.responseData?.itemId, "FAVOURITE");
                         this.responseData.quantity = 0;
-                        if (cartItem)
-                            this.responseData.quantity = cartItem.quantity;
-                        if (favItem)
-                            this.responseData.quantity = favItem.quantity;
+                        this.storageService.getUserCart().then((cartResponse) => {
+                            cartResponse.onsuccess = (cartData) => {
+                                this.USER_CART = cartData.target.result;
+                                this.USER_CART?.forEach((item) => {
+                                    if (item.itemId == productId)
+                                        this.responseData.quantity = item.quantity;
+                                });
+                            };
+                        });
+                        this.storageService.getUserWhishlist().then((wishlistResponse) => {
+                            wishlistResponse.onsuccess = (whislistData) => {
+                                this.USER_WISHLIST = whislistData.target.result;
+                                this.USER_WISHLIST?.forEach((item) => {
+                                    if (item.itemId == productId)
+                                        this.isItemAsFavorite = true;
+                                });
+                            };
+                        });
                         this.currentImg = this.responseData?.itemImages[0].imgUrl;
                         this.getProductByCategory();
                     }
@@ -5483,26 +5247,25 @@ class ProductDescComponent extends BaseSection {
         this.router.navigate(['list'], { queryParams: { category: category } });
     }
     addToFavourite() {
+        this.isItemAsFavorite = true;
         this.cartService.addItemToFavourite(this.responseData);
     }
     removeToFavourite() {
+        this.isItemAsFavorite = true;
         this.cartService.removeItemFromFavourite(this.responseData);
     }
-    get isItemAsFavorite() {
-        return this.cartService.getItemIdxJSON(this.responseData?.itemId, "FAVOURITE") > -1;
-    }
     get getFeatureProductData() {
-        return this.data;
+        return new FeaturedProductModal(this.data);
     }
     getProductByCategory() {
-        this.restService.getProductByCategoryId(this.responseData?.categoryId ?? "1ef4ffc0-559e-6ec5-8ea9-65f5dbff53c1").subscribe((response) => {
-            this.relatedProductData = response.data.data;
+        this.restService.getProductByCategoryId(this.responseData?.itemCategorisation?.itemCategories?.[0]?.refId ?? "").subscribe((response) => {
+            this.relatedProductData = response.data?.data;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", 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=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-6 col-12\">\r\n          <div class=\"prod-img-block\">\r\n            <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"item-img\">\r\n              <lib-ngx-image-zoom\r\n                [thumbImage]=\"currentImg\"\r\n                [fullImage]=\"currentImg\"\r\n                [zoomMode]=\"'hover'\"\r\n                [magnification]=\"2\"\r\n                [lensHeight]=\"100\"\r\n                [lensWidth]=\"100\"\r\n                style=\"height: 100%; width: 100%;\"\r\n              ></lib-ngx-image-zoom>\r\n              <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n            </div>\r\n            <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 product-detail\">\r\n          <div class=\"heading-large\">{{responseData?.name}}</div>\r\n          <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n          <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n          <div class=\"button-parent\">\r\n            <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n              <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n              <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n              <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n              <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n            </div>\r\n            <div *ngIf=\"!responseData?.quantity\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n            </div>\r\n            <div class=\"favourite\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n              {{responseData.itemInventory.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n            </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\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\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: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.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}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { 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: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", 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=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-6 col-12\">\r\n          <div class=\"prod-img-block\">\r\n            <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"item-img\">\r\n              <lib-ngx-image-zoom\r\n                [thumbImage]=\"currentImg\" \r\n                [fullImage]=\"currentImg\" \r\n                [zoomMode]=\"'hover'\"\r\n                [magnification]=\"2\" \r\n                [lensHeight]=\"100\"\r\n                [lensWidth]=\"100\"\r\n                style=\"height: 100%; width: 100%;\"\r\n              ></lib-ngx-image-zoom>\r\n              <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n            </div>\r\n            <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 product-detail\">\r\n          <div class=\"heading-large\">{{responseData?.name}}</div>\r\n          <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n            <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n            <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\">&#8377; {{responseData?.price?.discountedPrice}}</div>\r\n            <div class=\"tax-text\">(excluding all taxes)</div>\r\n          </div>\r\n          <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n          <div class=\"button-parent\">\r\n            <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n              <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n              <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n              <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n              <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n            </div>\r\n            <div *ngIf=\"!responseData?.quantity\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n            </div>\r\n            <div class=\"favourite\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n              {{responseData.itemInventory.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n            </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\">{{responseData?.descriptor?.name}}</div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\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\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>", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.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}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}@media screen and (max-width: 500px){.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { 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: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i9.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "delete"] }] }); }
+                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: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i10.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "delete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -5518,11 +5281,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         HoverDirective,
                         NgxImageZoomModule,
                         FeaturedProductsComponent,
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-6 col-12\">\r\n          <div class=\"prod-img-block\">\r\n            <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"item-img\">\r\n              <lib-ngx-image-zoom\r\n                [thumbImage]=\"currentImg\"\r\n                [fullImage]=\"currentImg\"\r\n                [zoomMode]=\"'hover'\"\r\n                [magnification]=\"2\"\r\n                [lensHeight]=\"100\"\r\n                [lensWidth]=\"100\"\r\n                style=\"height: 100%; width: 100%;\"\r\n              ></lib-ngx-image-zoom>\r\n              <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n            </div>\r\n            <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 product-detail\">\r\n          <div class=\"heading-large\">{{responseData?.name}}</div>\r\n          <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n          <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n          <div class=\"button-parent\">\r\n            <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n              <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n              <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n              <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n              <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n            </div>\r\n            <div *ngIf=\"!responseData?.quantity\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n            </div>\r\n            <div class=\"favourite\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n              {{responseData.itemInventory.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n            </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\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\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: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.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}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n      <div class=\"row\">\r\n        <div class=\"col-lg-6 col-12\">\r\n          <div class=\"prod-img-block\">\r\n            <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"item-img\">\r\n              <lib-ngx-image-zoom\r\n                [thumbImage]=\"currentImg\" \r\n                [fullImage]=\"currentImg\" \r\n                [zoomMode]=\"'hover'\"\r\n                [magnification]=\"2\" \r\n                [lensHeight]=\"100\"\r\n                [lensWidth]=\"100\"\r\n                style=\"height: 100%; width: 100%;\"\r\n              ></lib-ngx-image-zoom>\r\n              <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n            </div>\r\n            <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n              <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n                <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n                <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 product-detail\">\r\n          <div class=\"heading-large\">{{responseData?.name}}</div>\r\n          <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n            <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n            <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\">&#8377; {{responseData?.price?.discountedPrice}}</div>\r\n            <div class=\"tax-text\">(excluding all taxes)</div>\r\n          </div>\r\n          <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n          <div class=\"button-parent\">\r\n            <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n              <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n              <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n              <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n              <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n            </div>\r\n            <div *ngIf=\"!responseData?.quantity\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n            </div>\r\n            <div class=\"favourite\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n              {{responseData.itemInventory.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n            </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\">{{responseData?.descriptor?.name}}</div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\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\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>", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.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}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}@media screen and (max-width: 500px){.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
+                }] }, { type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -5556,7 +5319,7 @@ class PagninationComponent {
         this.currentPage = index + 1;
         this.router.navigate([''], { queryParams: { pageNo: this.currentPage } });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PagninationComponent, isStandalone: true, selector: "simpo-pagnination", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, ngImport: i0, template: "<section class=\"d-flex w-100 justify-content-center\">\r\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n    </ng-container>\r\n    <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n        <span class=\"pagniation-btn fs-2\">...</span>\r\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n    </div>\r\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PagninationComponent, decorators: [{
@@ -5564,31 +5327,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             args: [{ selector: 'simpo-pagnination', standalone: true, imports: [
                         CommonModule
                     ], template: "<section class=\"d-flex w-100 justify-content-center\">\r\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n    </ng-container>\r\n    <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n        <span class=\"pagniation-btn fs-2\">...</span>\r\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n    </div>\r\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.Router }], propDecorators: { totalPages: [{
+        }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { totalPages: [{
                 type: Input
             }], currentPage: [{
                 type: Input
             }] } });
 
 class ProductListComponent extends BaseSection {
-    constructor(platformId, _eventService, restService, router, activatedRoute) {
+    constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
         this.restService = restService;
         this.router = router;
         this.activatedRoute = activatedRoute;
+        this.storageService = storageService;
+        this.matBottomSheet = matBottomSheet;
+        this.matDialog = matDialog;
         this.isLoading = false;
+        this.filterBottomSheetRef = null;
+        this.sortingDialogRef = null;
         this.pricingMin = 0;
-        this.pricingMax = 100;
+        this.pricingMax = 100000;
         this.sortBy = null;
+        this.USER_CART = null;
+        this.USER_WISHLIST = null;
         // will come from backend as shop and resturant can have diffrent filters
         this.filteringArray = [
             { name: "Lowest First", value: "lowestPrice" },
             { name: "Highest First", value: "highestPrice" }
         ];
         this.screenWidth = 0;
-        this.filterList = [];
+        this.filterList = ["Women", "Men"];
         this.totalCount = 0;
         this.pageNo = 0;
         this.size = 5;
@@ -5598,9 +5368,6 @@ class ProductListComponent extends BaseSection {
         if (isPlatformBrowser(this.platformId)) {
             this.getScreenSize();
         }
-        this._eventService.showLoadingScreen.subscribe((response) => {
-            this.isLoading = response;
-        });
     }
     getScreenSize() {
         this.screenWidth = window.innerWidth;
@@ -5609,13 +5376,16 @@ class ProductListComponent extends BaseSection {
         this.content = this.data?.content;
         this.styles = this.data?.styles;
         this.button = this.data?.action.buttons[0];
+        this._eventService.showLoadingScreen.subscribe((response) => {
+            this.isLoading = response;
+        });
         this.getAllCategories();
         this.getAllCollections();
         this.activatedRoute.queryParams.subscribe((qParam) => {
             this.searchTxt = qParam["searchTxt"];
-            this.sortBy = qParam["sorting"];
+            this.sortBy = qParam["sorting"] ?? "lowestPrice";
             this.pricingMin = isNaN(Number(qParam["minPrice"])) ? 0 : Number(qParam["minPrice"]);
-            this.pricingMax = isNaN(Number(qParam["maxPrice"])) ? 1000 : Number(qParam["maxPrice"]);
+            this.pricingMax = isNaN(Number(qParam["maxPrice"])) ? 1000000 : Number(qParam["maxPrice"]);
             this.filterByCategoryCollectionParam(qParam["category"], qParam["collections"]);
         });
     }
@@ -5667,7 +5437,7 @@ class ProductListComponent extends BaseSection {
         this.categories.forEach((category) => category.status = false);
         this.collections.forEach((collection) => collection.status = false);
         this.pricingMin = 0;
-        this.pricingMax = 100;
+        this.pricingMax = 100000;
         this.router.navigate(['list']);
     }
     applyFilter(category, type) {
@@ -5676,6 +5446,7 @@ class ProductListComponent extends BaseSection {
             category.status = !category.status;
         else if (type == "SORT")
             sorting = category?.target?.value;
+        this.filterBottomSheetRef?.dismiss();
         this.navigateFilter(sorting);
     }
     navigateFilter(sorting) {
@@ -5693,6 +5464,7 @@ class ProductListComponent extends BaseSection {
                 slug: collection.option.replaceAll(" ", "_")
             };
         }).forEach((collection) => selectedCollection += (collection.slug + "+"));
+        this.sortingDialogRef?.close();
         this.router.navigate(['list'], { queryParams: { minPrice: this.pricingMin, maxPrice: this.pricingMax, category: selectedCategory, collections: selectedCollection, sorting: sorting } });
     }
     filterItemList() {
@@ -5700,16 +5472,49 @@ class ProductListComponent extends BaseSection {
         const categoryIds = this.categories.filter((category) => category.status).map((category) => category.id);
         this.restService.getFilteredProduct(collectionIds, categoryIds, this.searchTxt, this.pricingMin, this.pricingMax, this.sortBy ?? "", this.pageNo, this.size).subscribe((response) => {
             this.responseData = response.data.data;
+            this.storageService.getUserCart().then((cartResponse) => {
+                cartResponse.onsuccess = (cartData) => {
+                    this.USER_CART = cartData.target.result;
+                    this.responseData?.forEach((product) => {
+                        this.USER_CART?.forEach((item) => {
+                            if (item.itemId == product.itemId)
+                                product.quantity = item.quantity;
+                        });
+                    });
+                };
+            });
+            this.storageService.getUserWhishlist().then((wishlistResponse) => {
+                wishlistResponse.onsuccess = (whislistData) => {
+                    this.USER_WISHLIST = whislistData.target.result;
+                    this.responseData?.forEach((product) => {
+                        this.USER_WISHLIST?.forEach((item) => {
+                            if (item.itemId == product.itemId)
+                                product.wishlist = true;
+                        });
+                    });
+                };
+            });
             this.totalCount = response.data.count;
         });
     }
+    openFilter(FilterSection) {
+        this.filterBottomSheetRef = this.matBottomSheet.open(FilterSection);
+    }
+    openSorting(SortingSection) {
+        this.sortingDialogRef = this.matDialog.open(SortingSection, {
+            width: '50vw'
+        });
+    }
+    closeDialog() {
+        this.sortingDialogRef?.close();
+    }
     get getTotalPage() {
         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 }], 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    <div class=\"d-flex justify-content-between align-items-center w-100\">\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 justify-content-between\">\r\n      <div class=\"filter-side\">\r\n\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\r\n      </div>\r\n\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    </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>", 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%}@media screen and (max-width: 475px){.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: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i9$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i9$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
+    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$4.Router }, { token: i2$4.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{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: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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: i7.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"] }] }); }
+                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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
@@ -5725,12 +5530,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         HoverDirective,
                         ButtonDirectiveDirective,
-                        MatIcon
-                    ], 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    <div class=\"d-flex justify-content-between align-items-center w-100\">\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 justify-content-between\">\r\n      <div class=\"filter-side\">\r\n\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\r\n      </div>\r\n\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    </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>", 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%}@media screen and (max-width: 475px){.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"] }]
+                        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{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]
-                }] }, { type: EventsService }, { type: RestService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
+                }] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: StorageServiceService }, { type: i5.MatBottomSheet }, { type: i3.MatDialog }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -5746,14 +5553,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class AddressComponent {
-    constructor(ngZone, restService, matDialog, router, storageService
-    // private readonly matDialogRef: MatDialogRef<AddressComponent>
-    ) {
+    constructor(ngZone, restService, matDialog, router, storageService, eventService, matData, matDialogRef) {
         this.ngZone = ngZone;
         this.restService = restService;
         this.matDialog = matDialog;
         this.router = router;
         this.storageService = storageService;
+        this.eventService = eventService;
+        this.matData = matData;
+        this.matDialogRef = matDialogRef;
+        this.selectedAddressIdx = 0;
         this.addressList = [];
         this.address = {
             "receiverName": "",
@@ -5787,7 +5596,6 @@ class AddressComponent {
         };
         this.markerOptions = { draggable: true };
         this.geocoder = new google.maps.Geocoder();
-        this.selectedAddressIdx = -1;
         this.addessType = [
             { key: "HOME", status: false },
             { key: "WORK", status: false },
@@ -5796,6 +5604,10 @@ class AddressComponent {
     }
     ngOnInit() {
         this.getCurrentLocation();
+        if (this.matData) {
+            this.addressList = this.matData.addressList;
+            this.addNewAddress = true;
+        }
     }
     ngOnChanges(changes) {
         this.addressList = this.responseData;
@@ -5805,6 +5617,7 @@ class AddressComponent {
         this.address.addressType = address.key;
     }
     close() {
+        this.matDialogRef.close();
     }
     getCurrentLocation() {
         if (navigator.geolocation) {
@@ -5873,9 +5686,16 @@ class AddressComponent {
                 "gender": userDetails?.gender?.length > 0 ? userDetails?.gender : null
             };
             this.restService.addUserAddress(payload).subscribe((response) => {
+                // if (this.matData) {
+                //   this.matDialogRef.close(this.address);
+                // } else {
                 this.addNewAddress = false;
-                UserInfo.user = userDetails;
-                UserInfo.user.addressDetailsList.push(this.address);
+                this.addressList = [...this.addressList, this.address];
+                if (userDetails) {
+                    userDetails.addressDetailsList.push(this.address);
+                    this.storageService.setUser(userDetails);
+                }
+                // }
             });
         }
         else {
@@ -5890,8 +5710,8 @@ class AddressComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i2$3.Router }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", isCart: "isCart", selectedAddressIdx: "selectedAddressIdx" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i2$4.Router }, { token: StorageServiceService }, { token: EventsService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", isCart: "isCart" }, providers: [], usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list{display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddressComponent, decorators: [{
             type: Component,
@@ -5899,16 +5719,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatIcon,
                         CommonModule,
                         FormsModule,
-                        MatDialogModule
-                    ], template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i2$3.Router }, { type: StorageServiceService }], propDecorators: { responseData: [{
+                        MatDialogModule,
+                        // MatGoogleMapsAutocompleteModule
+                    ], providers: [], template: "<section class=\"address-sec\">\r\n    <div class=\"header\">\r\n        <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n        <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n        <span class=\"add-address\" *ngIf=\"addressList.length && !addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n    </div>\r\n    <ng-container *ngIf=\"!addressList?.length || addNewAddress\">\r\n        <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n            <mat-icon>my_location</mat-icon>\r\n            <span>take my current location</span>\r\n        </p>\r\n        <div class=\"forms d-flex flex-wrap\">\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Name</div>\r\n                <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Mobile</div>\r\n                <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Email</div>\r\n                <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n            </div>\r\n            <div class=\"form-control-full-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Address</div>\r\n                <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n                    (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n                    (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Locality</div>\r\n                <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Landmark</div>\r\n                <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Pincode</div>\r\n                <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">City</div>\r\n                <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">State</div>\r\n                <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n            </div>\r\n            <div class=\"form-control-group\">\r\n                <div class=\"label\" [style.color]=\"data.styles?.background?.accentColor\">Address Type</div>\r\n                <div class=\"d-flex\">\r\n                    <ng-container *ngFor=\"let address of addessType\">\r\n                        <span class=\"address-type\" (click)=\"checkAddressType(address)\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <div class=\"address-list\" *ngIf=\"addressList.length && !addNewAddress\">\r\n        <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n            <div class=\"address\" (click)=\"selectedAddressIdx = idx\" [ngClass]=\"{'selected-address': selectedAddressIdx == idx}\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address?.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"action-btn\" *ngIf=\"!addressList.length || addNewAddress\">\r\n        <button (click)=\"updateAddress()\">Update</button>\r\n    </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.active-address{background-color:#0267c1!important;color:#fff!important}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address-type{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px;cursor:pointer}.address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list{display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.add-address{color:#0267c1;cursor:pointer;font-weight:600}.address-active{background-color:#0267c1;color:#fff}.selected-address{border:2px solid #0267C1!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i2$4.Router }, { type: StorageServiceService }, { type: EventsService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input
             }], isCart: [{
                 type: Input
-            }], selectedAddressIdx: [{
-                type: Input
             }] } });
 
 class CartComponent extends BaseSection {
@@ -5922,46 +5748,134 @@ class CartComponent extends BaseSection {
         this.storageService = storageService;
         this.cookieService = cookieService;
         this.isLoading = false;
-        this.selectedAddressIdx = -1;
+        this.selectedAddress = {
+            selectedAddressIdx: -1
+        };
         this.currentTab = "BAG";
         this.loadingItems = [];
+        this.userDetails = null;
+        this.userCart = null;
+        this.USER_CART_ITEMS = null;
+        this.cartInfo = {
+            orderedItems: null,
+            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            billdetails: {
+                "totalNetValue": 0,
+                "totalGrossValue": 0,
+                "totalTax": 0,
+                "totalOfferedValue": 0,
+                "deliveryCharges": 0
+            },
+            platform: "WEB",
+            cartType: "CART",
+            userDetails: {
+                "userId": "",
+                "userName": "",
+                "mobile": "",
+                "email": "",
+                "deliveryAddress": {
+                    "addressType": "",
+                    "receiverName": "",
+                    "receiverPhone": "",
+                    "countryName": "",
+                    "stateName": "",
+                    "cityName": "",
+                    "localityName": "",
+                    "addressLine1": "",
+                    "addressLine2": "",
+                    "landmark": "",
+                    "zipCode": "",
+                    "geolocation": {
+                        "latitude": 0,
+                        "longitude": 0
+                    },
+                    "stateCode": ""
+                }
+            },
+            totalAmount: 0
+        };
     }
     ngOnInit() {
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
         if (this.storageService.getUser()) {
-            const userDetails = this.storageService.getUser();
-            console.log("user deatils", userDetails);
-            UserInfo.user.addressDetailsList = userDetails.addressDetailsList;
-            UserCart.userDetails = { ...UserCart.userDetails, ...UserInfo.user.contact, userId: userDetails.userId };
-            this.cartService.storeDataToServer().subscribe((response) => {
-                console.log("a: ", UserCart, this.responseData, response);
-                if (response[0].data) {
-                    UserCart.billdetails = response[0].data.billdetails;
-                    UserCart.cartId = response[0].data.cartId;
-                    UserCart.orderedItems = response[0].data.orderedItems;
+            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?.[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.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);
+                            });
+                        };
+                    });
                 }
-                console.log("a: ", UserCart, this.responseData, response);
-                this.responseData = this.storageService.calculateBillingDetails();
             });
         }
         else {
-            console.log("B");
-            this.responseData = this.storageService.calculateBillingDetails();
+            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.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;
+                    this.responseData = this.cartInfo;
+                };
+            });
+            // this.responseData = this.storageService.calculateBillingDetails();
             console.log(this.responseData);
         }
+        console.log(this.responseData);
         this.styles = this.data?.styles;
     }
-    // userDetails: any;
-    // getUserInfo() {
-    //   const userId = "dc915bd4-fa6f-446e-bce2-440b6804af22";
-    //   
-    //   return this.restService.getUserInfo(userId).subscribe((response: any)=> {
-    //     this.userDetails = response.data;
-    //     
-    //   })
-    // }
     proceedToCheckout() {
         if (this.storageService.getUser()) {
             this.currentTab = "ADDRESS";
@@ -5979,15 +5893,25 @@ class CartComponent extends BaseSection {
         }
     }
     proceedToListPage() {
-        // this._eventService.redirectToPage.emit({ redirectTo: '/list'});
         this.router.navigate(['/']);
     }
     removeItem(item) {
         item.quantity = 0;
         this.loadingItems.push(item.itemId);
-        this.cartService.addItemFromCartPage(item).subscribe((response) => {
+        if (this.USER_CART_ITEMS)
+            this.USER_CART_ITEMS = this.USER_CART_ITEMS.filter((product) => product.itemId != item.itemId);
+        this.cartInfo.orderedItems = this.USER_CART_ITEMS;
+        this.responseData = this.cartInfo;
+        this.cartService.addItemFromCartPage(item, this.responseData).subscribe((response) => {
             this.loadingItems = this.loadingItems.filter((idx) => idx != item.itemId);
-            this.responseData = this.storageService.calculateBillingDetails();
+            // this.responseData = this.storageService.calculateBillingDetails();
+            response?.data?.orderedItems.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;
         });
     }
     addToCart(item, type) {
@@ -5998,10 +5922,21 @@ class CartComponent extends BaseSection {
             item.quantity -= 1;
         }
         this.loadingItems.push(item.itemId);
-        this.cartService.addItemFromCartPage(item).subscribe((response) => {
-            this.loadingItems = this.loadingItems.filter((idx) => idx != item.itemId);
-            this.responseData = this.storageService.calculateBillingDetails();
-        });
+        if (item.quantity) {
+            this.cartService.addItemFromCartPage(item, this.responseData).subscribe((response) => {
+                this.loadingItems = this.loadingItems.filter((idx) => idx != item.itemId);
+                response?.data?.orderedItems.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;
+            });
+        }
+        else {
+            this.removeItem(item);
+        }
     }
     proceedToPayment() {
         if (!this.storageService.getUser()) {
@@ -6010,12 +5945,12 @@ class CartComponent extends BaseSection {
         }
         const userDetail = this.storageService.getUser();
         console.log("User Details", userDetail);
-        const address = UserInfo.user.addressDetailsList[0];
-        console.log("a: ", UserCart, this.responseData);
+        console.log("Index : ", this.selectedAddress?.selectedAddressIdx);
+        const address = userDetail?.addressDetailsList[this.selectedAddress?.selectedAddressIdx >= 0 ? this.selectedAddress?.selectedAddressIdx : 0];
         const payload = {
-            "userId": userDetail.userId ?? UserInfo.user.userId,
-            "cartId": UserCart.cartId,
-            "orderAmount": this.responseData.billdetails.totalNetValue,
+            "userId": userDetail.userId,
+            "cartId": localStorage.getItem('cartId'),
+            "orderAmount": Number(Number(this.responseData.totalAmount).toFixed(2)),
             "contactDetails": {
                 "name": address.receiverName,
                 "mobile": address.receiverPhone,
@@ -6031,10 +5966,15 @@ class CartComponent extends BaseSection {
         return this.loadingItems.includes(itemId);
     }
     get getAddressList() {
-        return UserInfo.user ? [...UserInfo.user?.addressDetailsList] : [];
+        return this.userDetails ? [...this.userDetails?.addressDetailsList] : [];
     }
-    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$4.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\" >\r\n    <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *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'}\" (click)=\"currentTab = 'PAYMENT'\">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=\"row item-parent\">\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\">\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)\">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\" [selectedAddressIdx]=\"selectedAddressIdx\"></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\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\" *ngIf=\"responseData?.totalAmount\">\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}}</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: i8.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: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart", "selectedAddressIdx"] }] }); }
+    get isMobile() {
+        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$4.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i2$3.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\" [data]=\"data\"></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) | number: '1.0-2'}}</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) | number: '1.0-2'}}</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 | number: '1.0-2'}}</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) | number: '1.0-2'}}</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: "pipe", type: i2.DecimalPipe, name: "number" }, { 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: i7.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,
@@ -6050,8 +5990,8 @@ 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\" >\r\n    <div class=\"d-flex align-items-center justify-content-center mb-4\" style=\"margin-top: 50px;\" *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'}\" (click)=\"currentTab = 'PAYMENT'\">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=\"row item-parent\">\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\">\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)\">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\" [selectedAddressIdx]=\"selectedAddressIdx\"></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\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n            <div class=\"price-type\">Total Price</div>\r\n            <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\" *ngIf=\"responseData?.totalAmount\">\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}}</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"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$4.CookieService }], propDecorators: { data: [{
+                    ], 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\" [data]=\"data\"></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) | number: '1.0-2'}}</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) | number: '1.0-2'}}</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 | number: '1.0-2'}}</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) | number: '1.0-2'}}</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$4.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$3.CookieService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -6083,7 +6023,7 @@ class CheckoutComponent extends BaseSection {
         this._eventService.placeOrder.emit({ cartData: this.responseData });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", 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=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n          <div class=\"shipping-label heading-large\">Shipping To</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Name</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Mobile Number</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Email</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n                class=\"input-field\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-12 input-parent\">\r\n              <label for=\"\">Address</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Locality/Area</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Landmark</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Pincode</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">City</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">State</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n                placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n          <div class=\"shipping-label\">Delivery Address</div>\r\n          <div class=\"delivery-address\">\r\n            <div style=\"position: absolute;right: 15px;\">\r\n              <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n            </div>\r\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n          <div class=\"shipping-label heading-large lh-normal\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n              <div class=\"price-type\">Total MRP</div>\r\n              <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\" *ngIf=\"responseData?.totalAmount\">\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}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", 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=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n          <div class=\"shipping-label heading-large\">Shipping To</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Name</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Mobile Number</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Email</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n                class=\"input-field\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-12 input-parent\">\r\n              <label for=\"\">Address</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Locality/Area</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Landmark</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Pincode</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">City</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">State</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n                placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n          <div class=\"shipping-label\">Delivery Address</div>\r\n          <div class=\"delivery-address\">\r\n            <div style=\"position: absolute;right: 15px;\">\r\n              <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n            </div>\r\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n          <div class=\"shipping-label heading-large lh-normal\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n              <div class=\"price-type\">Total MRP</div>\r\n              <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\" *ngIf=\"responseData?.totalAmount\">\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}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i7.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"] }] }); }
 }
@@ -6109,24 +6049,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
-class WhislistComponent {
-    constructor(cartService, _eventService) {
+class WhislistComponent extends BaseSection {
+    constructor(cartService, _eventService, storageService, restService) {
+        super();
         this.cartService = cartService;
         this._eventService = _eventService;
+        this.storageService = storageService;
+        this.restService = restService;
+        this.edit = true;
         this.isLoading = false;
+        this.wishlistInfo = {
+            orderedItems: null,
+            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            billdetails: {
+                "totalNetValue": 0,
+                "totalGrossValue": 0,
+                "totalTax": 0,
+                "totalOfferedValue": 0,
+                "deliveryCharges": 0
+            },
+            platform: "WEB",
+            cartType: "WISHLIST",
+            userDetails: {
+                "userId": "",
+                "userName": "",
+                "mobile": "",
+                "email": "",
+                "deliveryAddress": {
+                    "addressType": "",
+                    "receiverName": "",
+                    "receiverPhone": "",
+                    "countryName": "",
+                    "stateName": "",
+                    "cityName": "",
+                    "localityName": "",
+                    "addressLine1": "",
+                    "addressLine2": "",
+                    "landmark": "",
+                    "zipCode": "",
+                    "geolocation": {
+                        "latitude": 0,
+                        "longitude": 0
+                    },
+                    "stateCode": ""
+                }
+            },
+            totalAmount: 0
+        };
     }
     ngOnInit() {
-        this.responseData = UserFavourite;
         this.styles = this.data?.styles;
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
+        if (this.storageService.getUser()) {
+            this.userDetails = this.storageService.getUser();
+            this.wishlistInfo.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, "WISHLIST").subscribe((response) => {
+                const tempUserWishlist = response?.data?.[0]?.orderedItems ?? [];
+                if (response.data?.[0]?.orderedItems?.length) {
+                    this.storageService.addAllProductToWishlist(tempUserWishlist).oncomplete = () => {
+                        console.log(tempUserWishlist);
+                        this.storageService.getUserWhishlist().then((wishtlistResponse) => {
+                            wishtlistResponse.onsuccess = (wishlistData) => {
+                                console.log("wishtlist Data", wishlistData);
+                                this.USER_WISHLIST_ITEMS = wishlistData.target.result;
+                                this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
+                                this.responseData = this.wishlistInfo;
+                                console.log(this.responseData);
+                            };
+                        });
+                    };
+                }
+                else {
+                    this.storageService.getUserWhishlist().then((wishtlistResponse) => {
+                        wishtlistResponse.onsuccess = (wishlistData) => {
+                            console.log("cart Data", wishlistData);
+                            this.USER_WISHLIST_ITEMS = wishlistData.target.result;
+                            this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
+                            this.responseData = this.wishlistInfo;
+                            console.log(this.responseData);
+                            this.restService.addItemToDB(this.responseData).subscribe((response) => { });
+                        };
+                    });
+                }
+            });
+        }
+        else {
+            this.storageService.getUserWhishlist().then((response) => {
+                response.onsuccess = (userWishlistResponse) => {
+                    this.USER_WISHLIST_ITEMS = userWishlistResponse.target.result;
+                    this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
+                    this.responseData = this.wishlistInfo;
+                };
+            });
+        }
     }
     moveToCart(item) {
         // this.cartService.convertFavToCart(item);
     }
     deleteFromWhislist(item) {
-        // this.cartService.removeItemToFavourite(item);
+        this.cartService.removeItemFromFavourite(item);
     }
     addToFav(item, type) {
         if (type == 'ADD')
@@ -6135,8 +6164,8 @@ class WhislistComponent {
             item.quantity -= 1;
         this.cartService.addItemToFavourite(item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div class=\"left-panel\">\r\n          <div class=\"my-bag\">\r\n            My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          \r\n          <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"row item-parent\">\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 item-desc\">\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                            <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                            <span>{{item.quantity}}</span>\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                        <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\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 Whislist 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 Whislist. Go ahead & explore top categories.\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    \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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.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}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.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;width:90px;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}.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}.total-container{height:auto;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}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { 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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", 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=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div class=\"left-panel\">\r\n          <div class=\"my-bag\">\r\n            My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          \r\n          <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"row item-parent\">\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 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\" *ngIf=\"item.quantity\">\r\n                            &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                        </div>\r\n                        <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                            <span>{{item.quantity}}</span>\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                        </div>\r\n                        <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Cart</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\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 Whislist 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 Whislist. 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<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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.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}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.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;width:90px;min-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}.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}.total-container{height:auto;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}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, decorators: [{
             type: Component,
@@ -6149,8 +6178,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         AnimationDirective,
                         ContentFitDirective,
                         HoverDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div class=\"left-panel\">\r\n          <div class=\"my-bag\">\r\n            My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          \r\n          <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"row item-parent\">\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 item-desc\">\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                            <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                            <span>{{item.quantity}}</span>\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                        <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\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 Whislist 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 Whislist. Go ahead & explore top categories.\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    \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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.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}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.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;width:90px;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}.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}.total-container{height:auto;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}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"] }]
-        }], ctorParameters: () => [{ type: CartService }, { type: EventsService }], propDecorators: { responseData: [{
+                    ], 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=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div class=\"left-panel\">\r\n          <div class=\"my-bag\">\r\n            My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n          </div>\r\n          \r\n          <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"row item-parent\">\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 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\" *ngIf=\"item.quantity\">\r\n                            &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                        </div>\r\n                        <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                            <span>{{item.quantity}}</span>\r\n                            <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                        </div>\r\n                        <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Cart</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\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 Whislist 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 Whislist. 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<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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.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}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.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;width:90px;min-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}.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}.total-container{height:auto;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}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"] }]
+        }], ctorParameters: () => [{ type: CartService }, { type: EventsService }, { type: StorageServiceService }, { type: RestService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -6173,13 +6202,43 @@ class OrderDetailsComponent {
         ];
     }
     ngOnInit() {
-        console.log(this.responseData);
+        this.styles = this.data?.styles;
+        console.log(this.orderDetailData);
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
     }
+    get getCardBGColor() {
+        return this.getComplementColor(this.styles?.background.color ?? "#00000");
+    }
+    get isMobile() {
+        return window.innerWidth <= 475;
+    }
+    getSupportingColor(bgColor) {
+        return this.getComplementColor(bgColor);
+    }
+    getComplementColor(hexColor) {
+        if (hexColor.length <= 4)
+            hexColor = this.convertHEX(hexColor);
+        hexColor = hexColor.replace(/^#/, '');
+        let r = parseInt(hexColor.substring(0, 2), 16);
+        let g = parseInt(hexColor.substring(2, 4), 16);
+        let b = parseInt(hexColor.substring(4, 6), 16);
+        r = 255 - r;
+        g = 255 - g;
+        b = 255 - b;
+        let compHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        return compHex.toUpperCase();
+    }
+    convertHEX(hexColor) {
+        hexColor = hexColor.replace(/^#/, '');
+        let color = "#";
+        for (let i = 0; i < 3; i++)
+            color += (hexColor[i] + hexColor[i + 1]);
+        return color;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n        <div class=\"left\" style=\"width: 60%;\">\r\n            <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n                <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n                    <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>1 X  &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                            <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 25%; mt-2\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Name:</span>\r\n                <span class=\"fw-bold pl-2\">Shruti</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\">940495483938</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Address:</span>\r\n                <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n            </div>\r\n        </div>\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: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", orderDetailData: "orderDetailData" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop\">\r\n                <mat-icon style=\"cursor: pointer;\" class=\"onlyMobile\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\" fs-6\">{{ orderDetailData?.createdTimeStamp | date }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | &#x20b9; {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 \">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X  &#x20b9; <span class=\"fw-bold\">{{item.price}}</span></span>\r\n                            <span> &#x20b9; <span class=\"fw-bold\">{{item.price * item.quantity}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.userDetails?.userName}}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.userDetails?.mobile }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.userDetails?.deliveryAddress?.addressLine1 }}</span>\r\n            </div>\r\n            <!-- <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n            </div> -->\r\n        </div>\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: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, decorators: [{
             type: Component,
@@ -6188,7 +6247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoComponentModule,
                         TimelineModule,
                         MatIcon
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n        <div class=\"left\" style=\"width: 60%;\">\r\n            <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n                <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n                    <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>1 X  &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                            <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 25%; mt-2\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Name:</span>\r\n                <span class=\"fw-bold pl-2\">Shruti</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\">940495483938</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Address:</span>\r\n                <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n            </div>\r\n        </div>\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: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" [style.flexDirection]=\"isMobile ? 'column' : 'row'\" [style.width.vw]=\"isMobile ? '100' : '65'\" style=\"margin: auto;\">\r\n        <div class=\"left\" [style.width.%]=\"isMobile ? '90' : '70'\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop\">\r\n                <mat-icon style=\"cursor: pointer;\" class=\"onlyMobile\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\" fs-6\">{{ orderDetailData?.createdTimeStamp | date }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | &#x20b9; {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 \">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X  &#x20b9; <span class=\"fw-bold\">{{item.price}}</span></span>\r\n                            <span> &#x20b9; <span class=\"fw-bold\">{{item.price * item.quantity}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 28%;\" [style.width.%]=\"isMobile ? '90' : '28'\" [style.background]=\"getCardBGColor\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px;\" [style.color]=\"getSupportingColor(getCardBGColor)\">Name:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{orderDetailData?.userDetails?.userName}}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.userDetails?.mobile }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Address:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{ orderDetailData?.userDetails?.deliveryAddress?.addressLine1 }}</span>\r\n            </div>\r\n            <!-- <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\" [style.color]=\"getSupportingColor(getCardBGColor)\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\" [style.color]=\"getSupportingColor(getCardBGColor)\">Manual Payment</span>\r\n            </div> -->\r\n        </div>\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: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -6199,14 +6258,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
+            }], orderDetailData: [{
+                type: Input,
+                args: ["orderDetailData"]
+            }] } });
+
+class SpacingHorizontalDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.positionLayoutChangeCheck();
+    }
+    ngOnChanges() {
+        this.changeHorizontalSpacing();
+    }
+    ngOnDestroy() {
+        if (this.positionLayoutSubscription) {
+            this.positionLayoutSubscription.unsubscribe();
+        }
+    }
+    changeHorizontalSpacing() {
+        this.el.nativeElement.style.setProperty("padding-left", window.innerWidth <= 475 ? '1rem' : SPACINGALIGN[this.layout?.spacingHorizontal]);
+        this.el.nativeElement.style.setProperty("padding-right", window.innerWidth <= 475 ? '1rem' : SPACINGALIGN[this.layout?.spacingHorizontal]);
+        if (window.innerWidth <= 475) {
+            this.el.nativeElement.style.setProperty("padding-top", '0rem');
+            this.el.nativeElement.style.setProperty("padding-bottom", '0rem');
+        }
+    }
+    positionLayoutChangeCheck() {
+        this.positionLayoutSubscription = this.eventService.postionLayoutChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.id) {
+                this.layout = res.data;
+                this.changeHorizontalSpacing();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SpacingHorizontalDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: SpacingHorizontalDirective, isStandalone: true, selector: "[spacingHorizontal]", inputs: { layout: ["spacingHorizontal", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SpacingHorizontalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[spacingHorizontal]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EventsService }], propDecorators: { layout: [{
+                type: Input,
+                args: ['spacingHorizontal']
             }] } });
 
-class UserProfileComponent {
-    constructor(router, _eventService, restService) {
+class UserProfileComponent extends BaseSection {
+    constructor(router, _eventService, restService, storageService, matDialog) {
+        super();
         this.router = router;
         this._eventService = _eventService;
         this.restService = restService;
-        this.isLoading = true;
+        this.storageService = storageService;
+        this.matDialog = matDialog;
+        this.isLoading = false;
         this.selectedSidePanelTab = "Orders";
         this.userDetails = null;
         this.addressList = [];
@@ -6220,16 +6329,41 @@ class UserProfileComponent {
         this.orderList = [];
     }
     ngOnInit() {
-        // if (this.responseData?.userDetails) {
-        this.userDetails = UserInfo.user;
-        // this.tabs = this.responseData.tabs;
-        // this.orderList = this.responseData.orders;
-        // }
-        this.button = this.data?.action?.buttons?.[0];
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
+            if (!this.isLoading) {
+                this.userDetails = this.storageService.getUser();
+                this.button = this.data?.action?.buttons?.[0];
+                this.styles = this.data?.styles;
+                this.content = this.data?.content;
+                this.getUserOrderDetails();
+            }
+        });
+    }
+    getUserOrderDetails() {
+        const payload = {
+            "businessId": localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
+            "userId": this.userDetails?.userId,
+            "orderStatus": null,
+            "platform": null,
+            "pageNo": 0,
+            "pageSize": 100
+        };
+        this.restService.getUserOrders(payload).subscribe((response) => {
+            this.orderList = response.data;
+        });
+    }
+    get getProductWidth() {
+        return window.innerWidth > 475 ? (window.innerWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4)) - 1) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
+    }
+    getSupportingColor(bgColor) {
+        return this.getComplementColor(bgColor);
+    }
+    getUserInfo() {
+        this.restService.getUserInfo("edb9142c-5e03-402f-aac5-59f1a1f7367a").subscribe((response) => {
+            this.userDetails = response.data;
+            this.getUserOrderDetails();
         });
-        // this.getUserInfo();
     }
     goToPanel(panel) {
         this.selectedSidePanelTab = panel.value;
@@ -6242,11 +6376,37 @@ class UserProfileComponent {
             this.selectedSidePanelTab = '';
         }
     }
-    goToDetails(order) {
+    goToOrderDetails(order) {
+        this.selectedSidePanelTab = 'Orders_Details';
+        this.orderDetailsData = order;
+    }
+    addNewAddress() {
+        this.matDialog.open(AddressComponent, {
+            height: 'fit-content',
+            width: '35vw',
+            data: { addressList: this.userDetails?.addressDetailsList }
+        }).afterClosed().subscribe((response) => {
+            if (response)
+                this.userDetails?.addressDetailsList.push(response);
+        });
     }
     goToHome() {
         this.router.navigate(['/']);
     }
+    editAddress(index) {
+    }
+    deleteAddress(index) {
+        if (this.userDetails)
+            this.userDetails.addressDetailsList = this.userDetails?.addressDetailsList.filter((_, idx) => idx != index);
+        this.saveProfile();
+    }
+    saveProfile() {
+        const payload = {
+            userId: this.userDetails?.userId,
+            addressDetailsList: this.userDetails?.addressDetailsList
+        };
+        this.restService.updateProfile(payload).subscribe((response) => { });
+    }
     selectTab(tab) {
         this.tabs.forEach((t) => t.status = (tab.value == t.value));
     }
@@ -6260,8 +6420,34 @@ class UserProfileComponent {
     get isMobile() {
         return window.innerWidth <= 475;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of addressList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n                        <span class=\"address-type\">{{address.type}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.address}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.phone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i8.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    get getUserProfile() {
+        return this.userDetails?.profilePic ? this.userDetails.profilePic : (this.userDetails?.gender == "MALE" ? 'https://img.icons8.com/?size=100&id=108296&format=png&color=000000' : 'https://img.icons8.com/?size=100&id=108295&format=png&color=000000assets/female-icon.svg');
+    }
+    get getCardBGColor() {
+        return this.getComplementColor(this.styles?.background.color ?? "#00000");
+    }
+    getComplementColor(hexColor) {
+        if (hexColor.length <= 4)
+            hexColor = this.convertHEX(hexColor);
+        hexColor = hexColor.replace(/^#/, '');
+        let r = parseInt(hexColor.substring(0, 2), 16);
+        let g = parseInt(hexColor.substring(2, 4), 16);
+        let b = parseInt(hexColor.substring(4, 6), 16);
+        r = 255 - r;
+        g = 255 - g;
+        b = 255 - b;
+        let compHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        return compHex.toUpperCase();
+    }
+    convertHEX(hexColor) {
+        hexColor = hexColor.replace(/^#/, '');
+        let color = "#";
+        for (let i = 0; i < 3; i++)
+            color += (hexColor[i] + hexColor[i + 1]);
+        return color;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$4.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [style.color]=\"styles?.background?.accentColor\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n            <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\">\r\n                    <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                    <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span>{{ order.billDetails.totalNetValue }}</span></span>\r\n            <span class=\"font-weight-normal\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:fit-content}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "orderDetailData"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -6274,11 +6460,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         HoverDirective,
                         OrderDetailsComponent,
-                        NgxSkeletonLoaderModule
-                    ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of addressList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n                        <span class=\"address-type\">{{address.type}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.address}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.phone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }], propDecorators: { responseData: [{
-                type: Input
-            }], data: [{
+                        NgxSkeletonLoaderModule,
+                        BackgroundDirective,
+                        SpacingHorizontalDirective,
+                        ColorDirective,
+                        BorderDirective
+                    ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [style.color]=\"styles?.background?.accentColor\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n            <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\">\r\n                    <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                    <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span>{{ order.billDetails.totalNetValue }}</span></span>\r\n            <span class=\"font-weight-normal\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\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>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:fit-content}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
+        }], ctorParameters: () => [{ type: i2$4.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: i3.MatDialog }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -6288,9 +6476,35 @@ 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"];
+        this.businessId = json?.["businessId"];
         this.pgOrderId = json?.["pgOrderId"];
         this.orderedItems = json?.["orderedItems"];
         this.billdetails = json?.["billdetails"];
@@ -6383,5 +6597,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, 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, RemoveCarouselDirective, SPACING$1 as SPACING, 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