simpo-component-library 1.4.19 → 1.4.20

package/fesm2022/simpo-component-library.mjs

@@ -11,11 +11,12 @@ import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
-import { map } from 'rxjs';
+import { map, forkJoin } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import * as i2$2 from '@angular/router';
-import * as i2$3 from '@angular/material/snack-bar';
-import * as i2$4 from 'ngx-skeleton-loader';
+import * as i2$3 from 'ngx-cookie-service';
+import * as i2$4 from '@angular/material/snack-bar';
+import * as i2$5 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as mapboxgl from 'mapbox-gl';
 import { v1 } from 'uuid';
@@ -24,7 +25,7 @@ import { NgxImageZoomModule } from 'ngx-image-zoom';
 import * as i8$1 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSelectModule } from '@angular/material/select';
-import * as i2$5 from 'primeng/timeline';
+import * as i2$6 from 'primeng/timeline';
 import { TimelineModule } from 'primeng/timeline';
 import * as i3$1 from 'primeng/api';
 
@@ -3201,7 +3202,7 @@ class UserBasicInfoComponent {
             contact: {
                 countryCode: "91",
                 email: this.email,
-                name: this.firstName + " " + this.middleName + (this.middleName?.length > 0 ? " " : "") + this.lastName
+                name: this.firstName + " " + (this.middleName?.length > 0 ? this.middleName + " " : "") + this.lastName
             }
         };
         this.restService.updateProfile(payload).subscribe((response) => {
@@ -3224,8 +3225,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i3.MatDialogRef }] });
 
 class StorageServiceService {
-    constructor(eventService) {
+    constructor(eventService, cookieService, restService) {
         this.eventService = eventService;
+        this.cookieService = cookieService;
+        this.restService = restService;
         this.databaseName = "USER";
         this.databaseVersion = 1;
         this.cartCollectionName = "USER_CART";
@@ -3263,6 +3266,34 @@ class StorageServiceService {
             UserCart.orderedItems = await response.target.result;
         };
     }
+    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;
+    }
+    updateAllData() {
+        const userDetails = this.getUser();
+        if (userDetails) {
+            forkJoin([
+                this.restService.getUserItems(userDetails.userId, "CART"),
+                this.restService.getUserItems(userDetails.userId, "WISHLIST")
+            ]).subscribe(([cartResponse]) => {
+                // cartResponse.data.forEach((item: OrderedItems)=> {
+                //   storageService.addProductToCart(item);
+                // })
+                this.storeDataToJSON();
+            });
+        }
+    }
     // CART SERVICE
     async getUserCart() {
         const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
@@ -3299,14 +3330,16 @@ class StorageServiceService {
     }
     // USER SERVICE
     addUser(user) {
-        localStorage.setItem("user", JSON.stringify(user));
+        this.cookieService.set("user", JSON.stringify(user ?? "{}"));
         return user;
     }
     getUser() {
-        const user = localStorage.getItem("user") ?? "{}";
-        return JSON.parse(user);
+        try {
+            return JSON.parse(this.cookieService.get("user"));
+        }
+        catch (exception) { }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: StorageServiceService, deps: [{ token: EventsService }], 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: [{
@@ -3314,7 +3347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: EventsService }] });
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.CookieService }, { type: RestService }] });
 
 class AuthenticateUserComponent {
     constructor(matData, restService, router, matDialog, storageService, dialogRef) {
@@ -3359,6 +3392,8 @@ class AuthenticateUserComponent {
         this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
             // localStorage.setItem("userId", response.userId);
             const userDetails = this.storageService.addUser(response.data);
+            UserInfo.user = userDetails;
+            this.storageService.updateAllData();
             if (userDetails.contact?.name?.length > 0) {
                 if (this.dialogRef)
                     this.dialogRef.close();
@@ -3668,7 +3703,7 @@ class ContactUsComponent extends BaseSection {
     canShowContactField(field) {
         return Object.hasOwn(field, "status") ? field.status : true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, 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 *ngIf=\"content?.image?.showImage === false\" 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\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n            <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n              <div class=\"d-flex flex-column col-5 pt-5\">\r\n                <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n                </div>\r\n              </div>\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <div class=\"w-100\">\r\n                      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n                    </div>\r\n                    <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n      [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n        [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n        [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n        <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n          <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\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=\"500\"\r\n            loading=\"lazy\" />\r\n        </div>\r\n        <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n              [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n            <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n              <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n                [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n            </ng-container>\r\n            <div class=\"w-100\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n                }}</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</div>\r\n", styles: [".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}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { 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: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
@@ -3704,7 +3739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
         }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i2$3.MatSnackBar }], propDecorators: { data: [{
+                }] }, { type: i2$4.MatSnackBar }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -3719,7 +3754,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: i2$4.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: i2$5.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,
@@ -4127,7 +4162,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: i2$4.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: i2$5.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,
@@ -4778,39 +4813,51 @@ class OrderedItems {
 }
 
 class CartService {
-    constructor(storageService) {
+    constructor(storageService, restService) {
         this.storageService = storageService;
+        this.restService = restService;
     }
     addItemToCart(product) {
-        const orderedItem = this.objectMapper(product);
-        let productIdx = -1;
-        UserCart.orderedItems.forEach((item, idx) => productIdx = (item.itemId == product.itemId) ? idx : -1);
-        if (productIdx >= 0) {
-            UserCart.orderedItems[productIdx].quantity = product.quantity;
+        if (product.quantity) {
+            const orderedItem = this.objectMapper(product);
+            let productIdx = -1;
+            UserCart.orderedItems.forEach((item, idx) => productIdx = (item.itemId == product.itemId) ? idx : -1);
+            if (productIdx >= 0) {
+                UserCart.orderedItems[productIdx].quantity = product.quantity;
+            }
+            else {
+                UserCart.orderedItems.push(orderedItem);
+            }
+            console.log(UserCart);
+            this.storageService.addProductToCart(orderedItem);
         }
         else {
-            UserCart.orderedItems.push(orderedItem);
+            // remove item from cart
+            this.removeItemFromCart(product);
         }
-        console.log(UserCart);
-        this.storageService.addProductToCart(orderedItem);
     }
     addItemToFavourite(product) {
-        const orderedItem = this.objectMapper(product);
-        let productIdx = -1;
-        UserFavourite.orderedItems.forEach((item, idx) => productIdx = (item.itemId == product.itemId) ? idx : -1);
-        if (productIdx >= 0) {
-            UserFavourite.orderedItems[productIdx].quantity = product.quantity;
+        if (product.quantity) {
+            const orderedItem = this.objectMapper(product);
+            let productIdx = -1;
+            UserFavourite.orderedItems.forEach((item, idx) => productIdx = (item.itemId == product.itemId) ? idx : -1);
+            if (productIdx >= 0) {
+                UserFavourite.orderedItems[productIdx].quantity = product.quantity;
+            }
+            else {
+                UserFavourite.orderedItems.push(orderedItem);
+            }
+            this.storageService.addProductToWishlist(orderedItem);
         }
         else {
-            UserFavourite.orderedItems.push(orderedItem);
+            this.removeItemFromFavourite(product);
         }
-        this.storageService.addProductToWishlist(orderedItem);
     }
     removeItemFromFavourite(product) {
         const index = this.getItemIdxJSON(product.itemId, 'FAVOURITE');
         if (index >= 0) {
             const item = UserFavourite.orderedItems.splice(index, 1)[0];
-            UserCart.orderedItems.push(item);
+            // UserFavourites.orderedItems.push(item as never);
             this.storageService.removeProductFromWishlist(product.itemId);
         }
     }
@@ -4818,7 +4865,7 @@ class CartService {
         const index = this.getItemIdxJSON(product.itemId, 'CART');
         if (index >= 0) {
             const item = UserCart.orderedItems.splice(index, 1)[0];
-            UserCart.orderedItems.push(item);
+            // UserCart.orderedItems.push(item as never);
             this.storageService.removeProductFromCart(product.itemId);
         }
     }
@@ -4870,12 +4917,13 @@ class CartService {
         return null;
     }
     objectMapper(product) {
-        debugger;
         return new OrderedItems(product);
     }
     storeDataToServer() {
-        // this.restService.addItemToDB(UserCart).subscribe((response)=> {});
-        // this.restService.addItemToDB(UserFavourites).subscribe((response)=> {});
+        return forkJoin([
+            this.restService.addItemToDB(UserCart),
+            this.restService.addItemToDB(UserFavourite)
+        ]);
     }
     storeDBToJSON() {
         // this.storageService.getUserCart().then((response)=> {
@@ -4895,7 +4943,7 @@ class CartService {
         //   UserFavourites.totalAmount = response.totalAmount;
         // })
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartService, deps: [{ token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartService, decorators: [{
@@ -4903,7 +4951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: StorageServiceService }] });
+        }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
 
 class FeaturedProductsComponent extends BaseSection {
     constructor(platformId, _eventService, restService, router, cartService) {
@@ -4971,7 +5019,7 @@ class FeaturedProductsComponent extends BaseSection {
         // this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
     }
     isItemFav(product) {
-        return this.cartService.getItemIdxJSON(product.itemId, 'FAVOURITE');
+        return this.cartService.getItemIdxJSON(product.itemId, 'FAVOURITE') > -1;
     }
     togglePreviewImage(product, idx) {
         const element = document.getElementById('preview_' + idx);
@@ -5163,7 +5211,7 @@ class ProductDescComponent extends BaseSection {
         this.cartService.removeItemFromFavourite(this.responseData);
     }
     get isItemAsFavorite() {
-        return false;
+        return this.cartService.getItemIdxJSON(this.responseData?.itemId, "FAVOURITE") > -1;
     }
     get getFeatureProductData() {
         return this.data;
@@ -5561,21 +5609,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class CartComponent extends BaseSection {
-    constructor(_eventService, cartService, router, restService, matDialog) {
+    constructor(_eventService, cartService, router, restService, matDialog, storageService) {
         super();
         this._eventService = _eventService;
         this.cartService = cartService;
         this.router = router;
         this.restService = restService;
         this.matDialog = matDialog;
+        this.storageService = storageService;
         this.selectedAddressIdx = -1;
         this.currentTab = "BAG";
     }
     ngOnInit() {
-        // this.cartService.storeDBToJSON();
-        this.responseData = UserCart;
-        console.log("a: ", UserCart, this.responseData);
-        this.styles = this.data?.styles;
+        this.cartService.storeDataToServer().subscribe((response) => {
+            this.responseData = this.storageService.calculateBillingDetails();
+            console.log("a: ", UserCart, this.responseData);
+            this.styles = this.data?.styles;
+        });
     }
     // userDetails: any;
     // getUserInfo() {
@@ -5603,11 +5653,13 @@ class CartComponent extends BaseSection {
         }
     }
     proceedToListPage() {
-        this._eventService.redirectToPage.emit({ redirectTo: '/list' });
+        // this._eventService.redirectToPage.emit({ redirectTo: '/list'});
+        this.router.navigate(['/']);
     }
     removeItem(item) {
         item.quantity = 0;
         this.cartService.addItemToCart(item);
+        this.responseData = this.storageService.calculateBillingDetails();
     }
     addToCart(item, type) {
         if (type == 'ADD') {
@@ -5617,6 +5669,7 @@ class CartComponent extends BaseSection {
             item.quantity -= 1;
         }
         this.cartService.addItemToCart(item);
+        this.responseData = this.storageService.calculateBillingDetails();
     }
     proceedToPayment() {
         const address = UserInfo.user.addressDetailsList[this.selectedAddressIdx];
@@ -5637,7 +5690,7 @@ class CartComponent extends BaseSection {
     get getAddressList() {
         return UserInfo.user ? [...UserInfo.user?.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$2.Router }, { token: RestService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }], 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: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n  <div class=\"d-flex align-items-center justify-content-center mb-2\">\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                    <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                  </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", 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;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;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}.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}.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: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "isCart", "selectedAddressIdx"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, decorators: [{
@@ -5655,7 +5708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         HoverDirective,
                         AddressComponent,
                     ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n  <div class=\"d-flex align-items-center justify-content-center mb-2\">\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                    <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                  </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", 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;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;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}.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}.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$2.Router }, { type: RestService }, { type: i3.MatDialog }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -5769,7 +5822,7 @@ class OrderDetailsComponent {
         console.log(this.responseData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [], 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: "<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>", 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: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i2$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i3$1.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" }, ngImport: i0, template: "<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>", 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: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i2$6.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i3$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,