tango-app-ui-auth 3.1.3-dev → 3.1.4-dev

package/fesm2022/tango-app-ui-auth.mjs

@@ -386,14 +386,14 @@ class Step1Component {
                     Validators.required,
                     Validators.minLength(8),
                     Validators.maxLength(320),
-                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/),
+                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/), this.noSpaceValidator
                 ]),
             ],
             confirmPassword: ['', Validators.compose([
                     Validators.required,
                     Validators.minLength(8),
                     Validators.maxLength(320),
-                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/),
+                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/), this.noSpaceValidator,
                     this.validateAreEqual.bind(this),
                 ]),
                 ,
@@ -403,6 +403,12 @@ class Step1Component {
             this.aboutForm.get('confirmPassword')?.updateValueAndValidity();
         });
     }
+    noSpaceValidator(control) {
+        if (control.value && control.value.indexOf(' ') >= 0) {
+            return { 'noSpaces': true };
+        }
+        return null;
+    }
     validateAreEqual(fieldControl) {
         return fieldControl?.value === this.aboutForm?.get('password').value ? null : {
             NotEqual: true,
@@ -515,11 +521,11 @@ class Step1Component {
         return k == 8 || k == 32 || (k >= 48 && k <= 57);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step1Component, deps: [{ token: ConversionService }, { token: i2$1.FormBuilder }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step1Component, selector: "lib-step1", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n    <div class=\"h-100 px-10 mx-5  my-7\">\r\n        <!-- <div>\r\n        <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n             alt=\"\" srcset=\"\"> -->\r\n        <div class=\"mobileshow\">\r\n            <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n            <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n                boost\r\n                sales.</p>\r\n\r\n\r\n            <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo3.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div class=\"me-20\">\r\n                    <h4 class=\"icon-more\">30 +</h4>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"mt-12 card-title\">\r\n                <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n                <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n                           \r\n                            \r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n                                Brand name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n                                Brand name must be maximum of 100 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n                                Brand name is required\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isClientNameTaken\">\r\n                                Brand Name already exists\r\n                            </small>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"firstname\" class=\"form-label\">First Name  <span class=\"alert-required\">*</span></label>\r\n                            <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n                                First name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n                                First name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n                                First name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n                            <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n                                Last name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n                                Last name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n                                Last name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"email\" class=\"form-label\">Corporate Email  <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n                                autocomplete=\"off\">\r\n                            <small  \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n                                Enter valid email ID\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isEmailTaken\">\r\n                                Email already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n                            <label for=\"phonenumber\" class=\"form-label\">Phone number  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                            <!-- <div class=\"input-group mb-3\">\r\n                                <div class=\"input-group-append\"> -->\r\n                                    <!-- <select\r\n                                    class=\"form-select form-select-solid select2-hidden-accessible form-label text-dark fs-4\"\r\n                                    name=\"dialCode\" #dialCode=\"ngModel\"\r\n                                    [ngModelOptions]=\"{standalone: true}\" matNativeControl required\r\n                                    [(ngModel)]=\"countryCodes\" (click)=\"chooseCountry(countryCodes)\">\r\n                                    <option [value]=\"country.dial_code\" *ngFor=\"let country of countryCodeList\"><span\r\n                                            class=\"fw-bolder text-dark  ps-3\">\r\n                                            {{ country.name }}</span><span class=\"text-muted\">({{ country.dial_code\r\n                                            }})</span>\r\n                                    </option>\r\n                                </select> -->\r\n                                    <select formControlName=\"countryCode\" class=\"form-select ps-3 pe-8\" \r\n                                        id=\"inputGroupSelect01\">\r\n                                        <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.name}}<span class=\"text-muted\">({{ country.phonecode\r\n                                        }})</span></option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                <!-- <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\"  [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    class=\"form-control border-disabled\" readonly> -->\r\n                                <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\" [ngClass]=\"{ ' is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    id=\"phonenumber\" autocomplete=\"off\">\r\n                                    </div>\r\n                            </div>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n                                Phone number is required\r\n                            </small>\r\n                            <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n                                Enter a valid phone number\r\n                            </small>\r\n                            <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                        <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                            <small \r\n                                *ngIf=\"isMobileTaken\">\r\n                                Phone Number already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"password\" class=\"form-label\">Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\"  [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n                                class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n                                <span (click)=\"showPassword()\"\r\n                                class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                                data-kt-password-meter-control=\"visibility\">\r\n                                <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                            </span>\r\n                            </div>\r\n                            <div  class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"passwordStrength\"\r\n                                    [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"confirm\" class=\"form-label\">Confirm Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n                             id=\"confirm\" autocomplete=\"off\">\r\n                             <span (click)=\"showConfirmPassword()\"\r\n                             class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                             data-kt-password-meter-control=\"visibility\">\r\n                             <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                             <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                         </span>\r\n                         </div>\r\n                            <div class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"confirmPasswordStrength\"\r\n                                    [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n                                <small \r\n                                    *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n                                    does not match</small>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </form>\r\n                <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n                <div class=\"text-end\">\r\n                    <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n                        <span class=\"indicator-label px-5\">\r\n                            <ng-container>\r\n                                Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </ng-container>\r\n\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n                <!-- </ng-container> -->\r\n            </div>\r\n\r\n        </div>\r\n        <!-- </div> -->\r\n    </div>\r\n    <div  class=\"mb-3 d-flex flex-column flex-md-row  flex-md-stack pt-3 container-fluid\">\r\n        <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n            <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n            <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n        </div>\r\n        <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\"  class=\"menu-link px-5\">Contact Us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n        </ul>\r\n    </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:24px;height:45px;padding:.5rem 1rem;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;min-width:auto;max-width:14.5%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:14.5%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step1Component, selector: "lib-step1", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n    <div class=\"h-100 px-10 mx-5  my-7\">\r\n        <!-- <div>\r\n        <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n             alt=\"\" srcset=\"\"> -->\r\n        <div class=\"mobileshow\">\r\n            <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n            <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n                boost\r\n                sales.</p>\r\n\r\n\r\n            <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo3.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div class=\"me-20\">\r\n                    <h4 class=\"icon-more\">30 +</h4>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"mt-12 card-title\">\r\n                <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n                <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n                           \r\n                            \r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n                                Brand name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n                                Brand name must be maximum of 100 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n                                Brand name is required\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isClientNameTaken\">\r\n                                Brand Name already exists\r\n                            </small>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"firstname\" class=\"form-label\">First Name  <span class=\"alert-required\">*</span></label>\r\n                            <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n                                First name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n                                First name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n                                First name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n                            <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n                                Last name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n                                Last name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n                                Last name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"email\" class=\"form-label\">Corporate Email  <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n                                autocomplete=\"off\">\r\n                            <small  \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n                                Enter valid email ID\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isEmailTaken\">\r\n                                Email already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n                            <label for=\"phonenumber\" class=\"form-label\">Phone number  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                            <!-- <div class=\"input-group mb-3\">\r\n                                <div class=\"input-group-append\"> -->\r\n                                    <!-- <select\r\n                                    class=\"form-select form-select-solid select2-hidden-accessible form-label text-dark fs-4\"\r\n                                    name=\"dialCode\" #dialCode=\"ngModel\"\r\n                                    [ngModelOptions]=\"{standalone: true}\" matNativeControl required\r\n                                    [(ngModel)]=\"countryCodes\" (click)=\"chooseCountry(countryCodes)\">\r\n                                    <option [value]=\"country.dial_code\" *ngFor=\"let country of countryCodeList\"><span\r\n                                            class=\"fw-bolder text-dark  ps-3\">\r\n                                            {{ country.name }}</span><span class=\"text-muted\">({{ country.dial_code\r\n                                            }})</span>\r\n                                    </option>\r\n                                </select> -->\r\n                                    <select formControlName=\"countryCode\" class=\"form-select ps-3 pe-8\" \r\n                                        id=\"inputGroupSelect01\">\r\n                                        <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.name}}<span class=\"text-muted\">({{ country.phonecode\r\n                                        }})</span></option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                <!-- <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\"  [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    class=\"form-control border-disabled\" readonly> -->\r\n                                <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\" [ngClass]=\"{ ' is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    id=\"phonenumber\" autocomplete=\"off\" minlength=\"7\" maxlength=\"15\">\r\n                                    </div>\r\n                            </div>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n                                Phone number is required\r\n                            </small>\r\n                            <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n                                Enter a valid phone number\r\n                            </small>\r\n                            <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                        <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                            <small \r\n                                *ngIf=\"isMobileTaken\">\r\n                                Phone Number already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"password\" class=\"form-label\">Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\"  [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n                                class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n                                <span (click)=\"showPassword()\"\r\n                                class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                                data-kt-password-meter-control=\"visibility\">\r\n                                <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                            </span>\r\n                            </div>\r\n                            <div  class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"passwordStrength\"\r\n                                    [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n                            </div>\r\n                            <div >\r\n                                <small *ngIf=\"aboutForm.get('password')?.hasError('noSpaces') && aboutForm.get('password')?.touched\">Password cannot contain spaces.</small> \r\n                              </div>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"confirm\" class=\"form-label\">Confirm Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n                             id=\"confirm\" autocomplete=\"off\">\r\n                             <span (click)=\"showConfirmPassword()\"\r\n                             class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                             data-kt-password-meter-control=\"visibility\">\r\n                             <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                             <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                         </span>\r\n                         </div>\r\n                            <div class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"confirmPasswordStrength\"\r\n                                    [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n                                <small \r\n                                    *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n                                    does not match</small>\r\n                                <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('noSpaces') && !aboutForm.get('confirmPassword')?.hasError('NotEqual') && aboutForm.get('confirmPassword')?.touched\">Password cannot contain spaces.</small> \r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </form>\r\n                <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n                <div class=\"text-end\">\r\n                    <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n                        <span class=\"indicator-label px-5\">\r\n                            <ng-container>\r\n                                Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </ng-container>\r\n\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n                <!-- </ng-container> -->\r\n            </div>\r\n\r\n        </div>\r\n        <!-- </div> -->\r\n    </div>\r\n    <div  class=\"mb-3 d-flex flex-column flex-md-row  flex-md-stack pt-3 container-fluid\">\r\n        <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n            <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n            <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n        </div>\r\n        <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\"  class=\"menu-link px-5\">Contact Us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n        </ul>\r\n    </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:24px;height:45px;padding:.5rem 1rem;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;min-width:auto;max-width:14.5%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:14.5%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step1Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-step1', template: "<div class=\"card mt-10 mx-15\">\r\n    <div class=\"h-100 px-10 mx-5  my-7\">\r\n        <!-- <div>\r\n        <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n             alt=\"\" srcset=\"\"> -->\r\n        <div class=\"mobileshow\">\r\n            <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n            <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n                boost\r\n                sales.</p>\r\n\r\n\r\n            <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo3.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div class=\"me-20\">\r\n                    <h4 class=\"icon-more\">30 +</h4>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"mt-12 card-title\">\r\n                <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n                <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n                           \r\n                            \r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n                                Brand name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n                                Brand name must be maximum of 100 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n                                Brand name is required\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isClientNameTaken\">\r\n                                Brand Name already exists\r\n                            </small>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"firstname\" class=\"form-label\">First Name  <span class=\"alert-required\">*</span></label>\r\n                            <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n                                First name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n                                First name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n                                First name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n                            <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n                                Last name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n                                Last name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n                                Last name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"email\" class=\"form-label\">Corporate Email  <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n                                autocomplete=\"off\">\r\n                            <small  \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n                                Enter valid email ID\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isEmailTaken\">\r\n                                Email already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n                            <label for=\"phonenumber\" class=\"form-label\">Phone number  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                            <!-- <div class=\"input-group mb-3\">\r\n                                <div class=\"input-group-append\"> -->\r\n                                    <!-- <select\r\n                                    class=\"form-select form-select-solid select2-hidden-accessible form-label text-dark fs-4\"\r\n                                    name=\"dialCode\" #dialCode=\"ngModel\"\r\n                                    [ngModelOptions]=\"{standalone: true}\" matNativeControl required\r\n                                    [(ngModel)]=\"countryCodes\" (click)=\"chooseCountry(countryCodes)\">\r\n                                    <option [value]=\"country.dial_code\" *ngFor=\"let country of countryCodeList\"><span\r\n                                            class=\"fw-bolder text-dark  ps-3\">\r\n                                            {{ country.name }}</span><span class=\"text-muted\">({{ country.dial_code\r\n                                            }})</span>\r\n                                    </option>\r\n                                </select> -->\r\n                                    <select formControlName=\"countryCode\" class=\"form-select ps-3 pe-8\" \r\n                                        id=\"inputGroupSelect01\">\r\n                                        <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.name}}<span class=\"text-muted\">({{ country.phonecode\r\n                                        }})</span></option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                <!-- <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\"  [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    class=\"form-control border-disabled\" readonly> -->\r\n                                <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\" [ngClass]=\"{ ' is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    id=\"phonenumber\" autocomplete=\"off\">\r\n                                    </div>\r\n                            </div>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n                                Phone number is required\r\n                            </small>\r\n                            <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n                                Enter a valid phone number\r\n                            </small>\r\n                            <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                        <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                            <small \r\n                                *ngIf=\"isMobileTaken\">\r\n                                Phone Number already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"password\" class=\"form-label\">Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\"  [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n                                class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n                                <span (click)=\"showPassword()\"\r\n                                class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                                data-kt-password-meter-control=\"visibility\">\r\n                                <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                            </span>\r\n                            </div>\r\n                            <div  class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"passwordStrength\"\r\n                                    [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"confirm\" class=\"form-label\">Confirm Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n                             id=\"confirm\" autocomplete=\"off\">\r\n                             <span (click)=\"showConfirmPassword()\"\r\n                             class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                             data-kt-password-meter-control=\"visibility\">\r\n                             <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                             <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                         </span>\r\n                         </div>\r\n                            <div class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"confirmPasswordStrength\"\r\n                                    [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n                                <small \r\n                                    *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n                                    does not match</small>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </form>\r\n                <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n                <div class=\"text-end\">\r\n                    <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n                        <span class=\"indicator-label px-5\">\r\n                            <ng-container>\r\n                                Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </ng-container>\r\n\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n                <!-- </ng-container> -->\r\n            </div>\r\n\r\n        </div>\r\n        <!-- </div> -->\r\n    </div>\r\n    <div  class=\"mb-3 d-flex flex-column flex-md-row  flex-md-stack pt-3 container-fluid\">\r\n        <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n            <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n            <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n        </div>\r\n        <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\"  class=\"menu-link px-5\">Contact Us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n        </ul>\r\n    </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:24px;height:45px;padding:.5rem 1rem;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;min-width:auto;max-width:14.5%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:14.5%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
+            args: [{ selector: 'lib-step1', template: "<div class=\"card mt-10 mx-15\">\r\n    <div class=\"h-100 px-10 mx-5  my-7\">\r\n        <!-- <div>\r\n        <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n             alt=\"\" srcset=\"\"> -->\r\n        <div class=\"mobileshow\">\r\n            <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n            <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n                boost\r\n                sales.</p>\r\n\r\n\r\n            <div class=\"d-flex justify-content-between\">\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo3.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div>\r\n                    <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n                </div>\r\n                <div class=\"me-20\">\r\n                    <h4 class=\"icon-more\">30 +</h4>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"mt-12 card-title\">\r\n                <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n                <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n                           \r\n                            \r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n                                Brand name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n                                Brand name must be maximum of 100 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n                                Brand name is required\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isClientNameTaken\">\r\n                                Brand Name already exists\r\n                            </small>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"row px-0\">\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"firstname\" class=\"form-label\">First Name  <span class=\"alert-required\">*</span></label>\r\n                            <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n                            [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n                                First name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n                                First name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n                                First name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n                            <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n                                Last name must be minimum of 3 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n                                Last name must be maximum of 50 letters\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n                                Last name is required\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"email\" class=\"form-label\">Corporate Email  <span class=\"alert-required\">*</span></label>\r\n                            <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n                                autocomplete=\"off\">\r\n                            <small  \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n                                Enter a valid email\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n                                Enter valid email ID\r\n                            </small>\r\n                            <small \r\n                                *ngIf=\"isEmailTaken\">\r\n                                Email already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n                            <label for=\"phonenumber\" class=\"form-label\">Phone number  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"row\">\r\n                                <div class=\"col-md-12 col-lg-4 col-xl-4\">\r\n                            <!-- <div class=\"input-group mb-3\">\r\n                                <div class=\"input-group-append\"> -->\r\n                                    <!-- <select\r\n                                    class=\"form-select form-select-solid select2-hidden-accessible form-label text-dark fs-4\"\r\n                                    name=\"dialCode\" #dialCode=\"ngModel\"\r\n                                    [ngModelOptions]=\"{standalone: true}\" matNativeControl required\r\n                                    [(ngModel)]=\"countryCodes\" (click)=\"chooseCountry(countryCodes)\">\r\n                                    <option [value]=\"country.dial_code\" *ngFor=\"let country of countryCodeList\"><span\r\n                                            class=\"fw-bolder text-dark  ps-3\">\r\n                                            {{ country.name }}</span><span class=\"text-muted\">({{ country.dial_code\r\n                                            }})</span>\r\n                                    </option>\r\n                                </select> -->\r\n                                    <select formControlName=\"countryCode\" class=\"form-select ps-3 pe-8\" \r\n                                        id=\"inputGroupSelect01\">\r\n                                        <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.name}}<span class=\"text-muted\">({{ country.phonecode\r\n                                        }})</span></option>\r\n                                    </select>\r\n                                </div>\r\n                                <div class=\"col-md-12 col-lg-8 col-xl-8\">\r\n                                <!-- <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\"  [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    class=\"form-control border-disabled\" readonly> -->\r\n                                <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"text\" class=\"form-control\" (keypress)=\"omit_special_char($event)\" [ngClass]=\"{ ' is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n                                    id=\"phonenumber\" autocomplete=\"off\" minlength=\"7\" maxlength=\"15\">\r\n                                    </div>\r\n                            </div>\r\n                            <small \r\n                                *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n                                Phone number is required\r\n                            </small>\r\n                            <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n                                Enter a valid phone number\r\n                            </small>\r\n                            <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                        <small\r\n                            *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n                            Enter a valid phone number\r\n                        </small>\r\n                            <small \r\n                                *ngIf=\"isMobileTaken\">\r\n                                Phone Number already exists\r\n                            </small>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"password\" class=\"form-label\">Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\"  [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n                                class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n                                <span (click)=\"showPassword()\"\r\n                                class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                                data-kt-password-meter-control=\"visibility\">\r\n                                <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                            </span>\r\n                            </div>\r\n                            <div  class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"passwordStrength\"\r\n                                    [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n                            </div>\r\n                            <div >\r\n                                <small *ngIf=\"aboutForm.get('password')?.hasError('noSpaces') && aboutForm.get('password')?.touched\">Password cannot contain spaces.</small> \r\n                              </div>\r\n                        </div>\r\n                        <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n                            <label for=\"confirm\" class=\"form-label\">Confirm Password  <span class=\"alert-required\">*</span></label>\r\n                            <div class=\"position-relative mb-3\">\r\n                            <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n                             id=\"confirm\" autocomplete=\"off\">\r\n                             <span (click)=\"showConfirmPassword()\"\r\n                             class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n                             data-kt-password-meter-control=\"visibility\">\r\n                             <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                             <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                         </span>\r\n                         </div>\r\n                            <div class=\"progressbar-wrapper mt-2\">\r\n                                <span [style.width]=\"confirmPasswordStrength\"\r\n                                    [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n                                    class=\"progressbar-inner\"></span>\r\n                            </div>\r\n                            <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n                            <div>\r\n                                <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n                                <small \r\n                                    *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n                                    does not match</small>\r\n                                <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('noSpaces') && !aboutForm.get('confirmPassword')?.hasError('NotEqual') && aboutForm.get('confirmPassword')?.touched\">Password cannot contain spaces.</small> \r\n\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </form>\r\n                <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n                <div class=\"text-end\">\r\n                    <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n                        <span class=\"indicator-label px-5\">\r\n                            <ng-container>\r\n                                Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg>\r\n                            </ng-container>\r\n\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n                <!-- </ng-container> -->\r\n            </div>\r\n\r\n        </div>\r\n        <!-- </div> -->\r\n    </div>\r\n    <div  class=\"mb-3 d-flex flex-column flex-md-row  flex-md-stack pt-3 container-fluid\">\r\n        <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n            <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n            <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n        </div>\r\n        <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\"  class=\"menu-link px-5\">Contact Us</a></li>\r\n            <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n        </ul>\r\n    </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:24px;height:45px;padding:.5rem 1rem;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;min-width:auto;max-width:14.5%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:14.5%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
         }], ctorParameters: () => [{ type: ConversionService }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
 
 class ModalContentComponent {
@@ -1321,7 +1327,7 @@ class TangoAuthForgotPasswordComponent {
                     Validators.required,
                     Validators.minLength(8),
                     Validators.maxLength(320),
-                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/),
+                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/), this.noSpaceValidator
                 ]),
             ],
             confirmPassword: [
@@ -1330,7 +1336,7 @@ class TangoAuthForgotPasswordComponent {
                     Validators.required,
                     Validators.minLength(8),
                     Validators.maxLength(320),
-                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/),
+                    Validators.pattern(/^(?=.*[A-Z])(?=.*\d).{8,}$/), this.noSpaceValidator,
                     this.validateAreEqual.bind(this),
                 ]),
             ],
@@ -1354,6 +1360,15 @@ class TangoAuthForgotPasswordComponent {
                 }
             },
         });
+        this.PasswordForm.get('password')?.valueChanges.subscribe(() => {
+            this.PasswordForm.get('confirmPassword')?.updateValueAndValidity();
+        });
+    }
+    noSpaceValidator(control) {
+        if (control.value && control.value.indexOf(' ') >= 0) {
+            return { 'noSpaces': true };
+        }
+        return null;
     }
     validateAreEqual(fieldControl) {
         return fieldControl?.value === this.PasswordForm?.get("password").value ? null : { NotEqual: true };
@@ -1401,11 +1416,11 @@ class TangoAuthForgotPasswordComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthForgotPasswordComponent, deps: [{ token: i5.ToastService }, { token: AuthService }, { token: i3.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: i3.Router }, { token: i4.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoAuthForgotPasswordComponent, selector: "lib-tango-auth-forgot-password", ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"row position-absolute\">\r\n        <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n            <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n        </div>\r\n        @if (emailEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-10 ms-10\">\r\n                                <h1 class=\"title my-4\"> Forgot Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n                                    we'll send you a OTP to reset your password.\r\n                                </div>\r\n                            </div>\r\n                            <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n                                <div class=\"mb-1\">\r\n                                    <label class=\"label\">Email</label>\r\n                                    <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n                                        name=\"email\">\r\n                                </div>\r\n                            </form>\r\n\r\n                            <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n                                <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n                                    (click)=\"onSubmit()\">Request reset link</button>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n                                to\r\n                                login</a>\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        }\r\n        @if(passwordEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-5 ms-10\">\r\n\r\n                                <h1 class=\"title my-4\">Reset Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n                                </div>\r\n                                <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n                                    <div class=\"row px-0\">\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"email\" class=\"form-label\">New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n                                                    formControlName=\"password\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n                                                <span (click)=\"showNewPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('password')?.touched) {\r\n                                                @if (PasswordForm.get('password')?.hasError('required')) {\r\n                                                    <small>Password is required</small>\r\n                                                } \r\n                                            }\r\n                                            <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">Use\r\n                                                8 or more characters with a mix of letters, numbers & symbols.</small>\r\n                                        </div>\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n                                                    formControlName=\"confirmPassword\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n                                                <span (click)=\"showVerifyPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('confirmPassword')?.touched) {\r\n                                                @if (PasswordForm.get('confirmPassword')?.hasError('required')) {\r\n                                                    <small>Confirm password is required</small>\r\n                                                } @else {\r\n                                                    <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The confirm password must\r\n                                                        contain atleast one capital letter and number.</small>\r\n                                                    <small\r\n                                                        *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.invalid\">Confirm password\r\n                                                        does not match</small>\r\n                                                }\r\n                                            }\r\n                                        </div>\r\n                                    </div>\r\n                                </form>\r\n                                <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n                                    <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n                                        (click)=\"onPasswordSubmit()\">Reset\r\n                                        password</button>\r\n                                </div>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n                                login</a>\r\n\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoAuthForgotPasswordComponent, selector: "lib-tango-auth-forgot-password", ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"row position-absolute\">\r\n        <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n            <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n        </div>\r\n        @if (emailEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-10 ms-10\">\r\n                                <h1 class=\"title my-4\"> Forgot Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n                                    we'll send you a OTP to reset your password.\r\n                                </div>\r\n                            </div>\r\n                            <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n                                <div class=\"mb-1\">\r\n                                    <label class=\"label\">Email</label>\r\n                                    <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n                                        name=\"email\">\r\n                                </div>\r\n                            </form>\r\n\r\n                            <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n                                <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n                                    (click)=\"onSubmit()\">Request reset link</button>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n                                to\r\n                                login</a>\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        }\r\n        @if(passwordEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-5 ms-10\">\r\n\r\n                                <h1 class=\"title my-4\">Reset Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n                                </div>\r\n                                <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n                                    <div class=\"row px-0\">\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"email\" class=\"form-label\">New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n                                                    formControlName=\"password\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n                                                <span (click)=\"showNewPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('password')?.touched) {\r\n                                                @if (PasswordForm.get('password')?.hasError('required')) {\r\n                                                    <small>Password is required</small>\r\n                                                } \r\n                                            }\r\n                                            <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">The password must contain atleast one capital letter and number.</small>\r\n                                            <small *ngIf=\"PasswordForm.get('password')?.hasError('noSpaces') && !PasswordForm.get('password')?.hasError('pattern') && PasswordForm.get('password')?.touched\">Password cannot contain spaces.</small> \r\n                                        </div>\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n                                                    formControlName=\"confirmPassword\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n                                                <span (click)=\"showVerifyPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('confirmPassword')?.touched) {\r\n                                                @if (PasswordForm.get('confirmPassword')?.hasError('required')) {\r\n                                                    <small>Confirm password is required</small>\r\n                                                } @else {\r\n                                                    <!-- <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The confirm password must\r\n                                                        contain atleast one capital letter and number.</small> -->\r\n                                                    <small\r\n                                                    *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('NotEqual') && !PasswordForm.get('confirmPassword')?.hasError('required')\">Password\r\n                                                        does not match</small>\r\n                                                }\r\n                                                <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('noSpaces') && !PasswordForm.get('confirmPassword')?.hasError('NotEqual') && PasswordForm.get('confirmPassword')?.touched\">Password cannot contain spaces.</small> \r\n                                            }\r\n                                        </div>\r\n                                    </div>\r\n                                </form>\r\n                                <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n                                    <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n                                        (click)=\"onPasswordSubmit()\">Reset\r\n                                        password</button>\r\n                                </div>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n                                login</a>\r\n\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthForgotPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-tango-auth-forgot-password", template: "<div class=\"container\">\r\n    <div class=\"row position-absolute\">\r\n        <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n            <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n        </div>\r\n        @if (emailEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-10 ms-10\">\r\n                                <h1 class=\"title my-4\"> Forgot Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n                                    we'll send you a OTP to reset your password.\r\n                                </div>\r\n                            </div>\r\n                            <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n                                <div class=\"mb-1\">\r\n                                    <label class=\"label\">Email</label>\r\n                                    <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n                                        name=\"email\">\r\n                                </div>\r\n                            </form>\r\n\r\n                            <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n                                <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n                                    (click)=\"onSubmit()\">Request reset link</button>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n                                to\r\n                                login</a>\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        }\r\n        @if(passwordEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-5 ms-10\">\r\n\r\n                                <h1 class=\"title my-4\">Reset Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n                                </div>\r\n                                <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n                                    <div class=\"row px-0\">\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"email\" class=\"form-label\">New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n                                                    formControlName=\"password\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n                                                <span (click)=\"showNewPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('password')?.touched) {\r\n                                                @if (PasswordForm.get('password')?.hasError('required')) {\r\n                                                    <small>Password is required</small>\r\n                                                } \r\n                                            }\r\n                                            <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">Use\r\n                                                8 or more characters with a mix of letters, numbers & symbols.</small>\r\n                                        </div>\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n                                                    formControlName=\"confirmPassword\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n                                                <span (click)=\"showVerifyPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('confirmPassword')?.touched) {\r\n                                                @if (PasswordForm.get('confirmPassword')?.hasError('required')) {\r\n                                                    <small>Confirm password is required</small>\r\n                                                } @else {\r\n                                                    <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The confirm password must\r\n                                                        contain atleast one capital letter and number.</small>\r\n                                                    <small\r\n                                                        *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.invalid\">Confirm password\r\n                                                        does not match</small>\r\n                                                }\r\n                                            }\r\n                                        </div>\r\n                                    </div>\r\n                                </form>\r\n                                <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n                                    <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n                                        (click)=\"onPasswordSubmit()\">Reset\r\n                                        password</button>\r\n                                </div>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n                                login</a>\r\n\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
+            args: [{ selector: "lib-tango-auth-forgot-password", template: "<div class=\"container\">\r\n    <div class=\"row position-absolute\">\r\n        <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n            <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n        </div>\r\n        @if (emailEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-10 ms-10\">\r\n                                <h1 class=\"title my-4\"> Forgot Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n                                    we'll send you a OTP to reset your password.\r\n                                </div>\r\n                            </div>\r\n                            <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n                                <div class=\"mb-1\">\r\n                                    <label class=\"label\">Email</label>\r\n                                    <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n                                        name=\"email\">\r\n                                </div>\r\n                            </form>\r\n\r\n                            <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n                                <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n                                    (click)=\"onSubmit()\">Request reset link</button>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n                                to\r\n                                login</a>\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        }\r\n        @if(passwordEnable) {\r\n            <div class=\"col-md-6 ps-10  d-flex justify-content-center align-items-center\">\r\n                <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n                    <div class=\"login-form login-signin w-100\">\r\n\r\n                        <div class=\"d-flex flex-column align-items-between title-padding\">\r\n                            <div class=\"text-start my-5 ms-10\">\r\n\r\n                                <h1 class=\"title my-4\">Reset Password\r\n                                </h1>\r\n                                <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n                                </div>\r\n                                <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n                                    <div class=\"row px-0\">\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"email\" class=\"form-label\">New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n                                                    formControlName=\"password\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n                                                <span (click)=\"showNewPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('password')?.touched) {\r\n                                                @if (PasswordForm.get('password')?.hasError('required')) {\r\n                                                    <small>Password is required</small>\r\n                                                } \r\n                                            }\r\n                                            <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">The password must contain atleast one capital letter and number.</small>\r\n                                            <small *ngIf=\"PasswordForm.get('password')?.hasError('noSpaces') && !PasswordForm.get('password')?.hasError('pattern') && PasswordForm.get('password')?.touched\">Password cannot contain spaces.</small> \r\n                                        </div>\r\n                                        <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n                                            <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n                                            <div class=\"position-relative mb-3\">\r\n                                                <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n                                                    formControlName=\"confirmPassword\"\r\n                                                    [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n                                                <span (click)=\"showVerifyPassword()\"\r\n                                                    class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n                                                    data-kt-password-meter-control=\"visibility\">\r\n                                                    <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n                                                    <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n                                                </span>\r\n                                            </div>\r\n                                            @if(PasswordForm.get('confirmPassword')?.touched) {\r\n                                                @if (PasswordForm.get('confirmPassword')?.hasError('required')) {\r\n                                                    <small>Confirm password is required</small>\r\n                                                } @else {\r\n                                                    <!-- <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The confirm password must\r\n                                                        contain atleast one capital letter and number.</small> -->\r\n                                                    <small\r\n                                                    *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('NotEqual') && !PasswordForm.get('confirmPassword')?.hasError('required')\">Password\r\n                                                        does not match</small>\r\n                                                }\r\n                                                <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('noSpaces') && !PasswordForm.get('confirmPassword')?.hasError('NotEqual') && PasswordForm.get('confirmPassword')?.touched\">Password cannot contain spaces.</small> \r\n                                            }\r\n                                        </div>\r\n                                    </div>\r\n                                </form>\r\n                                <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n                                    <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n                                        (click)=\"onPasswordSubmit()\">Reset\r\n                                        password</button>\r\n                                </div>\r\n                            </div>\r\n                            <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n                                login</a>\r\n\r\n                        </div>\r\n                        <div class=\" d-flex flex-column flex-md-row mb-3  flex-md-stack pt-3 container-fluid\">\r\n                            <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n                                <span class=\"me-1 footer\">2024</span>\r\n                                <a target=\"_blank\"\r\n                                    class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n                                    India Pvt Ltd</a>\r\n                            </div>\r\n                            <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n                                <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n                                        class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n                                            height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n                                            <path\r\n                                                d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n                                                stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n                            </ul>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
         }], ctorParameters: () => [{ type: i5.ToastService }, { type: AuthService }, { type: i3.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: i3.Router }, { type: i4.PageInfoService }] });
 
 const routes = [