tango-app-ui-auth 3.3.0-alpha.1 → 3.3.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -370,9 +370,10 @@ class Step1Component {
|
|
|
370
370
|
]),
|
|
371
371
|
],
|
|
372
372
|
websiteUrl: ['', Validators.compose([
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
373
|
+
Validators.pattern(/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/)
|
|
374
|
+
// Validators.required,
|
|
375
|
+
// Validators.minLength(3),
|
|
376
|
+
// Validators.maxLength(50),
|
|
376
377
|
]),
|
|
377
378
|
],
|
|
378
379
|
corporateEmail: ['', Validators.compose([
|
|
@@ -532,11 +533,11 @@ class Step1Component {
|
|
|
532
533
|
}
|
|
533
534
|
currentDateStr = new Date().getFullYear().toString();
|
|
534
535
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: Step1Component, deps: [{ token: ConversionService }, { token: i2$1.FormBuilder }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
535
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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 class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"website\" class=\"form-label\">Brand Website URL</label>\r\n <input formControlName=\"websiteUrl\" type=\"text\" class=\"form-control\" id=\"website\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('websiteUrl')?.touched && aboutForm.get('websiteUrl')?.hasError('required') }\" autocomplete=\"off\" >\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 {{currentDateStr}} </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"] }] });
|
|
536
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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 class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"website\" class=\"form-label\">Brand Website URL</label>\r\n <input formControlName=\"websiteUrl\" type=\"text\" class=\"form-control\" id=\"website\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('websiteUrl')?.touched && aboutForm.get('websiteUrl')?.hasError('pattern') }\" autocomplete=\"off\" >\r\n <small \r\n *ngIf=\"aboutForm.get('websiteUrl')?.touched && aboutForm.get('websiteUrl')?.hasError('pattern')\">\r\n Enter valid website url\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 {{currentDateStr}} </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"] }] });
|
|
536
537
|
}
|
|
537
538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: Step1Component, decorators: [{
|
|
538
539
|
type: Component,
|
|
539
|
-
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 class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"website\" class=\"form-label\">Brand Website URL</label>\r\n <input formControlName=\"websiteUrl\" type=\"text\" class=\"form-control\" id=\"website\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('websiteUrl')?.touched && aboutForm.get('websiteUrl')?.hasError('required') }\" autocomplete=\"off\" >\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 {{currentDateStr}} </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"] }]
|
|
540
|
+
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 class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"website\" class=\"form-label\">Brand Website URL</label>\r\n <input formControlName=\"websiteUrl\" type=\"text\" class=\"form-control\" id=\"website\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('websiteUrl')?.touched && aboutForm.get('websiteUrl')?.hasError('pattern') }\" autocomplete=\"off\" >\r\n <small \r\n *ngIf=\"aboutForm.get('websiteUrl')?.touched && aboutForm.get('websiteUrl')?.hasError('pattern')\">\r\n Enter valid website url\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 {{currentDateStr}} </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"] }]
|
|
540
541
|
}], ctorParameters: () => [{ type: ConversionService }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
|
|
541
542
|
|
|
542
543
|
class ModalContentComponent {
|