simpo-component-library 1.6.143 → 1.6.146

package/fesm2022/simpo-component-library.mjs

@@ -3781,7 +3781,6 @@ class AuthenticateUserComponent extends BaseSection {
         this.countryCode = null;
         this.Password = null;
         this.confirmPass = null;
-        this.newPassword = null;
         this.businessId = localStorage.getItem("bId");
         // const businessId: string = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? '';
         this.buttonLoading = false;
@@ -4104,7 +4103,7 @@ class AuthenticateUserComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i7.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 14px;\"\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\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    {{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n                    \r\n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n                    \r\n                </div>\r\n                <div class=\"mobile_email\">\r\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n                </div>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n                \r\n                <form [formGroup]=\"passwordValidation\">\r\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            \r\n                </div>\r\n                \r\n\r\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n                    \r\n                    <div class=\"field\">\r\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                    </div>\r\n                </div> -->\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n                    WhatsApp</p>\r\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n                    Email</p> -->\r\n\r\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <span>OTP Sent</span>\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    \r\n                </div>\r\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" \r\n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <!-- <span>Email Sent</span> -->\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </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                </form>\r\n                \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\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number {{ countryCode }}{{ mobile\r\n                    }} and E-mail</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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n\r\n            \r\n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                \r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <div>\r\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\">CREATE AN ACCOUNT</h2>\r\n                </div>\r\n                <div class=\"pass-signin\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> Mobile Number <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> Email <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <form [formGroup]=\"passwordValidation\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> New Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput [(ngModel)]=\"newPassword\" formControlName=\"passwordValid\">\r\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> Confirm Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password-1\">\r\n                        <div>\r\n                            Already have an account?\r\n                        </div>\r\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"signin\" (click)=\"createPassword()\">\r\n                    <button class=\"signin-button\" [disabled]=\"passwordValidation.invalid || confirm || emailValid\" >Signup</button>\r\n                </div>\r\n                \r\n            </section>  \r\n        </ng-container> \r\n    </div>\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 onlyDesktop\" (click)=\"goBack()\">\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n    </div>\r\n    \r\n\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.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 only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 14px;\"\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\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    {{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n                    \r\n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n                    \r\n                </div>\r\n                <div class=\"mobile_email\">\r\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n                </div>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n                \r\n                <form [formGroup]=\"passwordValidation\">\r\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            \r\n                </div>\r\n                \r\n\r\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n                    \r\n                    <div class=\"field\">\r\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                    </div>\r\n                </div> -->\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n                    WhatsApp</p>\r\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n                    Email</p> -->\r\n\r\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <span>OTP Sent</span>\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    \r\n                </div>\r\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" \r\n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <!-- <span>Email Sent</span> -->\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </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                </form>\r\n                \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\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number {{ countryCode }}{{ mobile\r\n                    }} and E-mail</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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n\r\n            \r\n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                \r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <div>\r\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\r\n                </div>\r\n                <div class=\"pass-signin\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <form [formGroup]=\"passwordValidation\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\r\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password-1\">\r\n                        <div>\r\n                            Already have an account?\r\n                        </div>\r\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"signin\" (click)=\"createPassword()\">\r\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\r\n                </div>\r\n                \r\n            </section>  \r\n        </ng-container> \r\n    </div>\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 onlyDesktop\" (click)=\"goBack()\">\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n    </div>\r\n    \r\n\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.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 only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: 
                 // FormGroup,
                 // FormBuilder,
                 // Validators,
@@ -4127,7 +4126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         // FormBuilder,
                         // Validators,
                         ReactiveFormsModule,
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 14px;\"\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\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    {{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n                    \r\n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n                    \r\n                </div>\r\n                <div class=\"mobile_email\">\r\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n                </div>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n                \r\n                <form [formGroup]=\"passwordValidation\">\r\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            \r\n                </div>\r\n                \r\n\r\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n                    \r\n                    <div class=\"field\">\r\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                    </div>\r\n                </div> -->\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n                    WhatsApp</p>\r\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n                    Email</p> -->\r\n\r\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <span>OTP Sent</span>\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    \r\n                </div>\r\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" \r\n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <!-- <span>Email Sent</span> -->\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </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                </form>\r\n                \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\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number {{ countryCode }}{{ mobile\r\n                    }} and E-mail</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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n\r\n            \r\n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                \r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <div>\r\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\">CREATE AN ACCOUNT</h2>\r\n                </div>\r\n                <div class=\"pass-signin\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> Mobile Number <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> Email <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <form [formGroup]=\"passwordValidation\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> New Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput [(ngModel)]=\"newPassword\" formControlName=\"passwordValid\">\r\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                    <div class=\"password\">\r\n                        <div class=\"label\"> Confirm Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password-1\">\r\n                        <div>\r\n                            Already have an account?\r\n                        </div>\r\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"signin\" (click)=\"createPassword()\">\r\n                    <button class=\"signin-button\" [disabled]=\"passwordValidation.invalid || confirm || emailValid\" >Signup</button>\r\n                </div>\r\n                \r\n            </section>  \r\n        </ng-container> \r\n    </div>\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 onlyDesktop\" (click)=\"goBack()\">\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n    </div>\r\n    \r\n\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.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 only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 14px;\"\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\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    {{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n                    \r\n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n                    \r\n                </div>\r\n                <div class=\"mobile_email\">\r\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n                </div>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n                \r\n                <form [formGroup]=\"passwordValidation\">\r\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            \r\n                </div>\r\n                \r\n\r\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n                    \r\n                    <div class=\"field\">\r\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                    </div>\r\n                </div> -->\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n                    WhatsApp</p>\r\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n                    Email</p> -->\r\n\r\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <span>OTP Sent</span>\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    \r\n                </div>\r\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" \r\n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <!-- <span>Email Sent</span> -->\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </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                </form>\r\n                \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\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number {{ countryCode }}{{ mobile\r\n                    }} and E-mail</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\" [(ngModel)]=\"otpData[idx]\"\r\n                            (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\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</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 onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n\r\n            \r\n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                \r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <div>\r\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\r\n                </div>\r\n                <div class=\"pass-signin\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <form [formGroup]=\"passwordValidation\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\r\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password-1\">\r\n                        <div>\r\n                            Already have an account?\r\n                        </div>\r\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"signin\" (click)=\"createPassword()\">\r\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\r\n                </div>\r\n                \r\n            </section>  \r\n        </ng-container> \r\n    </div>\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 onlyDesktop\" (click)=\"goBack()\">\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n    </div>\r\n    \r\n\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.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 only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4414,7 +4413,7 @@ class AddressComponent extends BaseSection {
             }
             else {
                 this.matDialog.open(AuthenticateUserComponent, {
-                    height: '50vh',
+                    height: 'fit-content',
                     width: '35vw',
                     data: this.data
                 });
@@ -4877,7 +4876,8 @@ class CartComponent extends BaseSection {
                         "mobile": this.userDetails?.contact.mobile,
                         "email": this.userDetails?.contact.email,
                     };
-                    this.cartInfo["cartId"] = localStorage.getItem("cartId");
+                    if (localStorage.getItem("cartId"))
+                        this.cartInfo["cartId"] = localStorage.getItem("cartId");
                     console.log("Response : ", response);
                     if (response)
                         this.proceedToCheckout();
@@ -4885,7 +4885,7 @@ class CartComponent extends BaseSection {
             }
             else {
                 this.matDialog.open(AuthenticateUserComponent, {
-                    height: '50vh',
+                    height: 'fit-content',
                     width: '35vw',
                     data: this.data
                 }).afterClosed().subscribe((response) => {
@@ -4896,7 +4896,8 @@ class CartComponent extends BaseSection {
                         "mobile": this.userDetails?.contact.mobile,
                         "email": this.userDetails?.contact.email,
                     };
-                    this.cartInfo["cartId"] = localStorage.getItem("cartId");
+                    if (localStorage.getItem("cartId"))
+                        this.cartInfo["cartId"] = localStorage.getItem("cartId");
                     console.log("Response : ", response);
                     if (response)
                         this.proceedToCheckout();
@@ -5178,7 +5179,7 @@ class CartComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i5.MatBottomSheet }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <span class=\"fw-bold\">{{ varient }} : </span>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                          <span class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</span>\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"my-bag\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            \r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\r\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n              </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\r\n            <!-- <div class=\"description d-flex mt-4\">\r\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { 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: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                           {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"my-bag\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            \r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\r\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n              </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\r\n            <!-- <div class=\"description d-flex mt-4\">\r\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { 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: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "customClass", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
@@ -5200,7 +5201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         AddressComponent,
                         ToastModule,
                         CustomerReviewComponent
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <span class=\"fw-bold\">{{ varient }} : </span>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                          <span class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</span>\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"my-bag\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            \r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\r\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n              </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\r\n            <!-- <div class=\"description d-flex mt-4\">\r\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                           {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                          <span>{{item.quantity}}</span>\r\n                          <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"my-bag\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            \r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\r\n              <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n                <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n                  [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n              </div> -->\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\r\n            <!-- <div class=\"description d-flex mt-4\">\r\n              Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n      </div>\r\n      <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n      </div>\r\n\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i7.MessageService }, { type: i5.MatBottomSheet }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5259,7 +5260,7 @@ class NavbarSectionComponent {
             }
             else {
                 this.matDialog.open(AuthenticateUserComponent, {
-                    height: '50vh',
+                    height: 'fit-content',
                     width: '35vw',
                     data: this.data
                 });
@@ -10108,11 +10109,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class AuthenticationRequiredComponent {
-    constructor(restService, router, messageService, storageService) {
+    constructor(restService, router, messageService, storageService, matDialog, dialogRef, bottomsheetRef) {
         this.restService = restService;
         this.router = router;
         this.messageService = messageService;
         this.storageService = storageService;
+        this.matDialog = matDialog;
+        this.dialogRef = dialogRef;
+        this.bottomsheetRef = bottomsheetRef;
         this.email = "";
         this.mobile = "";
         this.otp = "";
@@ -10121,8 +10125,17 @@ class AuthenticationRequiredComponent {
         this.userName = "";
         this.buttonLoading = false;
         this.businessId = localStorage.getItem("bId");
+        this.loginType = "OTP";
     }
     login() {
+        if (this.loginType == "OTP") {
+            this.verifyOTP();
+        }
+        else {
+            this.verifyPassword();
+        }
+    }
+    verifyPassword() {
         const payload = {
             businessId: this.businessId,
             email: this.email,
@@ -10137,6 +10150,52 @@ class AuthenticationRequiredComponent {
             this.messageService.add({ severity: 'error', summary: 'Invalid credentials', detail: 'Please enter valid credentials' });
         });
     }
+    verifyOTP() {
+        const deviceInfo = {
+            firebaseToken: localStorage.getItem("fbToken") ?? ""
+        };
+        this.buttonLoading = true;
+        this.restService.verifyOTP(this.mobile ?? "", this.otp, deviceInfo).subscribe((response) => {
+            const userDetails = this.storageService.setUser(response.data);
+            this.storageService.updateAllData();
+            if (this.dialogRef)
+                this.dialogRef.close("SUCCESS");
+            if (this.bottomsheetRef)
+                this.bottomsheetRef.dismiss("SUCCESS");
+            this.buttonLoading = false;
+            Swal.fire({
+                icon: "success",
+                title: "Hurray",
+                text: "Your account successfully created",
+                showCancelButton: !(userDetails.contact?.name?.length > 0),
+                confirmButtonText: "I loved it",
+                cancelButtonText: "Fill other basic details",
+                cancelButtonColor: "#928c8c",
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    if (this.dialogRef)
+                        this.dialogRef.close("SUCCESS");
+                    if (this.bottomsheetRef)
+                        this.bottomsheetRef.dismiss("SUCCESS");
+                }
+                else if (result.isDismissed) {
+                    if (this.dialogRef)
+                        this.dialogRef.close("SUCCESS");
+                    if (this.bottomsheetRef)
+                        this.bottomsheetRef.dismiss("SUCCESS");
+                    this.matDialog.open(UserBasicInfoComponent, {
+                        height: '50vh',
+                        width: window.innerWidth > 475 ? '40vw' : '95vw',
+                        maxWidth: window.innerWidth > 475 ? '100vw' : '80vw',
+                        data: {}
+                    });
+                }
+            });
+        }, (error) => {
+            this.buttonLoading = false;
+            this.messageService.add({ severity: 'error', summary: 'Invalid OTP', detail: 'Please enter valid otp' });
+        });
+    }
     createAccount() {
         const deviceInfo = {
             firebaseToken: localStorage.getItem("fbToken") ?? ""
@@ -10174,20 +10233,57 @@ class AuthenticationRequiredComponent {
             }
         });
     }
+    enterMobile() {
+        if (this.mobile.length == 10) {
+            this.generateOTP();
+        }
+    }
+    generateOTP() {
+        this.buttonLoading = true;
+        this.restService.generateOTP(this.mobile ?? "", "91").subscribe((response) => {
+            this.buttonLoading = false;
+            this.messageService.add({
+                severity: 'success',
+                summary: 'OTP Sent',
+                detail: 'OTP sent to mobile. Valid for 3 mins',
+                life: 10000
+            });
+        }, (error) => {
+            this.buttonLoading = false;
+            const errorMessage = error?.error?.message;
+            this.messageService.add({
+                severity: 'error',
+                summary: 'OTP Request',
+                detail: errorMessage,
+                life: 10000
+            });
+        });
+    }
+    validateNumber(event) {
+        const charCode = event.charCode;
+        if (charCode < 48 || charCode > 57) {
+            event.preventDefault();
+        }
+    }
     get isMobile() {
         return window.innerWidth <= 475;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i7.MessageService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", providers: [MessageService], ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section>\r\n    <div class=\"main\">  \t\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"text\" name=\"txt\" placeholder=\"User name\" required=\"\" [(ngModel)]=\"userName\">\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                    <input type=\"email\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" [(ngModel)]=\"mobile\">\r\n                    <input type=\"email\" name=\"otp\" placeholder=\"OTP\" required=\"\" [(ngModel)]=\"otp\">\r\n                    <input type=\"password\" name=\"password\" placeholder=\"Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    <!-- <input type=\"password\" name=\"confPassword\" placeholder=\"Confirm Password\" required=\"\" [(ngModel)]=\"confPassword\"> -->\r\n                    <button (click)=\"createAccount()\">Sign up</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                    <input type=\"password\" name=\"pswd\" placeholder=\"Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    <button (click)=\"login()\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n    </div>\r\n</section>", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}input{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}button{width:80%!important;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i7.MessageService }, { token: StorageServiceService }, { token: i3.MatDialog }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", providers: [MessageService], ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\">\r\n    <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n    <div class=\"main\">  \t\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                    <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                    <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" required=\"\" [(ngModel)]=\"otp\">\r\n                    <input type=\"password\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    <button (click)=\"createAccount()\">Sign up</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n                    </div>\r\n                    <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n                        <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                        <input type=\"password\" name=\"pswd\" placeholder=\"Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"loginType == 'OTP'\">\r\n                        <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\" (ngModelChange)=\"enterMobile()\">\r\n                        <input type=\"otp\" name=\"otp\" [placeholder]=\"mobile.length == 10 ? 'Enter received otp' : 'Enter mobile to receive otp'\" required=\"\" [(ngModel)]=\"otp\" [disabled]=\"mobile.length != 10\">\r\n                    </ng-container>\r\n                    <button (click)=\"login()\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n    </div>\r\n</section>", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:relative;right:2px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:130px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}input{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}button{width:80%!important;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i15.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-authentication-required', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
-                        ToastModule
-                    ], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section>\r\n    <div class=\"main\">  \t\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"text\" name=\"txt\" placeholder=\"User name\" required=\"\" [(ngModel)]=\"userName\">\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                    <input type=\"email\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" [(ngModel)]=\"mobile\">\r\n                    <input type=\"email\" name=\"otp\" placeholder=\"OTP\" required=\"\" [(ngModel)]=\"otp\">\r\n                    <input type=\"password\" name=\"password\" placeholder=\"Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    <!-- <input type=\"password\" name=\"confPassword\" placeholder=\"Confirm Password\" required=\"\" [(ngModel)]=\"confPassword\"> -->\r\n                    <button (click)=\"createAccount()\">Sign up</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                    <input type=\"password\" name=\"pswd\" placeholder=\"Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    <button (click)=\"login()\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n    </div>\r\n</section>", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}input{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}button{width:80%!important;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i7.MessageService }, { type: StorageServiceService }] });
+                        ToastModule,
+                        MatIconModule
+                    ], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\">\r\n    <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n    <div class=\"main\">  \t\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                    <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                    <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" required=\"\" [(ngModel)]=\"otp\">\r\n                    <input type=\"password\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    <button (click)=\"createAccount()\">Sign up</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n                    </div>\r\n                    <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n                        <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                        <input type=\"password\" name=\"pswd\" placeholder=\"Password\" required=\"\" [(ngModel)]=\"password\">\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"loginType == 'OTP'\">\r\n                        <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\" (ngModelChange)=\"enterMobile()\">\r\n                        <input type=\"otp\" name=\"otp\" [placeholder]=\"mobile.length == 10 ? 'Enter received otp' : 'Enter mobile to receive otp'\" required=\"\" [(ngModel)]=\"otp\" [disabled]=\"mobile.length != 10\">\r\n                    </ng-container>\r\n                    <button (click)=\"login()\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n    </div>\r\n</section>", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:relative;right:2px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:130px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}input{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}button{width:80%!important;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i7.MessageService }, { type: StorageServiceService }, { type: i3.MatDialog }, { type: i3.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i5.MatBottomSheetRef, decorators: [{
+                    type: Optional
+                }] }] });
 
 class EndUserService {
     constructor(storageService) {