simpo-component-library 3.6.802 → 3.6.803

package/fesm2022/simpo-component-library.mjs

@@ -3938,6 +3938,22 @@ class RestService {
     getOtpForLogin(payload) {
         return this.http.put(this.BASE_URL + `ecommerce/user/generate-otp`, payload);
     }
+    /** New OTP API: PUT /ecommerce/user/auth/send-otp
+     *  Body: { identifier, businessId }
+     *  Response: { data: { isExistingUser: boolean, message: string } }
+     */
+    sendOtpV2(identifier, businessId) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/send-otp`, { identifier, businessId });
+    }
+    verifyOtpV2(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/verify-otp`, payload);
+    }
+    completeSignupV2(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/complete-signup`, payload);
+    }
+    loginWithPasswordNew(payload) {
+        return this.http.put(this.BASE_URL + `ecommerce/user/auth/login-password`, payload);
+    }
     flush(eventsToSend) {
         this.http.post(this.BASE_URL + 'ecommerce/analytics/batch', eventsToSend)
             .subscribe({ error: () => { } });
@@ -9821,9 +9837,10 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.dialogRef = dialogRef;
         this.bottomsheetRef = bottomsheetRef;
         this.buttonId = '';
-        this.currentPage = 'LOGIN';
+        this.authScreen = 'PHONE';
         this.email = "";
         this.mobile = "";
+        this.phoneNumber = "";
         this.otp = "";
         this.otpControls = new FormArray([
             new FormControl(''),
@@ -9833,6 +9850,9 @@ class AuthenticationRequiredComponent extends BaseSection {
             new FormControl(''),
             new FormControl('')
         ]);
+        // Resend countdown
+        this.resendCountdown = 0;
+        this.isExistingUser = true;
         this.password = "";
         this.confPassword = "";
         this.userName = "";
@@ -9852,14 +9872,11 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.proceedToEnrollment = false;
         this.tryAtHome = false;
         this.navigateToSchemeDetails = false;
+        this.currentPage = "";
         this.loginType = "OTP";
         this.generateOtp = true;
         this.generatedOtp = null;
         this.oneTimePassword = "";
-        this.otpPayload = {
-            "businessId": this.businessId ?? "",
-            "email": this.email ?? ""
-        };
         this.emailCheck = false;
         this.passwordCheck = false;
         this.mobileCheck = false;
@@ -9888,12 +9905,236 @@ class AuthenticationRequiredComponent extends BaseSection {
         this.styles = this.data?.styles;
         this.button = this.data?.action?.buttons[0];
         this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
+        this.setAccentRgbVar();
         let enabled = localStorage.getItem('signUpEnabled');
         if (enabled != null)
             this.signUpEnabled = enabled === 'true';
     }
-    ngAfterViewInit() {
-        // this.setup3DEffects();
+    ngAfterViewInit() { }
+    /** Sets --accent-rgb CSS variable so animated circles match the user's brand color */
+    setAccentRgbVar() {
+        const hex = this.styles?.background?.accentColor ?? '#667eea';
+        const cleanHex = hex.replace('#', '');
+        if (cleanHex.length === 6) {
+            const r = parseInt(cleanHex.substring(0, 2), 16);
+            const g = parseInt(cleanHex.substring(2, 4), 16);
+            const b = parseInt(cleanHex.substring(4, 6), 16);
+            document.documentElement.style.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
+        }
+    }
+    get canGoBack() {
+        return false; // phone is the first screen; no back from phone
+    }
+    goBack() {
+        if (this.authScreen === 'OTP')
+            this.authScreen = 'PHONE';
+        else if (this.authScreen === 'REGISTER')
+            this.authScreen = 'OTP';
+    }
+    closeAuth() {
+        if (this.dialogRef)
+            this.dialogRef.close();
+        else if (this.bottomsheetRef)
+            this.bottomsheetRef.dismiss();
+        else
+            this.router.navigate(['']);
+    }
+    formatCountdown(secs) {
+        const m = Math.floor(secs / 60).toString().padStart(2, '0');
+        const s = (secs % 60).toString().padStart(2, '0');
+        return `${m}:${s}`;
+    }
+    startResendTimer(seconds = 60) {
+        this.resendCountdown = seconds;
+        if (this.resendInterval)
+            clearInterval(this.resendInterval);
+        this.resendInterval = setInterval(() => {
+            this.resendCountdown--;
+            if (this.resendCountdown <= 0) {
+                clearInterval(this.resendInterval);
+                this.resendCountdown = 0;
+            }
+        }, 1000);
+    }
+    sendOTP() {
+        if (!this.edit) {
+            if (!this.isEmailOrNumberValid()) {
+                this.messageService.add({ severity: 'error', summary: 'Invalid Input', detail: 'Please enter a valid email or 10-digit mobile number' });
+                return;
+            }
+            this.buttonLoading = true;
+            this.restService.sendOtpV2(this.emailOrNumber, this.businessId ?? '').subscribe((response) => {
+                this.isExistingUser = response?.data?.isExistingUser ?? true;
+                this.buttonLoading = false;
+                this.authScreen = 'OTP';
+                this.startResendTimer(60);
+                this.messageService.add({ severity: 'success', summary: 'OTP Sent', detail: response?.data?.message ?? ('OTP sent to ' + this.emailOrNumber) });
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.message });
+            });
+        }
+    }
+    resendOTPNew() {
+        this.restService.sendOtpV2(this.emailOrNumber, this.businessId ?? '').subscribe((response) => {
+            this.startResendTimer(60);
+            this.messageService.add({ severity: 'success', summary: 'OTP Resent', detail: response?.data?.message ?? ('New OTP sent to ' + this.emailOrNumber) });
+        }, (error) => {
+            this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.message });
+        });
+    }
+    verifyOTPNew() {
+        if (!this.edit) {
+            this.oneTimePassword = this.otpControls.value.join('');
+            if (this.oneTimePassword.length < 6) {
+                this.messageService.add({ severity: 'error', summary: 'OTP Required', detail: 'Please enter the 6-digit OTP' });
+                return;
+            }
+            this.buttonLoading = true;
+            const payload = {
+                businessId: this.businessId ?? '',
+                identifier: this.emailOrNumber,
+                otp: this.oneTimePassword,
+                deviceInfo: null
+            };
+            this.restService.verifyOtpV2(payload).subscribe((response) => {
+                const flow = response.data?.flow;
+                if (flow === 'SIGNUP') {
+                    this.buttonLoading = false;
+                    this.authScreen = 'REGISTER';
+                    // Prefill email or phone based on regex
+                    if (/^[6-9]\d{9}$/.test(this.emailOrNumber)) {
+                        this.phoneNumber = this.emailOrNumber;
+                    }
+                    else {
+                        this.email = this.emailOrNumber;
+                    }
+                    return;
+                }
+                if (flow === 'LOGIN') {
+                    const userDetails = this.storageService.setUser(response.data.user);
+                    this.storageService.setToken(response.data.passbookToken);
+                    this.storageService.updateAllData();
+                    this.storageService.setReferralDetails(response.data.user?.referralDetails);
+                    if (localStorage.getItem('utm_u_id')) {
+                        this.endUserRefferalDetails(response.data.user?.userId, localStorage.getItem('utm_u_id'));
+                    }
+                    this.buttonLoading = false;
+                    this.syncTrialCartToServerDB(userDetails.userId);
+                    this.messageService.add({ severity: 'success', summary: 'Logged In', detail: 'Logged in successfully' });
+                    if (this.proceedToCheckout)
+                        this.router.navigate(['/cart'], { queryParams: { checkout: true } });
+                    else if (this.proceedToEnrollment)
+                        this.router.navigate(['/schemes']);
+                    else if (this.tryAtHome)
+                        this.router.navigate(['/home-appointment']);
+                    else if (this.navigateToSchemeDetails)
+                        this.router.navigate(['scheme-detail']);
+                    else
+                        this.router.navigate(['']);
+                }
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.message });
+            });
+        }
+    }
+    registerUser() {
+        if (!this.edit) {
+            if (!this.userName || this.userName.trim().length === 0) {
+                this.messageService.add({ severity: 'error', summary: 'Name Required', detail: 'Please enter your full name' });
+                return;
+            }
+            const mobileRegex = /^[6-9]\d{9}$/;
+            if (!mobileRegex.test(this.phoneNumber)) {
+                this.messageService.add({ severity: 'error', summary: 'Invalid Mobile', detail: 'Please enter a valid 10-digit mobile number' });
+                return;
+            }
+            if (!this.password || this.password.trim().length === 0) {
+                this.messageService.add({ severity: 'error', summary: 'Password Required', detail: 'Please enter a password' });
+                return;
+            }
+            if (this.password !== this.confPassword) {
+                this.messageService.add({ severity: 'error', summary: 'Password Mismatch', detail: 'Passwords do not match' });
+                return;
+            }
+            this.buttonLoading = true;
+            let verifySignData = {
+                identifier: this.emailOrNumber,
+                name: this.userName,
+                email: this.email.toLowerCase(),
+                mobile: this.phoneNumber,
+                password: this.password,
+                confirmPassword: this.confPassword,
+                businessId: this.businessId ?? '',
+                businessName: localStorage.getItem('bName') ?? '',
+                referralId: localStorage.getItem('utm_u_id') ?? null
+            };
+            this.restService.completeSignupV2(verifySignData).subscribe((response) => {
+                const userDetails = this.storageService.setUser(response.data);
+                this.storageService.setToken(response.data.passbookToken);
+                if (localStorage.getItem('utm_u_id')) {
+                    this.endUserRefferalDetails(response.data.userId, localStorage.getItem('utm_u_id'));
+                }
+                this.storageService.updateAllData();
+                this.syncTrialCartToServerDB(userDetails.userId);
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'success', summary: 'Welcome!', detail: 'Your account has been created successfully' });
+                if (this.proceedToCheckout)
+                    this.router.navigate(['/cart'], { queryParams: { checkout: true } });
+                else if (this.tryAtHome)
+                    this.router.navigate(['/home-appointment']);
+                else
+                    this.router.navigate(['']);
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Registration Error', detail: error?.error?.message });
+            });
+        }
+    }
+    loginWithPassword() {
+        if (!this.edit) {
+            if (!this.isEmailOrNumberValid()) {
+                this.messageService.add({ severity: 'error', summary: 'Invalid Input', detail: 'Please enter a valid email or 10-digit mobile number' });
+                return;
+            }
+            if (!this.password || this.password.trim().length === 0) {
+                this.messageService.add({ severity: 'error', summary: 'Password Required', detail: 'Please enter a password' });
+                return;
+            }
+            this.buttonLoading = true;
+            const payload = {
+                identifier: this.emailOrNumber,
+                password: this.password,
+                businessId: this.businessId ?? '',
+                deviceInfo: null
+            };
+            this.restService.loginWithPasswordNew(payload).subscribe((response) => {
+                const userDetails = this.storageService.setUser(response.data);
+                this.storageService.setToken(response.data.passbookToken);
+                this.storageService.updateAllData();
+                this.storageService.setReferralDetails(response.data.referralDetails);
+                if (localStorage.getItem('utm_u_id')) {
+                    this.endUserRefferalDetails(response.data.userId, localStorage.getItem('utm_u_id'));
+                }
+                this.buttonLoading = false;
+                this.syncTrialCartToServerDB(userDetails.userId);
+                this.messageService.add({ severity: 'success', summary: 'Logged In', detail: 'Logged in successfully' });
+                if (this.proceedToCheckout)
+                    this.router.navigate(['/cart'], { queryParams: { checkout: true } });
+                else if (this.proceedToEnrollment)
+                    this.router.navigate(['/schemes']);
+                else if (this.tryAtHome)
+                    this.router.navigate(['/home-appointment']);
+                else if (this.navigateToSchemeDetails)
+                    this.router.navigate(['scheme-detail']);
+                else
+                    this.router.navigate(['']);
+            }, (error) => {
+                this.buttonLoading = false;
+                this.messageService.add({ severity: 'error', summary: 'Login Failed', detail: error?.error?.message });
+            });
+        }
     }
     onInput(index) {
         const value = this.otpControls.at(index).value || '';
@@ -9955,39 +10196,6 @@ class AuthenticationRequiredComponent extends BaseSection {
     getFormOtp() {
         return this.otpControls.value.join('');
     }
-    loginAuthentication(loginType) {
-        this.loginType = loginType;
-        if (this.loginType == "OTP") {
-            this.generateOtp = true;
-        }
-        else if (this.loginType == "PASSWORD") {
-            this.generateOtp = false;
-        }
-    }
-    getOTP() {
-        if (!this.edit) {
-            if (this.emailOrNumber.length > 0) {
-                this.generateOtp = false;
-                this.otpPayload.email = this.emailOrNumber;
-                this.regenerateOtp(this.otpPayload);
-            }
-            else {
-                this.messageService.add({ severity: 'error', summary: 'Login request', detail: "Enter your login email or mobile number" });
-            }
-        }
-    }
-    regenerateOtp(payload) {
-        payload.email = this.emailOrNumber;
-        this.restService.getOtpForLogin(payload).subscribe((response) => {
-            this.generatedOtp = response;
-            this.messageService.add({ severity: 'success', summary: 'Otp Sent', detail: 'Otp sent to your email or mobile number' });
-        }, (error) => {
-            this.messageService.add({ severity: 'error', summary: 'Login request', detail: error?.error?.message });
-        });
-    }
-    resendOtp() {
-        this.regenerateOtp(this.otpPayload);
-    }
     close() {
         this.dialogRef.close();
     }
@@ -10399,7 +10607,7 @@ class AuthenticationRequiredComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"area w-100\">\r\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n        </ul>\r\n      </div>\r\n      <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email/Mobile</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\" required=\"\"\r\n        placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n        [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n        contain 1 Uppercase , 1\r\n        Lowercase , 1 Special\r\n        Character , 1 Digit and Minimum 8 Characters*</span>\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n      Forgot Password?</div> -->\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\"login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"getOTP()\">Generate Otp</button> -->\r\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n        <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n      </div>\r\n      <div class=\" input-box position-relative\">\r\n        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\r\n        </div>\r\n        <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n          Lowercase , 1 Special\r\n          Character , 1 Digit and Minimum 8 Characters*</span>\r\n        <!-- <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div> -->\r\n      </div>\r\n    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button> -->\r\n    <!-- <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      *ngIf=\"buttonLoading\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email or Phone number</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n    </div>\r\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Submit</button>\r\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.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: "ngmodule", type: MatProgressSpinnerModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"area w-100\">\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n        </ul>\n      </div>\n\n      <!-- ===== SCREEN 1: PHONE NUMBER ===== -->\n      <div *ngIf=\"authScreen === 'PHONE'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more</p>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\n              <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\" (click)=\"sendOTP()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label : 'SEND\n              OTP' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PASSWORD'\">\n                Login with Password\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 2: OTP VERIFICATION ===== -->\n      <div *ngIf=\"authScreen === 'OTP'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\n              Enter 6-digit OTP sent to {{emailOrNumber}}\n            </p>\n\n            <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\n              <div class=\"d-flex gap-2 w-100 justify-content-between\">\n                <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\n                  class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\n                  [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\n              </div>\n            </div>\n\n            <div class=\"text-center mb-3\">\n              <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\" style=\"font-weight:700; letter-spacing:0.04em;\">\n                RESEND IN &nbsp;{{formatCountdown(resendCountdown)}}\n              </span>\n              <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\n                style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\" (click)=\"resendOTPNew()\">\n                RESEND OTP\n              </span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\" (click)=\"verifyOTPNew()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label :\n              'VERIFY OTP' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 3: REGISTER ===== -->\n      <div *ngIf=\"authScreen === 'REGISTER'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n            <div class=\"input-box\">\n              <label for=\"auth-fullname-input\">Full Name</label>\n              <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\n                placeholder=\"Jane Doe\">\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-phone-input\">Phone Number</label>\n              <div class=\"d-flex align-items-center w-100 password-input-container\">\n                <span class=\"clr-black\"\n                  style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\n                <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\" [(ngModel)]=\"phoneNumber\"\n                  placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\" style=\"outline:none; font-size:14px;\" />\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-input\">Email</label>\n              <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\n                placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\n                [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\" (click)=\"registerUser()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'CONTINUE' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 4: LOGIN WITH PASSWORD ===== -->\n      <div *ngIf=\"authScreen === 'PASSWORD'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n\n            <div class=\"input-box\">\n              <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\n              <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-login-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\n                  (keyup.enter)=\"loginWithPassword()\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\n              (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'LOGIN' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PHONE'\">\n                Login with OTP\n              </span>\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$4.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
@@ -10421,7 +10629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         OverlayDirective,
                         SpacingAroundDirective,
                         ButtonEditorDirective
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"area w-100\">\r\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n          <li></li>\r\n        </ul>\r\n      </div>\r\n      <div [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\" [style.maxHeight.px]=\"\r\n        currentPage === 'LOGIN' ? 450 : 600\">\r\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\r\n          <div class=\"tabs\">\r\n            <button class=\"tab\" id=\"tab-signup\" (click)=\"currentPage = 'SIGNUP'\"\r\n              [ngStyle]=\"{'background':currentPage === 'SIGNUP' ? accentBackground : ''}\" [style.color]=\"fontColor\">Sign\r\n              up</button>\r\n            <button class=\"tab\" id=\"tab-login\" (click)=\"currentPage = 'LOGIN'\"\r\n              [ngStyle]=\"{'background':currentPage === 'LOGIN' ? accentBackground : ''}\" [style.color]=\"fontColor\">Log\r\n              in</button>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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>\r\n\r\n</section>\r\n\r\n<ng-template #loginTemplate>\r\n  <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\">\r\n    <p class=\"mb-0 clr-black login-text\">{{loginType === 'OTP' ? 'Login via OTP' : 'Login'}}</p>\r\n  </div>\r\n  <div class=\"login-input-section\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email/Mobile</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\" required=\"\"\r\n        placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\r\n        [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\r\n    </div>\r\n    <div class=\"input-box mb-4\">\r\n      <div class=\"w-100\">\r\n        <div class=\"w-100 d-flex justify-content-between password-text-container\" *ngIf=\"loginType==='PASSWORD'\">\r\n          Password\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex w-100 align-items-center justify-content-between mb-1 text-dark\"\r\n          *ngIf=\"loginType==='OTP' && !generateOtp\" style=\"font-size:12px\">OTP <span class=\"cursor-pointer text-nowrap\"\r\n            *ngIf=\"loginType==='OTP' && generateOtp === false\" (click)=\"resendOtp()\" style=\"font-size:11px\">Resend\r\n            Otp</span></div>\r\n        <ng-container *ngIf=\"loginType==='PASSWORD'\">\r\n          <div class=\"w-100 password-input-container\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n            <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n              (ngModelChange)=\"onPasswordChange()\" class=\"w-90 b-none clr-black\" placeholder=\"Johndoe@1234\">\r\n          </div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"loginType==='OTP'\">\r\n          <div class=\"d-flex align-items-center justify-content-between otp_input\" [ngClass]=\"{'gap-1': loginType==='OTP' &&\r\n              generateOtp===false}\" *ngIf=\"!generateOtp\">\r\n            <div class=\"d-flex gap-2 w-100 justify-content-between\">\r\n              <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\r\n                class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\r\n                [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\r\n            </div>\r\n            <!-- <input class=\"w-100\" placeholder=\"1234\" [(ngModel)]=\"oneTimePassword\" type=\"number\"> -->\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n        contain 1 Uppercase , 1\r\n        Lowercase , 1 Special\r\n        Character , 1 Digit and Minimum 8 Characters*</span>\r\n    </div>\r\n    <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n      Forgot Password?</div> -->\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content: {\r\n          'label': 'Login' } \" (click)=\"login()\" *ngIf=\"!generateOtp\" [buttonStyle]=\"data?.action?.buttons[1]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[1]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && !generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button> -->\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content: {\r\n          'label': 'Generate Otp'} \" (click)=\"getOTP()\" *ngIf=\"generateOtp\"\r\n      [buttonStyle]=\"data?.action?.buttons[2]?.styles\" [buttonId]=\"data?.action?.buttons[2]?.id\" [sectionId]=\"data?.id\"\r\n      [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [loading]=\"buttonLoading\" [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading && generateOtp\" [buttonData]=\"button?.content\"\r\n      [buttonStyle]=\"button?.styles\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"getOTP()\">Generate Otp</button> -->\r\n    <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n      [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n    <!-- <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up mt-3 d-flex align-items-center justify-content-end fs-13\" *ngIf=\"signUpEnabled\">\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('OTP')\"\r\n        *ngIf=\"loginType==='PASSWORD';else loginWithPassword\">Login with\r\n        OTP</span>\r\n    </div>\r\n    <ng-template #loginWithPassword>\r\n      <span class=\"cursor-pointer text-dark\" (click)=\"loginAuthentication('PASSWORD')\">Login with\r\n        Password</span>\r\n    </ng-template>\r\n    <!-- <div class=\"text-center mt-20\">\r\n      <div class=\"or-divider\">\r\n        <span class=\"or-text\">or</span>\r\n      </div>\r\n      <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n    </div> -->\r\n  </div>\r\n</ng-template>\r\n<ng-template #signInTemplate>\r\n  <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\">\r\n    <p class=\"mb-0 fs-20-fw-600 clr-black\">Sign up</p>\r\n  </div>\r\n\r\n  <div class=\"d-flex w-100 signup-input-container flex-column\">\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Name</label>\r\n      <input type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n    </div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email</label>\r\n      <input type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n      <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n    </div>\r\n    <div class=\"d-flex flex-column\">\r\n      <div class=\"input-box\">\r\n        <label for=\"\">Phone Number</label>\r\n        <input type=\"number\" class=\"clr-black\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\"\r\n          placeholder=\"9876543219\" [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n        <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n      </div>\r\n      <div class=\" input-box position-relative\">\r\n        <div class=\"d-flex align-items-center justify-content-between password-text-container\"><label\r\n            for=\"\">Password</label>\r\n          <div *ngIf=\"!showPassword\" class=\"password-config d-flex align-items-center cursor-pointer\"\r\n            (click)=\"showPassword = true\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/181720c1762866309854Icon_(3).svg\" alt=\"\">&nbsp;Show\r\n          </div>\r\n          <div class=\"password-config d-flex align-items-center cursor-pointer\" (click)=\"showPassword = false\"\r\n            *ngIf=\"showPassword\"><img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/994914c1762805529071Eye_off.svg\" alt=\"\">&nbsp;Hide\r\n          </div>\r\n        </div>\r\n        <div class=\"w-100 d-flex align-items-center\">\r\n          <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90 clr-black\"\r\n            placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n            (ngModelChange)=\"onPasswordChange()\">\r\n        </div>\r\n        <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n          Lowercase , 1 Special\r\n          Character , 1 Digit and Minimum 8 Characters*</span>\r\n        <!-- <div class=\"strength-bar-container\">\r\n        <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n          [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n      </div> -->\r\n      </div>\r\n    </div>\r\n    <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content: {\r\n          'label': 'Create Account' } \" (click)=\"createAccount()\" [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n      [buttonId]=\"data?.action?.buttons[0]?.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [disabled]=\"!isEmailValid || !isPasswordValid || !userName\" [loading]=\"buttonLoading\"\r\n      [isFullWidth]=\"true\"></app-button-element>\r\n    <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button> -->\r\n    <!-- <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n      *ngIf=\"buttonLoading\">Loading...</button> -->\r\n\r\n\r\n    <div class=\"sign-up text-secondary d-flex align-items-center justify-content-end \r\n    mt-3 fs-14 w-100 text-center \">Already have an account?&nbsp;<span (click)=\"currentPage = 'LOGIN'\"\r\n        class=\"cursor-pointer text-dark\">Login</span></div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n  <div>\r\n    <div class=\"input-box\">\r\n      <label for=\"\">Email or Phone number</label>\r\n      <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n        (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n    </div>\r\n    <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Submit</button>\r\n    <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n      simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n      [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n      [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n  </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n      <div class=\"area w-100\">\n        <ul class=\"circles\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\">\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n          <li></li>\n        </ul>\n      </div>\n\n      <!-- ===== SCREEN 1: PHONE NUMBER ===== -->\n      <div *ngIf=\"authScreen === 'PHONE'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3\" style=\"font-size:14px; color:#555;\">Unlock coupons, profile and much more</p>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-phone-input\">Email / Mobile Number</label>\n              <input id=\"auth-email-phone-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\" (keyup.enter)=\"sendOTP()\" />\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter a valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100 py-2\" [buttonData]=\"data?.action?.buttons[2]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[2]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[2]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[2]?.id ?? ''\" (click)=\"sendOTP()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[2]?.content?.label?.length > 0 ? data?.action?.buttons[2]?.content?.label : 'SEND\n              OTP' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PASSWORD'\">\n                Login with Password\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 2: OTP VERIFICATION ===== -->\n      <div *ngIf=\"authScreen === 'OTP'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\" [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex text-center flex-column align-items-center justify-content-center mb-2 login-main-section\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 clr-black login-text\">LOGIN OR SIGNUP</p>\n          </div>\n          <hr class=\"mx-0 my-0\" style=\"border-color: #e8e8e8;\">\n\n          <div class=\"login-input-section mt-4\">\n            <p class=\"text-center mb-3 clr-black\" style=\"font-size:14px;\">\n              Enter 6-digit OTP sent to {{emailOrNumber}}\n            </p>\n\n            <div class=\"d-flex align-items-center justify-content-between otp_input gap-1 mb-3\">\n              <div class=\"d-flex gap-2 w-100 justify-content-between\">\n                <input *ngFor=\"let control of otpControls.controls; let i = index\" #otpInput\n                  class=\"form-control text-center otp-box clr-black\" maxlength=\"1\" inputmode=\"numeric\"\n                  [formControl]=\"control\" (input)=\"onInput(i)\" (keydown)=\"onKeyDown($event, i)\" />\n              </div>\n            </div>\n\n            <div class=\"text-center mb-3\">\n              <span *ngIf=\"resendCountdown > 0\" class=\"clr-black fs-13\" style=\"font-weight:700; letter-spacing:0.04em;\">\n                RESEND IN &nbsp;{{formatCountdown(resendCountdown)}}\n              </span>\n              <span *ngIf=\"resendCountdown === 0\" class=\"cursor-pointer clr-black fs-13\"\n                style=\"font-weight:700; letter-spacing:0.04em; text-decoration:underline;\" (click)=\"resendOTPNew()\">\n                RESEND OTP\n              </span>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[1]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[1]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[1]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[1]?.id ?? ''\" (click)=\"verifyOTPNew()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[1]?.content?.label?.length > 0 ? data?.action?.buttons[1]?.content?.label :\n              'VERIFY OTP' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 3: REGISTER ===== -->\n      <div *ngIf=\"authScreen === 'REGISTER'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">REGISTER</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n            <div class=\"input-box\">\n              <label for=\"auth-fullname-input\">Full Name</label>\n              <input id=\"auth-fullname-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"userName\"\n                placeholder=\"Jane Doe\">\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-phone-input\">Phone Number</label>\n              <div class=\"d-flex align-items-center w-100 password-input-container\">\n                <span class=\"clr-black\"\n                  style=\"font-size:14px; font-weight:500; padding: 0 8px 0 12px; white-space:nowrap;\">+91 |</span>\n                <input id=\"auth-reg-phone-input\" type=\"tel\" class=\"b-none clr-black w-90\" [(ngModel)]=\"phoneNumber\"\n                  placeholder=\"9876543210\" maxlength=\"10\" inputmode=\"numeric\" style=\"outline:none; font-size:14px;\" />\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-email-input\">Email</label>\n              <input id=\"auth-email-input\" type=\"email\" class=\"clr-black\" [(ngModel)]=\"email\"\n                placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\n                [style.borderColor]=\"!emailCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-reg-conf-password-input\">Confirm Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-reg-conf-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"confPassword\" placeholder=\"Confirm Password\">\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\" (click)=\"registerUser()\"\n              [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'CONTINUE' }}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- ===== SCREEN 4: LOGIN WITH PASSWORD ===== -->\n      <div *ngIf=\"authScreen === 'PASSWORD'\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\"\n        [simpoCorner]=\"styles?.corners\">\n        <div class=\"panel w-100\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoCorner]=\"styles?.corners\">\n\n          <div class=\"d-flex flex-column align-items-center justify-content-center mb-3\"\n            style=\"padding: 1.5rem 2rem 0.5rem;\">\n            <p class=\"mb-0 fs-20-fw-600 clr-black\">LOGIN</p>\n          </div>\n\n          <div class=\"d-flex w-100 signup-input-container flex-column\">\n\n            <div class=\"input-box\">\n              <label for=\"auth-pwd-email-input\">Email / Mobile Number</label>\n              <input id=\"auth-pwd-email-input\" type=\"text\" class=\"clr-black\" [(ngModel)]=\"emailOrNumber\"\n                placeholder=\"janedoe@gmail.com / 9876543210\" (ngModelChange)=\"onEmailOrNumberChange()\"\n                [style.borderColor]=\"!emailOrNumberCheck ? '' : 'red'\">\n              <span class=\"f-12\" *ngIf=\"emailOrNumberCheck\" [style.color]=\"'red'\">Please enter valid email or 10-digit\n                mobile number*</span>\n            </div>\n\n            <div class=\"input-box\">\n              <label for=\"auth-login-password-input\">Password</label>\n              <div class=\"password-input-container d-flex align-items-center w-100\" style=\"padding-right: 12px;\">\n                <input id=\"auth-login-password-input\" [type]=\"passwordHidden ? 'password' : 'text'\"\n                  class=\"b-none clr-black w-100\" [(ngModel)]=\"password\" placeholder=\"Password\"\n                  (keyup.enter)=\"loginWithPassword()\">\n                <mat-icon style=\"cursor: pointer; color: black; font-size: 20px; text-align: center\"\n                  (click)=\"passwordHidden = !passwordHidden\">\n                  {{passwordHidden ? 'visibility' : 'visibility_off'}}\n                </mat-icon>\n              </div>\n            </div>\n\n            <button class=\"send-btn gap-2 w-100  py-2\" [buttonData]=\"data?.action?.buttons[0]?.content\"\n              [buttonStyle]=\"data?.action?.buttons[0]?.styles\" simpoButtonDirective\n              [id]=\"data?.id+(data?.action?.buttons[0]?.id || '')\" [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonId]=\"data?.action?.buttons[0]?.id ?? ''\"\n              (click)=\"loginWithPassword()\" [disabled]=\"buttonLoading\">\n              <span class=\"spinner-border spinner-border-sm me-2\" role=\"status\" aria-hidden=\"true\"\n                *ngIf=\"buttonLoading\"></span>\n              {{ data?.action?.buttons[0]?.content?.label?.length > 0 ? data?.action?.buttons[0]?.content?.label :\n              'LOGIN' }}\n            </button>\n\n            <div class=\"mt-3 text-center\">\n              <span class=\"cursor-pointer clr-black fs-13\" style=\"font-weight:700; text-decoration:underline;\"\n                (click)=\"authScreen = 'PHONE'\">\n                Login with OTP\n              </span>\n            </div>\n\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.fa{font-family:\"Font Awesome 6 Free\"}.otp_input span{font-size:11px}.otp_input span:hover{text-decoration:underline}label,.eye{color:#000}.sign-up span:hover{text-decoration:underline}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{width:450px;margin:2rem auto;background:#ffffff26;box-shadow:0 25px 50px -12px #00000040;backface-visibility:hidden}.login-input-section{padding:0 2rem}.panel{background:#fffffff2;padding:0 0 2rem;position:relative;transition:all .4s ease;margin:unset!important}.input-box{display:flex;flex-direction:column;margin-bottom:.75rem;position:relative;transform-style:preserve-3d;gap:5px}.input-box label{transform:translateZ(20px);margin-left:5px}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);padding:.75rem;border-radius:12px;appearance:none;outline:none}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:radial-gradient(circle at 30% 30%,rgba(var(--accent-rgb, 102, 126, 234),.22),rgba(var(--accent-rgb, 102, 126, 234),.06));box-shadow:0 0 20px 4px rgba(var(--accent-rgb, 102, 126, 234),.15),inset 0 0 12px #ffffff1f;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;border:1px solid rgba(var(--accent-rgb, 102, 126, 234),.18);animation:floatUp 25s linear infinite,pulse 4s ease-in-out infinite alternate;bottom:-150px}.circles li:nth-child(1){left:10%;width:90px;height:90px;animation-delay:0s;animation-duration:22s}.circles li:nth-child(2){left:25%;width:30px;height:30px;animation-delay:3s;animation-duration:14s}.circles li:nth-child(3){left:45%;width:60px;height:60px;animation-delay:6s;animation-duration:18s}.circles li:nth-child(4){left:65%;width:110px;height:110px;animation-delay:1s;animation-duration:28s}.circles li:nth-child(5){left:80%;width:25px;height:25px;animation-delay:4s;animation-duration:12s}.circles li:nth-child(6){left:55%;width:70px;height:70px;animation-delay:9s;animation-duration:20s}.circles li:nth-child(7){left:35%;width:140px;height:140px;animation-delay:2s;animation-duration:32s}.circles li:nth-child(8){left:70%;width:40px;height:40px;animation-delay:12s;animation-duration:40s}.circles li:nth-child(9){left:5%;width:20px;height:20px;animation-delay:5s;animation-duration:30s}.circles li:nth-child(10){left:90%;width:55px;height:55px;animation-delay:7s;animation-duration:24s}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:.8}20%{opacity:1}80%{opacity:.7}to{transform:translateY(-110vh) rotate(540deg);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 12px 2px rgba(var(--accent-rgb, 102, 126, 234),.1)}to{box-shadow:0 0 32px 10px rgba(var(--accent-rgb, 102, 126, 234),.28)}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.clr-black{color:#000!important}.signup-input-container{padding:0 2rem}.fs-30-fw-600{font-size:30px;font-weight:600}.fs-20-fw-600{font-size:20px;font-weight:600}.fs-14-col-grey{font-size:14px;color:#979797}.fs-13{font-size:13px}.fs-14{font-size:14px}.password-input-container{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border:1px solid rgba(0,0,0,.08);border-radius:12px;appearance:none;outline:none}.b-none{border:none!important}.password-text-container{padding-left:.5rem;font-size:13px;margin-bottom:.3rem;color:#000}.password-text-container img{width:15px}.password-text-container .password-config{font-size:13px;color:#686f78}.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:18px 15px 0 0;margin-bottom:2rem}.login-main-section .login-text{font-size:20px;font-weight:600}.tab{padding:1rem;font-size:clamp(13px,3.2vw,15px)!important;font-weight:600;text-align:center;cursor:pointer;background:#d9d9d9;border:none;letter-spacing:.01em;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none;min-height:48px}.tab:hover{background:#cacaca}.tab.active{background:#1a1a1a;color:#fff}.otp-box{width:55px;height:55px;font-size:20px}h1{font-size:clamp(18px,4.5vw,22px);font-weight:600;color:#1a1a1a;text-align:center;margin-bottom:clamp(20px,5vw,28px);letter-spacing:-.01em}label{font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#333}input[type=email],input[type=password],input[type=text]{width:100%;padding:clamp(10px,2.5vw,12px) clamp(10px,2.5vw,14px);border:1.5px solid #e0e0e0;border-radius:clamp(8px,2vw,12px);font-size:clamp(13px,3.2vw,14px);color:#1a1a1a;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-text-size-adjust:100%}@media (max-width: 400px){input[type=email],input[type=password],input[type=text]{font-size:16px}}input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}input::placeholder{color:transparent}.forgot{display:block;text-align:right;font-size:clamp(11px,2.8vw,13px);font-weight:500;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;margin-top:clamp(6px,1.5vw,8px);cursor:pointer;touch-action:manipulation}.forgot:hover{color:#555}.submit-btn{display:block;width:100%;padding:clamp(13px,3.2vw,15px);margin-top:clamp(16px,4vw,24px);background:#c0bfbf;color:#fff;border:none;border-radius:50px;font-size:clamp(14px,3.5vw,15px);font-weight:600;cursor:pointer;letter-spacing:.01em;transition:background .2s;touch-action:manipulation;min-height:48px}.submit-btn:hover{background:#999}.submit-btn:active{background:#888}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: i8$3.MatBottomSheetRef, decorators: [{