simpo-component-library 1.6.145 → 1.6.146

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/esm2022/lib/ecommerce/sections/authenticate-user/authenticate-user.component.mjs +3 -3
  2. package/esm2022/lib/ecommerce/sections/authentication-required/authentication-required.component.mjs +111 -11
  3. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +5 -3
  4. package/fesm2022/simpo-component-library.mjs +107 -10
  5. package/fesm2022/simpo-component-library.mjs.map +1 -1
  6. package/lib/directive/background-directive.d.ts +1 -1
  7. package/lib/directive/button-directive.directive.d.ts +1 -1
  8. package/lib/directive/color.directive.d.ts +1 -1
  9. package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +13 -2
  10. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  11. package/package.json +1 -1
  12. package/simpo-component-library-1.6.146.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -4103,7 +4103,7 @@ class AuthenticateUserComponent extends BaseSection {
4103
4103
  return window.innerWidth <= 475;
4104
4104
  }
4105
4105
  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 }); }
4106
- 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}.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:
4106
+ 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:
4107
4107
  // FormGroup,
4108
4108
  // FormBuilder,
4109
4109
  // Validators,
@@ -4126,7 +4126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
4126
4126
  // FormBuilder,
4127
4127
  // Validators,
4128
4128
  ReactiveFormsModule,
4129
- ], 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}.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"] }]
4129
+ ], 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"] }]
4130
4130
  }], ctorParameters: () => [{ type: undefined, decorators: [{
4131
4131
  type: Optional
4132
4132
  }, {
@@ -4876,7 +4876,8 @@ class CartComponent extends BaseSection {
4876
4876
  "mobile": this.userDetails?.contact.mobile,
4877
4877
  "email": this.userDetails?.contact.email,
4878
4878
  };
4879
- this.cartInfo["cartId"] = localStorage.getItem("cartId");
4879
+ if (localStorage.getItem("cartId"))
4880
+ this.cartInfo["cartId"] = localStorage.getItem("cartId");
4880
4881
  console.log("Response : ", response);
4881
4882
  if (response)
4882
4883
  this.proceedToCheckout();
@@ -4895,7 +4896,8 @@ class CartComponent extends BaseSection {
4895
4896
  "mobile": this.userDetails?.contact.mobile,
4896
4897
  "email": this.userDetails?.contact.email,
4897
4898
  };
4898
- this.cartInfo["cartId"] = localStorage.getItem("cartId");
4899
+ if (localStorage.getItem("cartId"))
4900
+ this.cartInfo["cartId"] = localStorage.getItem("cartId");
4899
4901
  console.log("Response : ", response);
4900
4902
  if (response)
4901
4903
  this.proceedToCheckout();
@@ -10107,11 +10109,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
10107
10109
  }] } });
10108
10110
 
10109
10111
  class AuthenticationRequiredComponent {
10110
- constructor(restService, router, messageService, storageService) {
10112
+ constructor(restService, router, messageService, storageService, matDialog, dialogRef, bottomsheetRef) {
10111
10113
  this.restService = restService;
10112
10114
  this.router = router;
10113
10115
  this.messageService = messageService;
10114
10116
  this.storageService = storageService;
10117
+ this.matDialog = matDialog;
10118
+ this.dialogRef = dialogRef;
10119
+ this.bottomsheetRef = bottomsheetRef;
10115
10120
  this.email = "";
10116
10121
  this.mobile = "";
10117
10122
  this.otp = "";
@@ -10120,8 +10125,17 @@ class AuthenticationRequiredComponent {
10120
10125
  this.userName = "";
10121
10126
  this.buttonLoading = false;
10122
10127
  this.businessId = localStorage.getItem("bId");
10128
+ this.loginType = "OTP";
10123
10129
  }
10124
10130
  login() {
10131
+ if (this.loginType == "OTP") {
10132
+ this.verifyOTP();
10133
+ }
10134
+ else {
10135
+ this.verifyPassword();
10136
+ }
10137
+ }
10138
+ verifyPassword() {
10125
10139
  const payload = {
10126
10140
  businessId: this.businessId,
10127
10141
  email: this.email,
@@ -10136,6 +10150,52 @@ class AuthenticationRequiredComponent {
10136
10150
  this.messageService.add({ severity: 'error', summary: 'Invalid credentials', detail: 'Please enter valid credentials' });
10137
10151
  });
10138
10152
  }
10153
+ verifyOTP() {
10154
+ const deviceInfo = {
10155
+ firebaseToken: localStorage.getItem("fbToken") ?? ""
10156
+ };
10157
+ this.buttonLoading = true;
10158
+ this.restService.verifyOTP(this.mobile ?? "", this.otp, deviceInfo).subscribe((response) => {
10159
+ const userDetails = this.storageService.setUser(response.data);
10160
+ this.storageService.updateAllData();
10161
+ if (this.dialogRef)
10162
+ this.dialogRef.close("SUCCESS");
10163
+ if (this.bottomsheetRef)
10164
+ this.bottomsheetRef.dismiss("SUCCESS");
10165
+ this.buttonLoading = false;
10166
+ Swal.fire({
10167
+ icon: "success",
10168
+ title: "Hurray",
10169
+ text: "Your account successfully created",
10170
+ showCancelButton: !(userDetails.contact?.name?.length > 0),
10171
+ confirmButtonText: "I loved it",
10172
+ cancelButtonText: "Fill other basic details",
10173
+ cancelButtonColor: "#928c8c",
10174
+ }).then((result) => {
10175
+ if (result.isConfirmed) {
10176
+ if (this.dialogRef)
10177
+ this.dialogRef.close("SUCCESS");
10178
+ if (this.bottomsheetRef)
10179
+ this.bottomsheetRef.dismiss("SUCCESS");
10180
+ }
10181
+ else if (result.isDismissed) {
10182
+ if (this.dialogRef)
10183
+ this.dialogRef.close("SUCCESS");
10184
+ if (this.bottomsheetRef)
10185
+ this.bottomsheetRef.dismiss("SUCCESS");
10186
+ this.matDialog.open(UserBasicInfoComponent, {
10187
+ height: '50vh',
10188
+ width: window.innerWidth > 475 ? '40vw' : '95vw',
10189
+ maxWidth: window.innerWidth > 475 ? '100vw' : '80vw',
10190
+ data: {}
10191
+ });
10192
+ }
10193
+ });
10194
+ }, (error) => {
10195
+ this.buttonLoading = false;
10196
+ this.messageService.add({ severity: 'error', summary: 'Invalid OTP', detail: 'Please enter valid otp' });
10197
+ });
10198
+ }
10139
10199
  createAccount() {
10140
10200
  const deviceInfo = {
10141
10201
  firebaseToken: localStorage.getItem("fbToken") ?? ""
@@ -10173,20 +10233,57 @@ class AuthenticationRequiredComponent {
10173
10233
  }
10174
10234
  });
10175
10235
  }
10236
+ enterMobile() {
10237
+ if (this.mobile.length == 10) {
10238
+ this.generateOTP();
10239
+ }
10240
+ }
10241
+ generateOTP() {
10242
+ this.buttonLoading = true;
10243
+ this.restService.generateOTP(this.mobile ?? "", "91").subscribe((response) => {
10244
+ this.buttonLoading = false;
10245
+ this.messageService.add({
10246
+ severity: 'success',
10247
+ summary: 'OTP Sent',
10248
+ detail: 'OTP sent to mobile. Valid for 3 mins',
10249
+ life: 10000
10250
+ });
10251
+ }, (error) => {
10252
+ this.buttonLoading = false;
10253
+ const errorMessage = error?.error?.message;
10254
+ this.messageService.add({
10255
+ severity: 'error',
10256
+ summary: 'OTP Request',
10257
+ detail: errorMessage,
10258
+ life: 10000
10259
+ });
10260
+ });
10261
+ }
10262
+ validateNumber(event) {
10263
+ const charCode = event.charCode;
10264
+ if (charCode < 48 || charCode > 57) {
10265
+ event.preventDefault();
10266
+ }
10267
+ }
10176
10268
  get isMobile() {
10177
10269
  return window.innerWidth <= 475;
10178
10270
  }
10179
- 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 }); }
10180
- 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"] }] }); }
10271
+ 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 }); }
10272
+ 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"] }] }); }
10181
10273
  }
10182
10274
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
10183
10275
  type: Component,
10184
10276
  args: [{ selector: 'simpo-authentication-required', standalone: true, imports: [
10185
10277
  CommonModule,
10186
10278
  FormsModule,
10187
- ToastModule
10188
- ], 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"] }]
10189
- }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i7.MessageService }, { type: StorageServiceService }] });
10279
+ ToastModule,
10280
+ MatIconModule
10281
+ ], 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"] }]
10282
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i7.MessageService }, { type: StorageServiceService }, { type: i3.MatDialog }, { type: i3.MatDialogRef, decorators: [{
10283
+ type: Optional
10284
+ }] }, { type: i5.MatBottomSheetRef, decorators: [{
10285
+ type: Optional
10286
+ }] }] });
10190
10287
 
10191
10288
  class EndUserService {
10192
10289
  constructor(storageService) {