tango-app-ui-auth 3.1.6-dev → 3.1.7-dev
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.
|
@@ -523,12 +523,13 @@ class Step1Component {
|
|
|
523
523
|
k = event.charCode; // k = event.keyCode; (Both can be used)
|
|
524
524
|
return k == 8 || k == 32 || (k >= 48 && k <= 57);
|
|
525
525
|
}
|
|
526
|
+
currentDateStr = new Date().getFullYear().toString();
|
|
526
527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Step1Component, deps: [{ token: ConversionService }, { token: i2$1.FormBuilder }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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"] }] });
|
|
528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", 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 {{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"] }] });
|
|
528
529
|
}
|
|
529
530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Step1Component, decorators: [{
|
|
530
531
|
type: Component,
|
|
531
|
-
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"] }]
|
|
532
|
+
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 {{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"] }]
|
|
532
533
|
}], ctorParameters: () => [{ type: ConversionService }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
|
|
533
534
|
|
|
534
535
|
class ModalContentComponent {
|