simpo-component-library 1.4.75 → 1.4.76

package/fesm2022/simpo-component-library.mjs

@@ -199,6 +199,13 @@ var BANNERALIGNMENT;
     BANNERALIGNMENT["top"] = "flex-lg-column";
     BANNERALIGNMENT["bottom"] = "flex-lg-column-reverse";
 })(BANNERALIGNMENT || (BANNERALIGNMENT = {}));
+var SPACINGALIGN;
+(function (SPACINGALIGN) {
+    SPACINGALIGN["large"] = "8rem";
+    SPACINGALIGN["medium"] = "6rem";
+    SPACINGALIGN["small"] = "2rem";
+    SPACINGALIGN["none"] = "0rem";
+})(SPACINGALIGN || (SPACINGALIGN = {}));
 var BANNERHALIGN;
 (function (BANNERHALIGN) {
     BANNERHALIGN["left"] = "justify-content-start text-start";
@@ -1566,11 +1573,26 @@ class BorderDirective {
         this.eventService.borderChangeChecks.subscribe((res) => {
             if (this.el.nativeElement.id === res.id) {
                 if (res.data?.display) {
-                    this.el.nativeElement.style.setProperty('border-bottom', res.data.thickness + 'px' +
-                        ' ' +
-                        res.data.type +
-                        ' ' +
-                        res.data.color);
+                    this.el.nativeElement.style.setProperty("border-radius", (res.data?.radius ?? 0) + "px");
+                    if (res.data?.direction?.includes("ALL")) {
+                        res.data.direction = ["LEFT", "RIGHT", "TOP", "BOTTOM"];
+                    }
+                    if (res.data?.direction?.length) {
+                        for (let idx = 0; idx < (res.data?.direction?.length ?? 0); idx++) {
+                            this.el.nativeElement.style.setProperty(`border-` + res.data?.direction?.[idx]?.toLowerCase(), res.data.thickness + 'px' +
+                                ' ' +
+                                res.data.type +
+                                ' ' +
+                                res.data.color);
+                        }
+                    }
+                    else {
+                        this.el.nativeElement.style.setProperty(`border-bottom`, res.data.thickness + 'px' +
+                            ' ' +
+                            res.data.type +
+                            ' ' +
+                            res.data.color);
+                    }
                 }
                 else {
                     this.el.nativeElement.style.setProperty('border-bottom', 'none');
@@ -1580,11 +1602,26 @@ class BorderDirective {
     }
     ngOnChanges() {
         if (this.borderData?.display) {
-            this.el.nativeElement.style.setProperty('border-bottom', this.borderData.thickness + 'px' +
-                ' ' +
-                this.borderData.type +
-                ' ' +
-                this.borderData.color);
+            if (this.borderData?.direction?.includes("ALL")) {
+                this.borderData.direction = ["LEFT", "RIGHT", "TOP", "BOTTOM"];
+            }
+            this.el.nativeElement.style.setProperty("border-radius", (this.borderData?.radius ?? 0) + "px");
+            if (this.borderData?.direction?.length) {
+                for (let idx = 0; idx < (this.borderData?.direction?.length ?? 0); idx++) {
+                    this.el.nativeElement.style.setProperty(`border-` + this.borderData?.direction?.[idx].toLowerCase(), this.borderData.thickness + 'px' +
+                        ' ' +
+                        this.borderData.type +
+                        ' ' +
+                        this.borderData.color);
+                }
+            }
+            else {
+                this.el.nativeElement.style.setProperty(`border-bottom`, this.borderData.thickness + 'px' +
+                    ' ' +
+                    this.borderData.type +
+                    ' ' +
+                    this.borderData.color);
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: BorderDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -3096,6 +3133,9 @@ class RestService {
     updateProfile(payload) {
         return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, payload);
     }
+    getUserOrders(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/order/user/order`, payload);
+    }
     toggleItemCartToFav() {
     }
     // Payment
@@ -3409,7 +3449,6 @@ class AuthenticateUserComponent {
     }
     verifyOTP() {
         this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
-            this.storageService.setUser(response.data);
             const userDetails = this.storageService.setUser(response.data);
             this.storageService.updateAllData();
             if (userDetails.contact?.name?.length > 0) {
@@ -4784,7 +4823,7 @@ class OrderedItems {
         this.itemId = json?.["itemId"] ?? "";
         this.businessId = json?.["businessId"];
         this.itemName = json?.["name"];
-        this.brandName = json?.["brandName"];
+        this.businessName = json?.["businessName"];
         this.imgUrl = json?.["itemImages"]?.[0]?.["imgUrl"];
         this.price = json?.["price"]?.["value"];
         this.itemTax = json?.["price"]?.["taxAmount"];
@@ -5543,9 +5582,7 @@ class AddressComponent {
         this.matDialogRef.close();
     }
     getCurrentLocation() {
-        debugger;
         if (navigator.geolocation) {
-            debugger;
             navigator.geolocation.getCurrentPosition((values) => {
                 this.latitute = values.coords.latitude;
                 this.longitute = values.coords.longitude;
@@ -6070,13 +6107,40 @@ class OrderDetailsComponent {
         ];
     }
     ngOnInit() {
-        console.log(this.responseData);
+        this.styles = this.data?.styles;
+        console.log(this.orderDetailData);
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
     }
+    get getCardBGColor() {
+        return this.getComplementColor(this.styles?.background.color ?? "#00000");
+    }
+    get isMobile() {
+        return window.innerWidth <= 475;
+    }
+    getComplementColor(hexColor) {
+        if (hexColor.length <= 4)
+            hexColor = this.convertHEX(hexColor);
+        hexColor = hexColor.replace(/^#/, '');
+        let r = parseInt(hexColor.substring(0, 2), 16);
+        let g = parseInt(hexColor.substring(2, 4), 16);
+        let b = parseInt(hexColor.substring(4, 6), 16);
+        r = 255 - r;
+        g = 255 - g;
+        b = 255 - b;
+        let compHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        return compHex.toUpperCase();
+    }
+    convertHEX(hexColor) {
+        hexColor = hexColor.replace(/^#/, '');
+        let color = "#";
+        for (let i = 0; i < 3; i++)
+            color += (hexColor[i] + hexColor[i + 1]);
+        return color;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n        <div class=\"left\" style=\"width: 60%;\">\r\n            <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n                <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n                    <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>1 X  &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                            <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 25%; mt-2\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Name:</span>\r\n                <span class=\"fw-bold pl-2\">Shruti</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\">940495483938</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Address:</span>\r\n                <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", orderDetailData: "orderDetailData" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" style=\"width: 65vw; margin: auto;\">\r\n        <div class=\"left\" style=\"width: 70%;\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop\">\r\n                <mat-icon style=\"cursor: pointer;\" class=\"onlyMobile\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\" fs-6\">{{ orderDetailData?.createdTimeStamp | date }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | &#x20b9; {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 \">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X  &#x20b9; <span class=\"fw-bold\">{{item.price}}</span></span>\r\n                            <span> &#x20b9; <span class=\"fw-bold\">{{item.price * item.quantity}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 28%;\" [style.background]=\"getCardBGColor\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px;\">Name:</span>\r\n                <span class=\"fw-bold pl-2\">{{orderDetailData?.userDetails?.userName}}</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\">{{ orderDetailData?.userDetails?.mobile }}</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\">{{ orderDetailData?.userDetails?.deliveryAddress?.addressLine1 }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media screen and (max-width: 475px){.onlyDesktop{display:none}.onlyMobile{display:block}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i4.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OrderDetailsComponent, decorators: [{
             type: Component,
@@ -6085,7 +6149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SimpoComponentModule,
                         TimelineModule,
                         MatIcon
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n        <div class=\"left\" style=\"width: 60%;\">\r\n            <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n                <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n                    <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>1 X  &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                            <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 25%; mt-2\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Name:</span>\r\n                <span class=\"fw-bold pl-2\">Shruti</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Phone:</span>\r\n                <span class=\"fw-bold pl-2\">940495483938</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Address:</span>\r\n                <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <section class=\"d-flex justify-content-between\" style=\"width: 65vw; margin: auto;\">\r\n        <div class=\"left\" style=\"width: 70%;\">\r\n            <h1 class=\"fs-3 fw-normal mb-3 d-flex align-items-center onlyDesktop\">\r\n                <mat-icon style=\"cursor: pointer;\" class=\"onlyMobile\">keyboard_arrow_left</mat-icon>\r\n                <span>Order Details</span>\r\n            </h1>\r\n            <div class=\"d-flex justify-content-between align-items-end\">\r\n                <div class=\"d-flex flex-column\">\r\n                    <span class=\"fs-5\">Order {{ orderDetailData?.orderNum }}</span>\r\n                    <span class=\" fs-6\">{{ orderDetailData?.createdTimeStamp | date }}, {{ orderDetailData?.brandOrderDetails?.[0]?.orderedItems.length }} items | &#x20b9; {{orderDetailData?.brandOrderDetails?.[0]?.billDetails?.totalGrossValue}}</span>\r\n                </div>\r\n                <span class=\"fw-bold fs-5\">{{orderDetailData?.brandOrderDetails?.[0]?.businessName | titlecase}}</span>\r\n            </div>\r\n            <hr />\r\n            <div class=\"timeline\">\r\n                <p-timeline [value]=\"orderTimiline\">\r\n                    <ng-template pTemplate=\"content\" let-event>\r\n                        <div class=\"d-flex\">\r\n                            <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                            <div class=\"d-flex flex-column ml-2\">\r\n                                <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                                <div class=\"fs-6 \">{{event.desc}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-template>\r\n                </p-timeline>\r\n            </div>\r\n            <hr />\r\n            <div>\r\n                <div *ngFor=\"let item of orderDetailData?.brandOrderDetails?.[0]?.orderedItems\" class=\"d-flex mb-2\" style=\"gap: 10px; width: 100%;\">\r\n                    <img [src]=\"item.imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                    <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                        <span class=\"fw-bold fs-6\">{{item.itemName}}</span>\r\n                        <span class=\"fs-6\">Size: XS</span>\r\n                        <div class=\"d-flex justify-content-between fs-6\">\r\n                            <span>{{item.quantity}} X  &#x20b9; <span class=\"fw-bold\">{{item.price}}</span></span>\r\n                            <span> &#x20b9; <span class=\"fw-bold\">{{item.price * item.quantity}}</span></span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <hr />\r\n            <div class=\"fs-6\">\r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Item Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span>Delivery</span>\r\n                    <span>FREE</span>\r\n                </div>\r\n                \r\n                <div class=\"d-flex justify-content-between my-2\">\r\n                    <span class=\"fw-normal\">Grand Total</span>\r\n                    <span class=\"fw-bold\">&#x20b9; {{orderDetailData?.billDetails?.totalNetValue | number:'1.0-2'}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"right\" style=\"width: 28%;\" [style.background]=\"getCardBGColor\">\r\n            <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px;\">Name:</span>\r\n                <span class=\"fw-bold pl-2\">{{orderDetailData?.userDetails?.userName}}</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\">{{ orderDetailData?.userDetails?.mobile }}</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\">{{ orderDetailData?.userDetails?.deliveryAddress?.addressLine1 }}</span>\r\n            </div>\r\n            <div class=\"my-2 fs-6\">\r\n                <span style=\"margin-right: 10px\">Payment:</span>\r\n                <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n            </div>\r\n        </div>\r\n    </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>\r\n", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}@media screen and (max-width: 475px){.onlyDesktop{display:none}.onlyMobile{display:block}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -6096,6 +6160,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
+            }], orderDetailData: [{
+                type: Input,
+                args: ["orderDetailData"]
+            }] } });
+
+class SpacingHorizontalDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.positionLayoutChangeCheck();
+    }
+    ngOnChanges() {
+        this.changeHorizontalSpacing();
+    }
+    ngOnDestroy() {
+        if (this.positionLayoutSubscription) {
+            this.positionLayoutSubscription.unsubscribe();
+        }
+    }
+    changeHorizontalSpacing() {
+        debugger;
+        this.el.nativeElement.style.setProperty("padding-left", SPACINGALIGN[this.layout?.spacingHorizontal]);
+        this.el.nativeElement.style.setProperty("padding-right", SPACINGALIGN[this.layout?.spacingHorizontal]);
+    }
+    positionLayoutChangeCheck() {
+        this.positionLayoutSubscription = this.eventService.postionLayoutChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.id) {
+                this.layout = res.data;
+                this.changeHorizontalSpacing();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SpacingHorizontalDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: SpacingHorizontalDirective, isStandalone: true, selector: "[spacingHorizontal]", inputs: { layout: ["spacingHorizontal", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SpacingHorizontalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[spacingHorizontal]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EventsService }], propDecorators: { layout: [{
+                type: Input,
+                args: ['spacingHorizontal']
             }] } });
 
 class UserProfileComponent {
@@ -6125,14 +6233,35 @@ class UserProfileComponent {
         // this.orderList = this.responseData.orders;
         // }
         this.button = this.data?.action?.buttons?.[0];
+        this.styles = this.data?.styles;
+        this.content = this.data?.content;
+        this.getUserInfo();
+        this.getUserOrderDetails();
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
         });
-        // this.getUserInfo();
+    }
+    getUserOrderDetails() {
+        const payload = {
+            "businessId": "1ef5932a-b295-6734-9aa1-3156c8bef764",
+            "userId": "edb9142c-5e03-402f-aac5-59f1a1f7367a",
+            "orderStatus": null,
+            "platform": null,
+            "pageNo": 0,
+            "pageSize": 100
+        };
+        this.restService.getUserOrders(payload).subscribe((response) => {
+            this.orderList = response.data;
+        });
+    }
+    get getProductWidth() {
+        debugger;
+        return window.innerWidth > 475 ? (window.innerWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4)) - 1) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
     }
     getUserInfo() {
         this.restService.getUserInfo("ada107e9-a38b-46b4-b065-b7f060c3fa15").subscribe((response) => {
             this.userDetails = response.data;
+            this.getUserOrderDetails();
         });
     }
     goToPanel(panel) {
@@ -6146,7 +6275,9 @@ class UserProfileComponent {
             this.selectedSidePanelTab = '';
         }
     }
-    goToDetails(order) {
+    goToOrderDetails(order) {
+        this.selectedSidePanelTab = 'Orders_Details';
+        this.orderDetailsData = order;
     }
     addNewAddress() {
         this.matDialog.open(AddressComponent, {
@@ -6177,8 +6308,31 @@ class UserProfileComponent {
     get getUserProfile() {
         return this.userDetails?.profilePic ? this.userDetails.profilePic : (this.userDetails?.gender == "MALE" ? 'https://img.icons8.com/?size=100&id=108296&format=png&color=000000' : 'https://img.icons8.com/?size=100&id=108295&format=png&color=000000assets/female-icon.svg');
     }
+    get getCardBGColor() {
+        return this.getComplementColor(this.styles?.background.color ?? "#00000");
+    }
+    getComplementColor(hexColor) {
+        if (hexColor.length <= 4)
+            hexColor = this.convertHEX(hexColor);
+        hexColor = hexColor.replace(/^#/, '');
+        let r = parseInt(hexColor.substring(0, 2), 16);
+        let g = parseInt(hexColor.substring(2, 4), 16);
+        let b = parseInt(hexColor.substring(4, 6), 16);
+        r = 255 - r;
+        g = 255 - g;
+        b = 255 - b;
+        let compHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        return compHex.toUpperCase();
+    }
+    convertHEX(hexColor) {
+        hexColor = hexColor.replace(/^#/, '');
+        let color = "#";
+        for (let i = 0; i < 3; i++)
+            color += (hexColor[i] + hexColor[i + 1]);
+        return color;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : '85'\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart\">\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 Order list is empty\r\n                    </div>\r\n                    <div class=\"description d-flex justify-content-center\">\r\n                      Looks like you have not ordered anything to from us. Go ahead & explore top categories.\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"margin: auto; height: 90vh; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [simpoColor]=\"styles?.background?.accentColor\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList\">\r\n            <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span>{{ order.billDetails.totalNetValue }}</span></span>\r\n            <span class=\"font-weight-normal\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "orderDetailData"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -6191,8 +6345,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ContentFitDirective,
                         HoverDirective,
                         OrderDetailsComponent,
-                        NgxSkeletonLoaderModule
-                    ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : '85'\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart\">\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 Order list is empty\r\n                    </div>\r\n                    <div class=\"description d-flex justify-content-center\">\r\n                      Looks like you have not ordered anything to from us. Go ahead & explore top categories.\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
+                        NgxSkeletonLoaderModule,
+                        BackgroundDirective,
+                        SpacingHorizontalDirective,
+                        ColorDirective,
+                        BorderDirective
+                    ], template: "<section *ngIf=\"!isLoading\" class=\"d-flex\" style=\"margin: auto; height: 90vh; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [simpoColor]=\"styles?.background?.accentColor\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.backgroundColor]=\"getCardBGColor\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserProfile\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <mat-icon>{{tab.icon}}</mat-icon>\r\n                        <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of userDetails?.addressDetailsList\">\r\n            <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                        <span class=\"address-type\">{{address.addressType}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.addressLine1}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span>{{ order.billDetails.totalNetValue }}</span></span>\r\n            <span class=\"font-weight-normal\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n  </ngx-skeleton-loader>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: i3.MatDialog }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -6301,5 +6459,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, Cart, CartComponent, Category, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, Cart, CartComponent, Category, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, SPACINGALIGN, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map