import { Component, Inject, Input, Optional } from '@angular/core';
import { ReactiveFormsModule, Validators } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { ButtonDirectiveDirective } from '../../../directive/button-directive.directive';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { UserBasicInfoComponent } from '../user-basic-info/user-basic-info.component';
import { SimpoComponentModule } from '../../../components/index';
import BaseSection from '../../../sections/BaseSection';
import Swal from 'sweetalert2';
import { MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import { BackgroundDirective } from '../../../directive/background-directive';
import { MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
import { HoverDirective } from '../../../directive/hover-element-directive';
import { MatFormFieldModule } from '@angular/material/form-field';
import { SvgDividerComponent } from '../../../elements/svg-divider/svg-divider.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/rest.service";
import * as i2 from "@angular/router";
import * as i3 from "@angular/material/dialog";
import * as i4 from "../../../services/storage.service";
import * as i5 from "@angular/material/bottom-sheet";
import * as i6 from "../../../services/events.service";
import * as i7 from "primeng/api";
import * as i8 from "@angular/forms";
import * as i9 from "@angular/common";
import * as i10 from "../../../components/hover-elements/hover-elements.component";
import * as i11 from "../../../components/delete-hover-element/delete-hover-element.component";
import * as i12 from "ngx-skeleton-loader";
import * as i13 from "primeng/toast";
import * as i14 from "@angular/material/form-field";
export class AuthenticateUserComponent extends BaseSection {
    constructor(matData, bottomsheetData, restService, router, matDialog, storageService, dialogRef, bottomsheetRef, _eventService, messageService, fb) {
        super();
        this.matData = matData;
        this.bottomsheetData = bottomsheetData;
        this.restService = restService;
        this.router = router;
        this.matDialog = matDialog;
        this.storageService = storageService;
        this.dialogRef = dialogRef;
        this.bottomsheetRef = bottomsheetRef;
        this._eventService = _eventService;
        this.messageService = messageService;
        this.fb = fb;
        this.isLoading = false;
        this.otpData = [, , , , ,];
        this.otpString = "";
        this.SignupOtpString = "";
        this.screen = 'LOGIN';
        this.mobile = null;
        this.email = null;
        this.mobilenumber = null;
        this.emailentered = null;
        this.countryCode = null;
        this.Password = null;
        this.confirmPass = null;
        this.businessId = localStorage.getItem("bId");
        // const businessId: string = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? '';
        this.buttonLoading = false;
        this.login = true;
        this.signup = false;
        this.emailValid = true;
        this.confirm = true;
        this.password = ' ';
        this.PasswordHide = true;
        this.newPasswordHide = true;
        this.m_clicked = true;
        this.e_clicked = false;
        // countryCodes: any[] = [];
        // getAllCountries() {
        //   this.restService.getAllCountries().subscribe(
        //     (res: any) => {
        //       this.countryCodes = res.data?.data ?? [];
        //       const shortCode = localStorage.getItem(StorageKeys.SHORT_CODE);
        //       let dialCode;
        //       if (localStorage.getItem(StorageKeys.dialCodeDropdown) === 'true') {
        //         dialCode = true
        //       }
        //       else {
        //         dialCode = false
        //       }
        //       let shortCodeIndex = -1;
        //       if (shortCode) {
        //         shortCodeIndex = this.countryCodes.findIndex((c: any) => c.shortCode?.toLowerCase() === shortCode.toLowerCase())
        //       } else {
        //         shortCodeIndex = this.countryCodes.findIndex((c: any) => c.shortCode?.toLowerCase() === 'in');
        //       }
        //       if (shortCodeIndex > -1) {
        //         this.selectedCountry = this.countryCodes[shortCodeIndex];
        //         this.disableCountryCodeDropdown = dialCode ? true : false;
        //       }
        //     },
        //     (err) => {
        //       this.webService.openSnack(
        //         `${err.error.message}`,
        //         'Close',
        //       )
        //     }
        //   )
        // }
        this.payload = {
            businessId: this.businessId,
            mobile: '',
            email: '',
            password: '',
            countryCode: ''
        };
        this.passData = {
            businessId: this.businessId,
            email: '',
            password: ''
        };
        this.passwordValidation = this.fb.group({
            passwordValid: ['', [
                    Validators.required, // Password is required
                    Validators.minLength(8), // Minimum length 8 characters
                    Validators.pattern(/[A-Z]/), // At least one uppercase letter
                    Validators.pattern(/\d/), // At least one digit
                    Validators.pattern(/[!@#$%^&*]/) // At least one special character
                ]]
        });
        // this.email: new FormControl('', [Validators.required, Validators.email]),
    }
    get passwordValid() {
        return this.passwordValidation.get('passwordValid');
    }
    ngOnInit() {
        if (this.matData)
            this.data = this.matData;
        this._eventService.showLoadingScreen.subscribe((response) => {
            this.isLoading = response;
        });
    }
    openSignup() {
        this.screen = "CREATEPASSWORD";
        this.signup = true;
        this.login = false;
    }
    openLogin() {
        this.screen = "LOGIN";
        this.login = true;
        this.signup = false;
    }
    passScreen() {
        this.screen = "PASSWORD";
    }
    isEmailValid(email) {
        if (email?.includes("@") && email?.includes(".com") || (email?.length == 0)) {
            this.emailValid = false;
        }
    }
    isConfirmPAsswordValid(confirmpass) {
        if (confirmpass == this.payload.password) {
            this.confirm = false;
        }
    }
    move(event, idx) {
        if (isNaN(Number(event.key)) && event.code != "Backspace")
            return;
        if (event.code != "Backspace") {
            this.otpData[idx] = event.key;
            document.getElementById("otp_" + (idx + 1))?.focus();
        }
        if (event.code == "Backspace" && !this.otpData[idx]) {
            document.getElementById("otp_" + (idx - 1))?.focus();
        }
    }
    close() {
        if (this.dialogRef)
            this.dialogRef.close();
        if (this.bottomsheetRef)
            this.bottomsheetRef.dismiss();
    }
    goBack() {
        this.resetValue();
        this.screen = "LOGIN";
    }
    resetValue() {
        this.otpString = '';
        this.otpData = [, , , , ,];
    }
    // generateOTP() {
    //   this.buttonLoading = true;
    //   this.restService.generateOTP(this.mobile ?? "", this.countryCode ?? "").subscribe((response) => {
    //     this.screen = "OTP";
    //     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;
    //     this.messageService.add({ severity: 'error', summary: 'OTP Request', detail: error?.error?.message, life: 10000 });
    //   })
    // }
    generateOTP() {
        this.buttonLoading = true;
        this.restService.generateOTP(this.mobile ?? "", this.countryCode ?? "").subscribe((response) => {
            this.screen = "OTP";
            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
            });
            // Check if the error message indicates "User not found"
            if (errorMessage === "User Not Registered, Please Signup First.") {
                this.screen = "CREATEPASSWORD";
                // Close the window or perform the desired action
            }
        });
    }
    mobile_click() {
        this.m_clicked = true;
        this.e_clicked = false;
    }
    email_click() {
        this.e_clicked = true;
        this.m_clicked = false;
    }
    verifyOTP() {
        const deviceInfo = {
            firebaseToken: localStorage.getItem("fbToken") ?? ""
        };
        this.otpString = "";
        this.buttonLoading = true;
        this.otpData.forEach((value, idx) => this.otpString += (value ?? ""));
        this.restService.verifyOTP(this.mobile ?? "", this.otpString, 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' });
        });
    }
    verifySignupOTP() {
        const deviceInfo = {
            firebaseToken: localStorage.getItem("fbToken") ?? ""
        };
        this.buttonLoading = true;
        this.otpData.forEach((value, idx) => this.SignupOtpString += (value ?? ""));
        let verifySignData = {
            businessId: this.businessId,
            mobile: this.payload.mobile,
            email: this.payload.email,
            password: this.payload.password,
            countryCode: this.payload.countryCode,
            enteredOtp: this.SignupOtpString
        };
        this.restService.verifySignupOTP(verifySignData).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;
            if (error.status === 500) {
                this.messageService.add({ severity: 'error', summary: 'User already exists' });
            }
            else {
                this.messageService.add({ severity: 'error', summary: 'Invalid OTP', detail: 'Please enter valid otp' });
            }
        });
    }
    createPassword() {
        this.screen = "SIGNUPOTP",
            this.restService.sendSignupOTP(this.payload).subscribe((res) => {
            });
    }
    signinPassword() {
        this.restService.signinPassword(this.passData).subscribe((res) => {
        }, (error) => {
            this.buttonLoading = false;
            this.messageService.add({ severity: 'error', summary: 'Invalid credentials', detail: 'Please enter valid credentials' });
        });
    }
    validateNumber(event) {
        const charCode = event.charCode; // Get the key code of the pressed key
        if (charCode < 48 || charCode > 57) {
            event.preventDefault(); // Block input if it's not a number (0-9)
        }
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    resendOTP() {
        this.restService.resendOTP(this.payload.mobile ?? "", this.payload.countryCode ?? "").subscribe((response) => {
            this.otpString = "";
        });
    }
    // public resendsignupOTP() {
    //   this.restService.resendOTP(this.payload.mobile ?? "", this.payload.countryCode ?? "").subscribe((response)=> {
    //     this.otpString = "";
    //   })
    // }
    get isMobileValid() {
        return this.mobile?.toString().length == 10;
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: i1.RestService }, { token: i2.Router }, { token: i3.MatDialog }, { token: i4.StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: i6.EventsService }, { token: i7.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 14px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    {{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n                    \n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n                    \n                </div>\n                <div class=\"mobile_email\">\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n                </div>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n                \n                <form [formGroup]=\"passwordValidation\">\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                            \n                </div>\n                \n\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n                    \n                    <div class=\"field\">\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                    </div>\n                </div> -->\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n                    WhatsApp</p>\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n                    Email</p> -->\n\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <span>OTP Sent</span>\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    \n                </div>\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" \n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <!-- <span>Email Sent</span> -->\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                </form>\n                \n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number {{ countryCode }}{{ mobile\n                    }} and E-mail</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n\n            \n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                \n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <div>\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n                </div>\n                <div class=\"pass-signin\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\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;\"\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n                            \n                        </div>\n                    </div>\n                    \n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n                    \n                        </div>\n                    </div>\n                    <form [formGroup]=\"passwordValidation\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    </form>\n                    <div class=\"password\">\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    \n                    <div class=\"password-1\">\n                        <div>\n                            Already have an account?\n                        </div>\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n                    </div>\n                </div>\n                <div class=\"signin\" (click)=\"createPassword()\">\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n                </div>\n                \n            </section>  \n        </ng-container> \n    </div>\n    \n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </div>\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n        <mat-icon>keyboard_backspace</mat-icon>\n    </div>\n    \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}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: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i10.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i11.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.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: i14.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: 
                // FormGroup,
                // FormBuilder,
                // Validators,
                ReactiveFormsModule }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-authenticate-user', standalone: true, imports: [
                        FormsModule,
                        MatIcon,
                        CommonModule,
                        BackgroundDirective,
                        SimpoComponentModule,
                        ButtonDirectiveDirective,
                        ToastModule,
                        HoverDirective,
                        FormsModule,
                        MatFormFieldModule,
                        // FormGroup,
                        // FormBuilder,
                        // Validators,
                        ReactiveFormsModule,
                        SvgDividerComponent
                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 14px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    {{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n                    \n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n                    \n                </div>\n                <div class=\"mobile_email\">\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n                </div>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n                \n                <form [formGroup]=\"passwordValidation\">\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                            \n                </div>\n                \n\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n                    \n                    <div class=\"field\">\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                    </div>\n                </div> -->\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n                    WhatsApp</p>\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n                    Email</p> -->\n\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <span>OTP Sent</span>\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    \n                </div>\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" \n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <!-- <span>Email Sent</span> -->\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                </form>\n                \n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number {{ countryCode }}{{ mobile\n                    }} and E-mail</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n\n            \n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                \n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <div>\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n                </div>\n                <div class=\"pass-signin\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\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;\"\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n                            \n                        </div>\n                    </div>\n                    \n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n                    \n                        </div>\n                    </div>\n                    <form [formGroup]=\"passwordValidation\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    </form>\n                    <div class=\"password\">\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    \n                    <div class=\"password-1\">\n                        <div>\n                            Already have an account?\n                        </div>\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n                    </div>\n                </div>\n                <div class=\"signin\" (click)=\"createPassword()\">\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n                </div>\n                \n            </section>  \n        </ng-container> \n    </div>\n    \n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </div>\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n        <mat-icon>keyboard_backspace</mat-icon>\n    </div>\n    \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}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
                }, {
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [MAT_BOTTOM_SHEET_DATA]
                }] }, { type: i1.RestService }, { type: i2.Router }, { type: i3.MatDialog }, { type: i4.StorageServiceService }, { type: i3.MatDialogRef, decorators: [{
                    type: Optional
                }] }, { type: i5.MatBottomSheetRef, decorators: [{
                    type: Optional
                }] }, { type: i6.EventsService }, { type: i7.MessageService }, { type: i8.FormBuilder }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }], nextComponentColor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 