simpo-component-library 1.4.4 → 1.4.6

package/fesm2022/simpo-component-library.mjs

@@ -1,13 +1,13 @@
 import * as i2 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Injectable, Directive, HostListener, NgModule, Output, ViewChild, PLATFORM_ID, Inject } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, HostListener, NgModule, Output, ViewChild, Optional, Inject, PLATFORM_ID } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i2$2 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -22,6 +22,9 @@ import * as mapboxgl from 'mapbox-gl';
 import * as i8 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSelectModule } from '@angular/material/select';
+import * as i2$7 from 'primeng/timeline';
+import { TimelineModule } from 'primeng/timeline';
+import * as i3 from 'primeng/api';
 
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3055,6 +3058,7 @@ class RestService {
         let subIndustryId = JSON.parse(localStorage.getItem("bDetails") ?? "{}")?.subIndustryId;
         if (!subIndustryId)
             subIndustryId = JSON.parse(localStorage.getItem("websiteData") ?? "{}")?.subIndustryId;
+        subIndustryId = "1eecee8d-efba-62f8-b7b5-b9742fceb17f";
         return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
     }
     getProductDetails(productId = null) {
@@ -3113,10 +3117,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
 
 class AuthenticateUserComponent {
-    constructor(
-    // @Optional() @Inject(MAT_DIALOG_DATA) public matData: any,
-    restService) {
+    constructor(matData, restService, dialogRef) {
+        this.matData = matData;
         this.restService = restService;
+        this.dialogRef = dialogRef;
         // @Input() index? : number;
         // @Input() edit? : boolean;
         // @Input() delete? : boolean;
@@ -3126,8 +3130,8 @@ class AuthenticateUserComponent {
         this.countryCode = "91";
     }
     ngOnInit() {
-        // if (this.matData)
-        //   this.data = this.matData;
+        if (this.matData)
+            this.data = this.matData;
         this.styles = this.data?.styles;
     }
     move(event, idx) {
@@ -3137,7 +3141,7 @@ class AuthenticateUserComponent {
         document.getElementById("otp_" + (idx + 1))?.focus();
     }
     close() {
-        // this.dialogRef.close();
+        this.dialogRef.close();
     }
     goBack() {
         this.otpString = '';
@@ -3151,7 +3155,8 @@ class AuthenticateUserComponent {
     verifyOTP() {
         this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
             // localStorage.setItem("userId", response.userId);
-            // this.dialogRef.close();
+            if (this.dialogRef)
+                this.dialogRef.close();
         });
     }
     resendOTP() {
@@ -3160,8 +3165,8 @@ class AuthenticateUserComponent {
     get isMobile() {
         return window.innerWidth <= 475;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n    <ng-container [ngSwitch]=\"screen\">\r\n        <section style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n            *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Welcome</h2>\r\n            <p class=\"text-center\">Log or Signup in to your account</p>\r\n            <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n            <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\">Use email\r\n                    instead</div>\r\n            </div>\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n        </section>\r\n        <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Verify OTP</h2>\r\n            <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                }}</p>\r\n            <div class=\"otpContainer\">\r\n                <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                    <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\"\r\n                    (click)=\"resendOTP()\">Resend code</div>\r\n            </div>\r\n\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n            <div class=\"back-btn\" (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n        </section>\r\n    </ng-container>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n    <ng-container [ngSwitch]=\"screen\">\r\n        <section style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n            *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Welcome</h2>\r\n            <p class=\"text-center\">Log or Signup in to your account</p>\r\n            <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n            <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\">Use email\r\n                    instead</div>\r\n            </div>\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n        </section>\r\n        <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Verify OTP</h2>\r\n            <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                }}</p>\r\n            <div class=\"otpContainer\">\r\n                <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                    <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\"\r\n                    (click)=\"resendOTP()\">Resend code</div>\r\n            </div>\r\n\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n            <div class=\"back-btn\" (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n        </section>\r\n    </ng-container>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
             type: Component,
@@ -3170,8 +3175,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         MatIcon,
                         CommonModule,
                         ButtonDirectiveDirective,
-                    ], template: "<div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n    <ng-container [ngSwitch]=\"screen\">\r\n        <section style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n            *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Welcome</h2>\r\n            <p class=\"text-center\">Log or Signup in to your account</p>\r\n            <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n            <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\">Use email\r\n                    instead</div>\r\n            </div>\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n        </section>\r\n        <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Verify OTP</h2>\r\n            <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                }}</p>\r\n            <div class=\"otpContainer\">\r\n                <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                    <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\"\r\n                    (click)=\"resendOTP()\">Resend code</div>\r\n            </div>\r\n\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n            <div class=\"back-btn\" (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n        </section>\r\n    </ng-container>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }], propDecorators: { data: [{
+                    ], template: "<div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n    <ng-container [ngSwitch]=\"screen\">\r\n        <section style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n            *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Welcome</h2>\r\n            <p class=\"text-center\">Log or Signup in to your account</p>\r\n            <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n            <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\">Use email\r\n                    instead</div>\r\n            </div>\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n        </section>\r\n        <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n            class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n            <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n            <h2 class=\"text-center\">Verify OTP</h2>\r\n            <p class=\"text-center\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n                }}</p>\r\n            <div class=\"otpContainer\">\r\n                <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                    <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n                    [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n                <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles.background?.accentColor\"\r\n                    (click)=\"resendOTP()\">Resend code</div>\r\n            </div>\r\n\r\n            <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                <mat-icon>close</mat-icon>\r\n            </div>\r\n            <div class=\"back-btn\" (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n        </section>\r\n    </ng-container>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: RestService }, { type: i2$2.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -4704,7 +4716,7 @@ class FeaturedProductsComponent extends BaseSection {
         return this.cartService.getIsItemPresent(product.itemId, 'FAVOURITE');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" >\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              &#8377;\r\n              {{product.price.sellingPrice}}\r\n            </div>\r\n            <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n              <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                <span>{{product.quantity}}</span>\r\n                <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" >\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              &#8377;\r\n              {{product.price.sellingPrice}}\r\n            </div>\r\n            <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n              <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                <span>{{product.quantity}}</span>\r\n                <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: 
                 //directive
                 MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
@@ -4725,7 +4737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         ButtonDirectiveDirective
-                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" >\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              &#8377;\r\n              {{product.price.sellingPrice}}\r\n            </div>\r\n            <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n              <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                <span>{{product.quantity}}</span>\r\n                <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
+                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" >\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n              &#8377;\r\n              {{product.price.sellingPrice}}\r\n            </div>\r\n            <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n              <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n              <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n                <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                <span>{{product.quantity}}</span>\r\n                <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -5247,7 +5259,7 @@ class WhislistComponent {
         this.cartService.addItemToFavourite(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"left-panel\">\r\n        <div class=\"my-bag\">\r\n          My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n        </div>\r\n        \r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"cart-items\">\r\n                <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img class=\"product-img\" [src]=\"item.imgUrl.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100 item-desc\">\r\n                    <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                        &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative itemPrice\" style=\"margin-left: auto;\">\r\n                    <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                    <div>\r\n                    <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                    </div>\r\n                </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  \r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your Whislist is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  \r\n  </section>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:50%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.itemPrice{width:35%}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"left-panel\">\r\n        <div class=\"my-bag\">\r\n          My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n        </div>\r\n        \r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"cart-items\">\r\n                <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img class=\"product-img\" [src]=\"item.imgUrl.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100 item-desc\">\r\n                    <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                        &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative itemPrice\" style=\"margin-left: auto;\">\r\n                    <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                    <div>\r\n                    <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                    </div>\r\n                </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  \r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your Whislist is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  \r\n  </section>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:50%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: WhislistComponent, decorators: [{
             type: Component,
@@ -5260,7 +5272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         AnimationDirective,
                         ContentFitDirective,
                         HoverDirective
-                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"left-panel\">\r\n        <div class=\"my-bag\">\r\n          My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n        </div>\r\n        \r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"cart-items\">\r\n                <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img class=\"product-img\" [src]=\"item.imgUrl.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100 item-desc\">\r\n                    <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                        &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative itemPrice\" style=\"margin-left: auto;\">\r\n                    <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                    <div>\r\n                    <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                    </div>\r\n                </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  \r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your Whislist is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  \r\n  </section>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:50%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.itemPrice{width:35%}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"] }]
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n    <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"left-panel\">\r\n        <div class=\"my-bag\">\r\n          My Whislist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n        </div>\r\n        \r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"cart-items\">\r\n                <div class=\"row item-parent\">\r\n                <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img class=\"product-img\" [src]=\"item.imgUrl.imgUrl\" alt=\"\">\r\n                </div>\r\n                <div class=\"col-md-6 h-100 item-desc\">\r\n                    <div class=\"lh-23\">\r\n                    <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                    <div class=\"price-with-tax\">\r\n                        &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                    </div>\r\n                    <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-md-4 position-relative itemPrice\" style=\"margin-left: auto;\">\r\n                    <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n                    <div>\r\n                    <mat-icon class=\"cart-item\" (click)=\"moveToCart(item)\">add_shopping_cart</mat-icon>\r\n                    <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n                    </div>\r\n                </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n            </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  \r\n    <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n      <div>\r\n        <div class=\"cart-image\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n        </div>\r\n        <div class=\"cart-text\">\r\n          <div class=\"heading-medium d-flex justify-content-center\">\r\n            Your Whislist is empty\r\n          </div>\r\n          <div class=\"description d-flex mt-4\">\r\n            Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  \r\n  </section>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:50%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:50%}.itemPrice{width:25%}}\n"] }]
         }], ctorParameters: () => [{ type: CartService }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -5273,15 +5285,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
-class UserProfileComponent {
+class OrderDetailsComponent {
     constructor() {
-        this.selectedSidePanelTab = "Orders";
+        this.orderTimiline = [
+            { icon: "widgets", name: "Order Placed", desc: "Your order is successful placed track your order" },
+            { icon: "local_shipping", name: "To be Shipped", desc: "Your order is successful placed track your order" },
+            { icon: "inbox", name: "To be Delivered", desc: "Your order is successful placed track your order" },
+        ];
+    }
+    ngOnInit() {
+        console.log(this.responseData);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OrderDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n    <div class=\"left\" style=\"width: 60%;\">\r\n        <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n            <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n            <span>Order Details</span>\r\n        </h1>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n            <div class=\"d-flex flex-column\">\r\n                <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n                <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n            </div>\r\n            <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"timeline\">\r\n            <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                    <div class=\"d-flex\">\r\n                        <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                        <div class=\"d-flex flex-column ml-2\">\r\n                            <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                            <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </p-timeline>\r\n        </div>\r\n        <hr />\r\n        <div>\r\n            <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n                <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                    <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n                    <span class=\"fs-6\">Size: XS</span>\r\n                    <div class=\"d-flex justify-content-between fs-6\">\r\n                        <span>1 X  &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                        <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <hr />\r\n        <div class=\"fs-6\">\r\n            <div class=\"d-flex justify-content-between my-2\">\r\n                <span class=\"fw-normal\">Item Total</span>\r\n                <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n            </div>\r\n            \r\n            <div class=\"d-flex justify-content-between my-2\">\r\n                <span>Delivery</span>\r\n                <span>FREE</span>\r\n            </div>\r\n            \r\n            <div class=\"d-flex justify-content-between my-2\">\r\n                <span class=\"fw-normal\">Grand Total</span>\r\n                <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"right\" style=\"width: 25%; mt-2\">\r\n        <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Name:</span>\r\n            <span class=\"fw-bold pl-2\">Shruti</span>\r\n        </div>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Phone:</span>\r\n            <span class=\"fw-bold pl-2\">940495483938</span>\r\n        </div>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Address:</span>\r\n            <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n        </div>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Payment:</span>\r\n            <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n        </div>\r\n    </div>\r\n</section>", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i2$7.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i3.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: "17.2.3", ngImport: i0, type: OrderDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-order-details', standalone: true, imports: [
+                        CommonModule,
+                        TimelineModule,
+                        MatIcon
+                    ], template: "<section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n    <div class=\"left\" style=\"width: 60%;\">\r\n        <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n            <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n            <span>Order Details</span>\r\n        </h1>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n            <div class=\"d-flex flex-column\">\r\n                <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n                <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n            </div>\r\n            <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"timeline\">\r\n            <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                    <div class=\"d-flex\">\r\n                        <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n                        <div class=\"d-flex flex-column ml-2\">\r\n                            <span class=\"fw-normal fs-6\">{{ event.name }}</span>    \r\n                            <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </p-timeline>\r\n        </div>\r\n        <hr />\r\n        <div>\r\n            <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n                <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n                <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n                    <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n                    <span class=\"fs-6\">Size: XS</span>\r\n                    <div class=\"d-flex justify-content-between fs-6\">\r\n                        <span>1 X  &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                        <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <hr />\r\n        <div class=\"fs-6\">\r\n            <div class=\"d-flex justify-content-between my-2\">\r\n                <span class=\"fw-normal\">Item Total</span>\r\n                <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n            </div>\r\n            \r\n            <div class=\"d-flex justify-content-between my-2\">\r\n                <span>Delivery</span>\r\n                <span>FREE</span>\r\n            </div>\r\n            \r\n            <div class=\"d-flex justify-content-between my-2\">\r\n                <span class=\"fw-normal\">Grand Total</span>\r\n                <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"right\" style=\"width: 25%; mt-2\">\r\n        <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Name:</span>\r\n            <span class=\"fw-bold pl-2\">Shruti</span>\r\n        </div>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Phone:</span>\r\n            <span class=\"fw-bold pl-2\">940495483938</span>\r\n        </div>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Address:</span>\r\n            <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n        </div>\r\n        <div class=\"my-2 fs-6\">\r\n            <span style=\"margin-right: 10px\">Payment:</span>\r\n            <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n        </div>\r\n    </div>\r\n</section>", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"] }]
+        }], propDecorators: { responseData: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class UserProfileComponent {
+    constructor(router) {
+        this.router = router;
+        this.selectedSidePanelTab = "Orders_Details";
         this.userDetails = null;
+        this.addressList = [{
+                name: "Srutika",
+                type: "Home",
+                address: "the 27 building, Javabheri, Hyderabad",
+                phone: "989383943"
+            }];
         this.sidePanelList = [
-            { value: "Orders", icon: "accessibility", status: true, label: "Heading" },
-            { value: "Address", icon: "location_on", status: false, label: "Heading" },
-            { value: "Account Details", icon: "supervised_user_circle", status: false, label: "Heading" },
-            { value: "Logout", icon: "transit_enterexit", status: false, label: "Heading" }
+            { value: "Orders", icon: "accessibility", status: true, label: "Heading", url: 'order' },
+            { value: "Address", icon: "location_on", status: false, label: "Heading", url: 'address' },
+            { value: "Account Details", icon: "supervised_user_circle", status: false, label: "Heading", url: 'account' },
+            { value: "Logout", icon: "transit_enterexit", status: false, label: "Heading", url: '' }
         ];
         this.tabs = [];
         this.orderList = [];
@@ -5292,8 +5344,23 @@ class UserProfileComponent {
             this.tabs = this.responseData.tabs;
             this.orderList = this.responseData.orders;
         }
-        // if (this.responseData?.itemList)
-        //   this.item
+        this.button = this.data.action.buttons[0];
+    }
+    goToPanel(panel) {
+        this.selectedSidePanelTab = panel.value;
+    }
+    goBack() {
+        if (this.selectedSidePanelTab == '') {
+            this.router.navigate(['/']);
+        }
+        else {
+            this.selectedSidePanelTab = '';
+        }
+    }
+    goToDetails(order) {
+    }
+    goToHome() {
+        this.router.navigate(['/']);
     }
     selectTab(tab) {
         this.tabs.forEach((t) => t.status = (tab.value == t.value));
@@ -5305,16 +5372,25 @@ class UserProfileComponent {
     get getUserDetails() {
         return this.userDetails;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: UserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex\" style=\"width: 80%; margin: auto;\">\r\n    <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n            <img [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n            <div>\r\n                <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n                <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.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?.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</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 contenteditable=\"true\">My Orders</h1>\r\n    <div class=\"d-flex my-3\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <h1>My Address</h1>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1>My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1>Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\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</ng-template>", 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}\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.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"] }] }); }
+    get isMobile() {
+        return window.innerWidth <= 475;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex\" style=\"width: 80%; margin: auto;\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.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?.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?.profilePic\" 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?.userName}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.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?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of addressList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n                        <span class=\"address-type\">{{address.type}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.address}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.phone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-user-profile', standalone: true, imports: [
                         CommonModule,
-                        MatIcon
-                    ], template: "<section class=\"d-flex\" style=\"width: 80%; margin: auto;\">\r\n    <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n            <img [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n            <div>\r\n                <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n                <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.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?.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</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 contenteditable=\"true\">My Orders</h1>\r\n    <div class=\"d-flex my-3\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <h1>My Address</h1>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1>My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1>Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\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</ng-template>", 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}\n"] }]
-        }], propDecorators: { responseData: [{
+                        MatIcon,
+                        ButtonDirectiveDirective,
+                        SimpoComponentModule,
+                        AnimationDirective,
+                        ContentFitDirective,
+                        HoverDirective,
+                        OrderDetailsComponent
+                    ], template: "<section class=\"d-flex\" style=\"width: 80%; margin: auto;\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n                    <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.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?.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?.profilePic\" 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?.userName}}</h4>\r\n                            <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.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?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <mat-icon>{{tab.icon}}</mat-icon>\r\n                                <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </section>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <div class=\"order\" *ngFor=\"let order of orderList\">\r\n            <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n        <h1>My Address</h1>\r\n        <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngFor=\"let address of addressList\">\r\n            <div class=\"address\">\r\n                <div class=\"address-left\">\r\n                    <div class=\"top\">\r\n                        <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n                        <span class=\"address-type\">{{address.type}}</span>\r\n                    </div>\r\n                    <div class=\"address-det\">{{address.address}}</div>\r\n                    <div class=\"phone\">\r\n                        <span>Phone:</span>\r\n                        <span class=\"address-phone\">{{address.phone}}</span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"address-right\"></div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n        <div class=\"top\">\r\n            <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.date | date}}</span>\r\n            <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n            <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
+        }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input