tango-app-ui-auth 3.0.24-dev → 3.0.26-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.
Files changed (8) hide show
  1. package/esm2022/lib/components/tango-auth-login/tango-auth-login.component.mjs +6 -3
  2. package/esm2022/lib/components/tango-auth-signup/step/step1/step1.component.mjs +3 -3
  3. package/esm2022/lib/components/tango-auth-signup/step/step2/step2.component.mjs +3 -3
  4. package/esm2022/lib/guards/auth.guard.mjs +2 -2
  5. package/fesm2022/tango-app-ui-auth.mjs +10 -7
  6. package/fesm2022/tango-app-ui-auth.mjs.map +1 -1
  7. package/lib/components/tango-auth-login/tango-auth-login.component.d.ts +1 -0
  8. package/package.json +1 -1
package/fesm2022/tango-app-ui-auth.mjs CHANGED
@@ -150,6 +150,7 @@ class TangoAuthLoginComponent {
150
150
  password: null,
151
151
  };
152
152
  isLoading;
153
+ isloader = true;
153
154
  emailInputRef;
154
155
  passwordInputRef;
155
156
  authlocalStorageToken;
@@ -188,6 +189,7 @@ class TangoAuthLoginComponent {
188
189
  this.destroy$.complete();
189
190
  }
190
191
  initForm() {
192
+ this.isloader = false;
191
193
  this.loginForm = this.fb.group({
192
194
  email: [
193
195
  this.defaultAuth.email,
@@ -209,6 +211,7 @@ class TangoAuthLoginComponent {
209
211
  });
210
212
  }
211
213
  onLogin() {
214
+ localStorage.clear();
212
215
  this.hasError = false;
213
216
  this.isLoading = true;
214
217
  this.show = false;
@@ -261,11 +264,11 @@ class TangoAuthLoginComponent {
261
264
  this.show = !this.show;
262
265
  }
263
266
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthLoginComponent, deps: [{ token: i3.Router }, { token: i3.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: AuthService }, { token: i4.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i5.ToastService }], target: i0.ɵɵFactoryTarget.Component });
264
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TangoAuthLoginComponent, selector: "lib-tango-auth-login", viewQueries: [{ propertyName: "emailInputRef", first: true, predicate: ["emailInput"], descendants: true }, { propertyName: "passwordInputRef", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"row justify-content-center logotext px-0\">\r\n <img src=\"./assets/tango/Icons/login-background.svg\" alt=\"\">\r\n </div> -->\r\n\r\n<!-- \r\n<button (click)=\"onClick()\">Log In</button> -->\r\n\r\n<div class=\"container\">\r\n <!-- style=\"padding: 96px 142px 96px 142px;\" -->\r\n <div class=\"row position-absolute\" >\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n </div>\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\"> \r\n <div class=\"card\">\r\n \r\n \r\n\r\n\r\n \r\n <div class=\"login-form login-signin\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h3 class=\"login-title\">Log in</h3>\r\n <p class=\"login-sub-title\">Welcome back! Please enter your details.</p>\r\n </div>\r\n <form #loginForm=\"ngForm\" class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-5 \">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Email\" name=\"Email\" autocomplete=\"off\" required [(ngModel)]=\"credentials.email\" autocomplete=\"off\" #emailInput>\r\n </div>\r\n <div class=\"mb-5 \">\r\n <label for=\"Password\" class=\"form-label\">Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input class=\"form-control\" id=\"Password\" [type]=\"show ? 'text' : 'password'\"\r\n placeholder=\"\" name=\"password\" autocomplete=\"off\" required #passwordInput\r\n [(ngModel)]=\"credentials.password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"show\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!show\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div *ngIf=\"hasError\" class=\"text-danger\" style=\"color: #ffffff !important;\">\r\n Email Id / Mobile Number or Password is incorrect\r\n </div>\r\n </div>\r\n<div class=\"text-center\">\r\n <h6 class=\"forgot cursor-pointer\" routerLink=\"/auth/forgot-password\">Forgot Password</h6>\r\n\r\n</div>\r\n <button class=\"btn btn-primary w-100 mt-3\" [disabled]=\"!loginForm.valid || (!credentials.email || !credentials.password)\" (click)=\"onLogin()\">Sign in</button>\r\n\r\n <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_17759)\">\r\n <path\r\n d=\"M24.2663 12.9767C24.2663 12.161 24.2001 11.3408 24.059 10.5383H12.7402V15.1593H19.222C18.953 16.6497 18.0888 17.9681 16.8233 18.8058V21.8042H20.6903C22.9611 19.7142 24.2663 16.6276 24.2663 12.9767Z\"\r\n fill=\"#4285F4\" />\r\n <path\r\n d=\"M12.7401 24.701C15.9766 24.701 18.7059 23.6384 20.6945 21.8041L16.8276 18.8057C15.7517 19.5377 14.3627 19.9522 12.7445 19.9522C9.61388 19.9522 6.95946 17.8401 6.00705 15.0005H2.0166V18.0914C4.05371 22.1436 8.2029 24.701 12.7401 24.701Z\"\r\n fill=\"#34A853\" />\r\n <path\r\n d=\"M6.00277 15.0004C5.50011 13.5101 5.50011 11.8962 6.00277 10.4059V7.31494H2.01674C0.314734 10.7057 0.314734 14.7006 2.01674 18.0913L6.00277 15.0004Z\"\r\n fill=\"#FBBC04\" />\r\n <path\r\n d=\"M12.7401 5.44986C14.4509 5.4234 16.1044 6.06716 17.3434 7.24886L20.7695 3.82281C18.6001 1.7857 15.7208 0.665729 12.7401 0.701004C8.2029 0.701004 4.05371 3.25842 2.0166 7.315L6.00264 10.4059C6.95064 7.56193 9.60947 5.44986 12.7401 5.44986Z\"\r\n fill=\"#EA4335\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_17759\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Google</span> \r\n <span class=\"tooltip\">Coming Soon</span>\r\n </button>\r\n <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" ><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_6141)\">\r\n <path d=\"M11.9057 12.104H0.5V0.700195H11.9057V12.104Z\" fill=\"#F1511B\" />\r\n <path d=\"M24.5004 12.104H13.0938V0.700195H24.4994V12.104H24.5004Z\" fill=\"#80CC28\" />\r\n <path d=\"M11.9057 24.7002H0.5V13.2964H11.9057V24.7002Z\" fill=\"#00ADEF\" />\r\n <path d=\"M24.5004 24.7002H13.0938V13.2964H24.4994V24.7002H24.5004Z\" fill=\"#FBBC09\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_6141\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Microsoft</span> <span class=\"tooltip\">Coming Soon</span></button>\r\n </form>\r\n\r\n <div class=\"mt-3 text-center ms-75px\"><span class=\"signup-default\"></span>Don\u2019t have an account?<span class=\"signup-primary ms-2 cursor-pointer\" routerLink=\"/auth/signup\">Sign up</span></div>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\" class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions 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\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\" stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n \r\n </ul>\r\n </div>\r\n </div>\r\n \r\n\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n<img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>", styles: [".container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.not-allowed{cursor:not-allowed!important}.btn-outline.coming-soon{border-color:#ced4da;color:#6c757d;position:relative}.btn-outline.coming-soon:hover{border-color:#6c757d;color:#212529}.tooltip{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:1;bottom:100%;left:50%;transform:translate(-50%);width:max-content}.btn-outline.coming-soon:hover .tooltip{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
267
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TangoAuthLoginComponent, selector: "lib-tango-auth-login", viewQueries: [{ propertyName: "emailInputRef", first: true, predicate: ["emailInput"], descendants: true }, { propertyName: "passwordInputRef", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<!-- <div class=\"row justify-content-center logotext px-0\">\r\n <img src=\"./assets/tango/Icons/login-background.svg\" alt=\"\">\r\n </div> -->\r\n\r\n<!-- \r\n<button (click)=\"onClick()\">Log In</button> -->\r\n\r\n<div *ngIf=\"isloader\" class=\"container mt-20\">\r\n <div class=\"text-center mt-20\">\r\n <img src=\"./assets/tango/layout/Loader.gif\" alt=\"Tango logo\" />\r\n <div>Loading ...</div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!isloader\" class=\"container\">\r\n <!-- style=\"padding: 96px 142px 96px 142px;\" -->\r\n <div class=\"row position-absolute\" >\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid w-100\">\r\n </div>\r\n <div class=\"col-md-6 px-10 d-flex justify-content-center align-items-center\"> \r\n <div class=\"card card-flush w-lg-600px ms-20 py-3\">\r\n <div class=\"login-form login-signin\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h3 class=\"login-title\">Log in</h3>\r\n <p class=\"login-sub-title\">Welcome back! Please enter your details.</p>\r\n </div>\r\n <form #loginForm=\"ngForm\" class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-5 \">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Email\" name=\"Email\" autocomplete=\"off\" required [(ngModel)]=\"credentials.email\" autocomplete=\"off\" #emailInput>\r\n </div>\r\n <div class=\"mb-5 \">\r\n <label for=\"Password\" class=\"form-label\">Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input class=\"form-control\" id=\"Password\" [type]=\"show ? 'text' : 'password'\"\r\n placeholder=\"\" name=\"password\" autocomplete=\"off\" required #passwordInput\r\n [(ngModel)]=\"credentials.password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"show\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!show\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div *ngIf=\"hasError\" class=\"text-danger\" style=\"color: #ffffff !important;\">\r\n Email Id / Mobile Number or Password is incorrect\r\n </div>\r\n </div>\r\n<div class=\"text-center\">\r\n <h6 class=\"forgot cursor-pointer\" routerLink=\"/auth/forgot-password\">Forgot Password</h6>\r\n\r\n</div>\r\n <button class=\"btn btn-primary w-100 mt-3\" [disabled]=\"!loginForm.valid || (!credentials.email || !credentials.password)\" (click)=\"onLogin()\">Sign in</button>\r\n\r\n <!-- <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_17759)\">\r\n <path\r\n d=\"M24.2663 12.9767C24.2663 12.161 24.2001 11.3408 24.059 10.5383H12.7402V15.1593H19.222C18.953 16.6497 18.0888 17.9681 16.8233 18.8058V21.8042H20.6903C22.9611 19.7142 24.2663 16.6276 24.2663 12.9767Z\"\r\n fill=\"#4285F4\" />\r\n <path\r\n d=\"M12.7401 24.701C15.9766 24.701 18.7059 23.6384 20.6945 21.8041L16.8276 18.8057C15.7517 19.5377 14.3627 19.9522 12.7445 19.9522C9.61388 19.9522 6.95946 17.8401 6.00705 15.0005H2.0166V18.0914C4.05371 22.1436 8.2029 24.701 12.7401 24.701Z\"\r\n fill=\"#34A853\" />\r\n <path\r\n d=\"M6.00277 15.0004C5.50011 13.5101 5.50011 11.8962 6.00277 10.4059V7.31494H2.01674C0.314734 10.7057 0.314734 14.7006 2.01674 18.0913L6.00277 15.0004Z\"\r\n fill=\"#FBBC04\" />\r\n <path\r\n d=\"M12.7401 5.44986C14.4509 5.4234 16.1044 6.06716 17.3434 7.24886L20.7695 3.82281C18.6001 1.7857 15.7208 0.665729 12.7401 0.701004C8.2029 0.701004 4.05371 3.25842 2.0166 7.315L6.00264 10.4059C6.95064 7.56193 9.60947 5.44986 12.7401 5.44986Z\"\r\n fill=\"#EA4335\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_17759\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Google</span> \r\n <span class=\"tooltip\">Coming Soon</span>\r\n </button>\r\n <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" ><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_6141)\">\r\n <path d=\"M11.9057 12.104H0.5V0.700195H11.9057V12.104Z\" fill=\"#F1511B\" />\r\n <path d=\"M24.5004 12.104H13.0938V0.700195H24.4994V12.104H24.5004Z\" fill=\"#80CC28\" />\r\n <path d=\"M11.9057 24.7002H0.5V13.2964H11.9057V24.7002Z\" fill=\"#00ADEF\" />\r\n <path d=\"M24.5004 24.7002H13.0938V13.2964H24.4994V24.7002H24.5004Z\" fill=\"#FBBC09\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_6141\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Microsoft</span> <span class=\"tooltip\">Coming Soon</span></button> -->\r\n </form>\r\n\r\n <div class=\"mt-3 text-center ms-75px\"><span class=\"signup-default\"></span>Don\u2019t have an account?<span class=\"signup-primary ms-2 cursor-pointer\" routerLink=\"/auth/signup\">Sign up</span></div>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack py-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer text-decoration-underline cursor-pointer\">&#64;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=\"mailto:support@tangotech.co.in?subject=Subject%20Here&body=Body%20Here\" class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\" stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n \r\n </ul>\r\n </div>\r\n </div>\r\n \r\n\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n<img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>", styles: [".container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.not-allowed{cursor:not-allowed!important}.btn-outline.coming-soon{border-color:#ced4da;color:#6c757d;position:relative}.btn-outline.coming-soon:hover{border-color:#6c757d;color:#212529}.tooltip{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:1;bottom:100%;left:50%;transform:translate(-50%);width:max-content}.btn-outline.coming-soon:hover .tooltip{visibility:visible}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
265
268
  }
266
269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthLoginComponent, decorators: [{
267
270
  type: Component,
268
- args: [{ selector: "lib-tango-auth-login", template: "<!-- <div class=\"row justify-content-center logotext px-0\">\r\n <img src=\"./assets/tango/Icons/login-background.svg\" alt=\"\">\r\n </div> -->\r\n\r\n<!-- \r\n<button (click)=\"onClick()\">Log In</button> -->\r\n\r\n<div class=\"container\">\r\n <!-- style=\"padding: 96px 142px 96px 142px;\" -->\r\n <div class=\"row position-absolute\" >\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n </div>\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\"> \r\n <div class=\"card\">\r\n \r\n \r\n\r\n\r\n \r\n <div class=\"login-form login-signin\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h3 class=\"login-title\">Log in</h3>\r\n <p class=\"login-sub-title\">Welcome back! Please enter your details.</p>\r\n </div>\r\n <form #loginForm=\"ngForm\" class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-5 \">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Email\" name=\"Email\" autocomplete=\"off\" required [(ngModel)]=\"credentials.email\" autocomplete=\"off\" #emailInput>\r\n </div>\r\n <div class=\"mb-5 \">\r\n <label for=\"Password\" class=\"form-label\">Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input class=\"form-control\" id=\"Password\" [type]=\"show ? 'text' : 'password'\"\r\n placeholder=\"\" name=\"password\" autocomplete=\"off\" required #passwordInput\r\n [(ngModel)]=\"credentials.password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"show\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!show\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div *ngIf=\"hasError\" class=\"text-danger\" style=\"color: #ffffff !important;\">\r\n Email Id / Mobile Number or Password is incorrect\r\n </div>\r\n </div>\r\n<div class=\"text-center\">\r\n <h6 class=\"forgot cursor-pointer\" routerLink=\"/auth/forgot-password\">Forgot Password</h6>\r\n\r\n</div>\r\n <button class=\"btn btn-primary w-100 mt-3\" [disabled]=\"!loginForm.valid || (!credentials.email || !credentials.password)\" (click)=\"onLogin()\">Sign in</button>\r\n\r\n <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_17759)\">\r\n <path\r\n d=\"M24.2663 12.9767C24.2663 12.161 24.2001 11.3408 24.059 10.5383H12.7402V15.1593H19.222C18.953 16.6497 18.0888 17.9681 16.8233 18.8058V21.8042H20.6903C22.9611 19.7142 24.2663 16.6276 24.2663 12.9767Z\"\r\n fill=\"#4285F4\" />\r\n <path\r\n d=\"M12.7401 24.701C15.9766 24.701 18.7059 23.6384 20.6945 21.8041L16.8276 18.8057C15.7517 19.5377 14.3627 19.9522 12.7445 19.9522C9.61388 19.9522 6.95946 17.8401 6.00705 15.0005H2.0166V18.0914C4.05371 22.1436 8.2029 24.701 12.7401 24.701Z\"\r\n fill=\"#34A853\" />\r\n <path\r\n d=\"M6.00277 15.0004C5.50011 13.5101 5.50011 11.8962 6.00277 10.4059V7.31494H2.01674C0.314734 10.7057 0.314734 14.7006 2.01674 18.0913L6.00277 15.0004Z\"\r\n fill=\"#FBBC04\" />\r\n <path\r\n d=\"M12.7401 5.44986C14.4509 5.4234 16.1044 6.06716 17.3434 7.24886L20.7695 3.82281C18.6001 1.7857 15.7208 0.665729 12.7401 0.701004C8.2029 0.701004 4.05371 3.25842 2.0166 7.315L6.00264 10.4059C6.95064 7.56193 9.60947 5.44986 12.7401 5.44986Z\"\r\n fill=\"#EA4335\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_17759\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Google</span> \r\n <span class=\"tooltip\">Coming Soon</span>\r\n </button>\r\n <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" ><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_6141)\">\r\n <path d=\"M11.9057 12.104H0.5V0.700195H11.9057V12.104Z\" fill=\"#F1511B\" />\r\n <path d=\"M24.5004 12.104H13.0938V0.700195H24.4994V12.104H24.5004Z\" fill=\"#80CC28\" />\r\n <path d=\"M11.9057 24.7002H0.5V13.2964H11.9057V24.7002Z\" fill=\"#00ADEF\" />\r\n <path d=\"M24.5004 24.7002H13.0938V13.2964H24.4994V24.7002H24.5004Z\" fill=\"#FBBC09\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_6141\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Microsoft</span> <span class=\"tooltip\">Coming Soon</span></button>\r\n </form>\r\n\r\n <div class=\"mt-3 text-center ms-75px\"><span class=\"signup-default\"></span>Don\u2019t have an account?<span class=\"signup-primary ms-2 cursor-pointer\" routerLink=\"/auth/signup\">Sign up</span></div>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\" class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions 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\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\" stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n \r\n </ul>\r\n </div>\r\n </div>\r\n \r\n\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n<img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>", styles: [".container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.not-allowed{cursor:not-allowed!important}.btn-outline.coming-soon{border-color:#ced4da;color:#6c757d;position:relative}.btn-outline.coming-soon:hover{border-color:#6c757d;color:#212529}.tooltip{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:1;bottom:100%;left:50%;transform:translate(-50%);width:max-content}.btn-outline.coming-soon:hover .tooltip{visibility:visible}\n"] }]
271
+ args: [{ selector: "lib-tango-auth-login", template: "<!-- <div class=\"row justify-content-center logotext px-0\">\r\n <img src=\"./assets/tango/Icons/login-background.svg\" alt=\"\">\r\n </div> -->\r\n\r\n<!-- \r\n<button (click)=\"onClick()\">Log In</button> -->\r\n\r\n<div *ngIf=\"isloader\" class=\"container mt-20\">\r\n <div class=\"text-center mt-20\">\r\n <img src=\"./assets/tango/layout/Loader.gif\" alt=\"Tango logo\" />\r\n <div>Loading ...</div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"!isloader\" class=\"container\">\r\n <!-- style=\"padding: 96px 142px 96px 142px;\" -->\r\n <div class=\"row position-absolute\" >\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid w-100\">\r\n </div>\r\n <div class=\"col-md-6 px-10 d-flex justify-content-center align-items-center\"> \r\n <div class=\"card card-flush w-lg-600px ms-20 py-3\">\r\n <div class=\"login-form login-signin\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h3 class=\"login-title\">Log in</h3>\r\n <p class=\"login-sub-title\">Welcome back! Please enter your details.</p>\r\n </div>\r\n <form #loginForm=\"ngForm\" class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-5 \">\r\n <label for=\"Email\" class=\"form-label\">Email</label>\r\n <input type=\"email\" class=\"form-control\" id=\"Email\" name=\"Email\" autocomplete=\"off\" required [(ngModel)]=\"credentials.email\" autocomplete=\"off\" #emailInput>\r\n </div>\r\n <div class=\"mb-5 \">\r\n <label for=\"Password\" class=\"form-label\">Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input class=\"form-control\" id=\"Password\" [type]=\"show ? 'text' : 'password'\"\r\n placeholder=\"\" name=\"password\" autocomplete=\"off\" required #passwordInput\r\n [(ngModel)]=\"credentials.password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"show\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!show\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div *ngIf=\"hasError\" class=\"text-danger\" style=\"color: #ffffff !important;\">\r\n Email Id / Mobile Number or Password is incorrect\r\n </div>\r\n </div>\r\n<div class=\"text-center\">\r\n <h6 class=\"forgot cursor-pointer\" routerLink=\"/auth/forgot-password\">Forgot Password</h6>\r\n\r\n</div>\r\n <button class=\"btn btn-primary w-100 mt-3\" [disabled]=\"!loginForm.valid || (!credentials.email || !credentials.password)\" (click)=\"onLogin()\">Sign in</button>\r\n\r\n <!-- <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_17759)\">\r\n <path\r\n d=\"M24.2663 12.9767C24.2663 12.161 24.2001 11.3408 24.059 10.5383H12.7402V15.1593H19.222C18.953 16.6497 18.0888 17.9681 16.8233 18.8058V21.8042H20.6903C22.9611 19.7142 24.2663 16.6276 24.2663 12.9767Z\"\r\n fill=\"#4285F4\" />\r\n <path\r\n d=\"M12.7401 24.701C15.9766 24.701 18.7059 23.6384 20.6945 21.8041L16.8276 18.8057C15.7517 19.5377 14.3627 19.9522 12.7445 19.9522C9.61388 19.9522 6.95946 17.8401 6.00705 15.0005H2.0166V18.0914C4.05371 22.1436 8.2029 24.701 12.7401 24.701Z\"\r\n fill=\"#34A853\" />\r\n <path\r\n d=\"M6.00277 15.0004C5.50011 13.5101 5.50011 11.8962 6.00277 10.4059V7.31494H2.01674C0.314734 10.7057 0.314734 14.7006 2.01674 18.0913L6.00277 15.0004Z\"\r\n fill=\"#FBBC04\" />\r\n <path\r\n d=\"M12.7401 5.44986C14.4509 5.4234 16.1044 6.06716 17.3434 7.24886L20.7695 3.82281C18.6001 1.7857 15.7208 0.665729 12.7401 0.701004C8.2029 0.701004 4.05371 3.25842 2.0166 7.315L6.00264 10.4059C6.95064 7.56193 9.60947 5.44986 12.7401 5.44986Z\"\r\n fill=\"#EA4335\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_17759\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Google</span> \r\n <span class=\"tooltip\">Coming Soon</span>\r\n </button>\r\n <button class=\"btn btn-outline w-100 mt-3 not-allowed coming-soon\" ><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3727_6141)\">\r\n <path d=\"M11.9057 12.104H0.5V0.700195H11.9057V12.104Z\" fill=\"#F1511B\" />\r\n <path d=\"M24.5004 12.104H13.0938V0.700195H24.4994V12.104H24.5004Z\" fill=\"#80CC28\" />\r\n <path d=\"M11.9057 24.7002H0.5V13.2964H11.9057V24.7002Z\" fill=\"#00ADEF\" />\r\n <path d=\"M24.5004 24.7002H13.0938V13.2964H24.4994V24.7002H24.5004Z\" fill=\"#FBBC09\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3727_6141\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5 0.700195)\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"mx-2\">Sign in with Microsoft</span> <span class=\"tooltip\">Coming Soon</span></button> -->\r\n </form>\r\n\r\n <div class=\"mt-3 text-center ms-75px\"><span class=\"signup-default\"></span>Don\u2019t have an account?<span class=\"signup-primary ms-2 cursor-pointer\" routerLink=\"/auth/signup\">Sign up</span></div>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack py-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer text-decoration-underline cursor-pointer\">&#64;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=\"mailto:support@tangotech.co.in?subject=Subject%20Here&body=Body%20Here\" class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\" stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n \r\n </ul>\r\n </div>\r\n </div>\r\n \r\n\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n<img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>", styles: [".container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.not-allowed{cursor:not-allowed!important}.btn-outline.coming-soon{border-color:#ced4da;color:#6c757d;position:relative}.btn-outline.coming-soon:hover{border-color:#6c757d;color:#212529}.tooltip{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:1;bottom:100%;left:50%;transform:translate(-50%);width:max-content}.btn-outline.coming-soon:hover .tooltip{visibility:visible}\n"] }]
269
272
  }], ctorParameters: () => [{ type: i3.Router }, { type: i3.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i4.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i5.ToastService }], propDecorators: { emailInputRef: [{
270
273
  type: ViewChild,
271
274
  args: ['emailInput']
@@ -504,11 +507,11 @@ class Step1Component {
504
507
  this.confirmPasswordShow = !this.confirmPasswordShow;
505
508
  }
506
509
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step1Component, deps: [{ token: ConversionService }, { token: i2$1.FormBuilder }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
507
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step1Component, selector: "lib-step1", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-10 mx-5 my-7\">\r\n <!-- <div>\r\n <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n <div class=\"mobileshow\">\r\n <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n boost\r\n sales.</p>\r\n\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo3.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n </div>\r\n <div class=\"me-20\">\r\n <h4 class=\"icon-more\">30 +</h4>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-12 card-title\">\r\n <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n \r\n \r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n Brand name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n Brand name must be maximum of 100 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n Brand name is required\r\n </small>\r\n <small \r\n *ngIf=\"isClientNameTaken\">\r\n Brand Name already exists\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"firstname\" class=\"form-label\">First Name <span class=\"alert-required\">*</span></label>\r\n <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n First name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n First name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n First name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n Last name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n Last name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n Last name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Corporate Email <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n Enter valid email ID\r\n </small>\r\n <small \r\n *ngIf=\"isEmailTaken\">\r\n Email already exists\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n <label for=\"phonenumber\" class=\"form-label\">Phone number <span class=\"alert-required\">*</span></label>\r\n <div class=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ps-3 pe-8\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.isoCode}}</option>\r\n </select>\r\n </div>\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=\"number\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Phone Number already exists\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <span (click)=\"showConfirmPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" class=\"footer\">Tango IT solutions</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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
510
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step1Component, selector: "lib-step1", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-10 mx-5 my-7\">\r\n <!-- <div>\r\n <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n <div class=\"mobileshow\">\r\n <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n boost\r\n sales.</p>\r\n\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo3.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n </div>\r\n <div class=\"me-20\">\r\n <h4 class=\"icon-more\">30 +</h4>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-12 card-title\">\r\n <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n \r\n \r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n Brand name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n Brand name must be maximum of 100 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n Brand name is required\r\n </small>\r\n <small \r\n *ngIf=\"isClientNameTaken\">\r\n Brand Name already exists\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"firstname\" class=\"form-label\">First Name <span class=\"alert-required\">*</span></label>\r\n <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n First name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n First name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n First name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n Last name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n Last name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n Last name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Corporate Email <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n Enter valid email ID\r\n </small>\r\n <small \r\n *ngIf=\"isEmailTaken\">\r\n Email already exists\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n <label for=\"phonenumber\" class=\"form-label\">Phone number <span class=\"alert-required\">*</span></label>\r\n <div class=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ps-3 pe-8\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.isoCode}}</option>\r\n </select>\r\n </div>\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=\"number\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Phone Number already exists\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <span (click)=\"showConfirmPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:24px;height:45px;padding:.5rem 1rem;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;min-width:auto;max-width:14.5%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:14.5%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
508
511
  }
509
512
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step1Component, decorators: [{
510
513
  type: Component,
511
- 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=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ps-3 pe-8\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.isoCode}}</option>\r\n </select>\r\n </div>\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=\"number\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Phone Number already exists\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <span (click)=\"showConfirmPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" class=\"footer\">Tango IT solutions</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"] }]
514
+ 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=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ps-3 pe-8\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.phonecode\">{{country.isoCode}}</option>\r\n </select>\r\n </div>\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=\"number\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('min')\">\r\n Enter a valid phone number\r\n </small>\r\n <small\r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('max')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Phone Number already exists\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" [type]=\"passwordShow ? 'text' : 'password'\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n <span (click)=\"showPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"passwordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!passwordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <div class=\"position-relative mb-3\">\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" [type]=\"confirmPasswordShow ? 'text' : 'password'\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <span (click)=\"showConfirmPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"confirmPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!confirmPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('required') && aboutForm.get('confirmPassword')?.touched\">Confirm password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('NotEqual') && !aboutForm.get('confirmPassword')?.hasError('required')\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" href=\"https://tangoeye.ai\" class=\"footer\">Tango IT Solutions India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:24px;height:45px;padding:.5rem 1rem;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;min-width:auto;max-width:14.5%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:14.5%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
512
515
  }], ctorParameters: () => [{ type: ConversionService }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
513
516
 
514
517
  class ModalContentComponent {
@@ -893,11 +896,11 @@ class Step2Component {
893
896
  this.getPricingData();
894
897
  }
895
898
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step2Component, deps: [{ token: i1.NgbModal }, { token: ConversionService }, { token: AuthService }, { token: i2$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i5.ToastService }], target: i0.ɵɵFactoryTarget.Component });
896
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step2Component, selector: "lib-step2", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\"\r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\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\" class=\"footer\">Tango IT solutions</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>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!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: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
899
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step2Component, selector: "lib-step2", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\"\r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\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>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!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: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
897
900
  }
898
901
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step2Component, decorators: [{
899
902
  type: Component,
900
- args: [{ selector: 'lib-step2', template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\"\r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\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\" class=\"footer\">Tango IT solutions</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>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!important}\n"] }]
903
+ args: [{ selector: 'lib-step2', template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-5 mx-5 mt-7\">\r\n <!-- <img class=\"bubble\" src=\"./assets/tango/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n\r\n <div class=\"d-flex flex-column beforeChoosing my-12\">\r\n <h1 class=\"heading mb-5\">How many stores do you have?</h1>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-9 col-xl-8 col-xxl-8 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer \"\r\n *ngFor=\"let count of storeCounts\" (click)=\"activeStoreCount(count)\"\r\n [class.activeClass]=\"count.active\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"count.active === true? 'store-primary':'text-color'\">{{ count.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storedetials\">\r\n <h2 class=\"heading mt-10 mb-5 \">What's the average size of your store?</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 w-auto\">\r\n <div class=\"d-flex align-items-center bg-gray\">\r\n <div class=\"d-flex align-items-center justify-content-center activeClass cursor-pointer\"\r\n [class.activeClass]=\"i.active\" *ngFor=\"let i of featAreaOptions\"\r\n (click)=\"activefeatArea(i)\">\r\n <div class=\"d-flex align-items-center mx-2\">\r\n <div class=\"fs-4 fw-bold\" [ngClass]=\"i.active === true? 'store-primary':'text-color'\">{{ i.text }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"featAreaCamera\" class=\"notice d-flex mt-5\">\r\n <div class=\"d-flex justify-content-center align-items-center gap-16px\">\r\n <span class=\"border-store\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M1.3335 9.66667L8.00016 13L14.6668 9.66667M8.00016 3L1.3335 6.33333L8.00016 9.66667L14.6668 6.33333L8.00016 3Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"featareaval ms-4\">Maximum {{featAreaCamera}} Cameras are permitted in stores with\r\n square feet between\r\n {{featArea}}.</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"pricevalue\">\r\n <div class=\"card-body px-0 mt-10\">\r\n <!--begin::Plans-->\r\n <div class=\"d-flex flex-column\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-10 text-start\">\r\n <h1 class=\"heading mb-5\">Plan Details</h1>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline mx-auto mb-15\">\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\r\n [ngClass]=\"plan === 'monthly'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"month\"\r\n (click)=\"selectPlan('monthly')\">\r\n Monthly\r\n </button>\r\n\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'quarterly'? 'activePlanBtn':'inactivePlanBtn'\"\r\n data-kt-plan=\"Quarterly\" (click)=\"selectPlan('quarterly')\">\r\n Quarterly - 10%\r\n </button>\r\n <button class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3\"\r\n [ngClass]=\"plan === 'annual'? 'activePlanBtn':'inactivePlanBtn'\" data-kt-plan=\"annual\"\r\n (click)=\"selectPlan('annual')\">\r\n Annual - 15%\r\n </button>\r\n </div>\r\n <!--end::Nav group-->\r\n\r\n <!--begin::Row-->\r\n <div class=\"row g-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '1'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Free <span\r\n class=\"life-title fw-semibold mx-2\">Lifetime</span></h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for single store owners\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start \">\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">0 </span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <div class=\"d-flex flex-stack mb-10\"><span\r\n class=\"plan-head me-2 fs-14px\">Tango Traffic</span>\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"tangotraffic\" checked=\"\" disabled=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-center mb-10\">\r\n <span class=\"plan-head\">\r\n To accurately measure traffic and map shopper\u2019s in-store journey\r\n </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Analysis </span>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Bounced vs Engager Analysis </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Missed Opportunity Vs Conversion Rate </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"plan-sub \">\r\n Footfall Image Directory by the hour. </span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n <!--begin::Select-->\r\n <button [disabled]=\"selectedCounts.value !== '1'\" class=\"btn btn-sm btn-primary w-100 button-size\"\r\n (click)=\"plandet('free')\">Get Started</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 text-container py-15 px-10\"\r\n [ngClass]=\"countOfStore === '2-25' || countOfStore === '26-50' || countOfStore === '26-50' || countOfStore === '51-75' || countOfStore === '76-100'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start text-container\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Premium</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solution for Growing Business\r\n </div>\r\n <!--end::Description-->\r\n <button\r\n class=\"top-right btn-margin btn btn-lg btn-primary btn-height py-1 cursor-auto mt-3\">Recommended</button>\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-15\">\r\n <span class=\"price-sub-head\">Starts from</span>\r\n <span class=\"mb-2 text-primary text-val\">\u20B9</span>\r\n <span class=\"pricecodesize\" ><b\r\n class=\"pricecodecolor text-set mx-2\"> {{pricingData?.OriginalPrice}}\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">{{pricingData?.price}}</span>\r\n </div>\r\n <!--end::Price-->\r\n <div class=\"fw-semibold\">\r\n <span class=\"period\">per store per month</span>\r\n </div>\r\n </div>\r\n <!--end::Heading-->\r\n <form [formGroup]=\"productForm\" action=\"\" class=\"w-100 mb-3\">\r\n <!--begin::Features-->\r\n <div class=\"w-100\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mt-10 mb-5\"><span\r\n class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('traffic')\">Tango Traffic\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" style=\"pointer-events: none; background-color: #6BCAFF !important; border-color: #6BCAFF !important;\" formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" checked=\"\">\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('zone')\">Tango Zone\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" checked=\"\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('sop')\">Tango SOP\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"tangoSop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangosop\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex flex-stack mb-5\"><span class=\"plan-head me-2 fs-14px line-height\"\r\n (click)=\"showViewMore('support')\">Priority Support\r\n <span class=\"ms-1 cursor-pointer\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8686)\">\r\n <path\r\n d=\"M6 8.16699V6.16699M6 4.16699H6.005M11 6.16699C11 8.92842 8.76142 11.167 6 11.167C3.23858 11.167 1 8.92842 1 6.16699C1 3.40557 3.23858 1.16699 6 1.16699C8.76142 1.16699 11 3.40557 11 6.16699Z\"\r\n stroke=\"#98A2B3\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8686\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0 0.166992)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </span>\r\n <div class=\"form-check form-switch\">\r\n <input (change)=\"onPriceChange()\" formControlName=\"prioritySupport\"\r\n class=\"form-check-input\" type=\"checkbox\" role=\"switch\"\r\n id=\"support\" checked=\"\">\r\n\r\n </div>\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n </form>\r\n\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('premium')\">Start 14 day trial</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n <!--begin::Col-->\r\n <div class=\"col-md-6 col-lg-4 col-xl-4 col-xxl-4 h-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <!--begin::Option-->\r\n <div class=\"w-100 d-flex flex-column flex-start rounded-3 py-15 px-10\"\r\n [ngClass]=\"countOfStore === '101-150'? 'freeplan':'bg-light'\">\r\n <!--begin::Heading-->\r\n <div class=\"mb-7 text-start\">\r\n <!--begin::Title-->\r\n <h1 class=\"price-head mb-5\">Enterprise</h1>\r\n <!--end::Title-->\r\n\r\n <!--begin::Description-->\r\n <div class=\"price-sub-head mb-5\">\r\n Integrated Solutions for Larger Business\r\n </div>\r\n <!--end::Description-->\r\n\r\n <!--begin::Price-->\r\n <div class=\"text-start mt-12\">\r\n\r\n <span class=\"fs-3x fw-bold text-primary text-val\">\r\n Let\u2019s Talk!</span>\r\n\r\n </div>\r\n <!--end::Price-->\r\n </div>\r\n <!--end::Heading-->\r\n\r\n <!--begin::Features-->\r\n <div class=\"w-100 h-239px mb-10\">\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Do you have more than 100 stores?</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n <!--begin::Item-->\r\n <div class=\"d-flex align-items-start mb-5\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1199_8736)\">\r\n <path\r\n d=\"M14.6668 7.38625V7.99958C14.666 9.4372 14.2005 10.836 13.3397 11.9875C12.4789 13.1389 11.269 13.9812 9.8904 14.3889C8.51178 14.7965 7.03834 14.7475 5.68981 14.2493C4.34128 13.7511 3.18993 12.8303 2.40747 11.6243C1.62501 10.4183 1.25336 8.99163 1.34795 7.55713C1.44254 6.12263 1.9983 4.75713 2.93235 3.6643C3.8664 2.57146 5.12869 1.80984 6.53096 1.49301C7.93323 1.17619 9.40034 1.32114 10.7135 1.90625M14.6668 2.66625L8.00017 9.33958L6.00017 7.33958\"\r\n stroke=\"#667085\" stroke-width=\"1.3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1199_8736\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"price-sub-head fw-semibold \">\r\n Rest assured, our dedicated account managers are here to support you\r\n every\r\n step of the way.</span>\r\n\r\n </div>\r\n <!--end::Item-->\r\n\r\n\r\n </div>\r\n <!--end::Features-->\r\n\r\n <!--begin::Select-->\r\n <button class=\"btn btn-sm btn-primary button-size w-100\"\r\n (click)=\"plandet('enterprise')\">Request Call Back</button>\r\n <!--end::Select-->\r\n </div>\r\n <!--end::Option-->\r\n </div>\r\n </div>\r\n <!--end::Col-->\r\n </div>\r\n <!--end::Row-->\r\n </div>\r\n <!--end::Plans-->\r\n </div>\r\n </div>\r\n <div class=\"row mt-12\">\r\n <div class=\"col-md-2\">\r\n <button type=\"button\" class=\"btn btn-lg text-nowrap btn-set me-5\" (click)=\"prevStep()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M13 15L8 10L13 5\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg> Previous\r\n </button>\r\n </div>\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>\r\n\r\n<div class=\"overlay\" *ngIf=\"popup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\" />\r\n <path d=\"M38 18L27 29M38 18L31 38L27 29M38 18L18 25L27 29\" stroke=\"#00A3FF\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <h3 class=\"fw-bold get-touch my-5\">Get In Touch</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Have questions? We\u2019re here to help. Send us a message, and we\u2019ll respond\r\n within\r\n 24 hours.</div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('time')\" [ngClass]=\"timevalue === 'time'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <path d=\"M25.3332 14.6663L20.6665 17.9997L25.3332 21.333V14.6663Z\" stroke=\"#00A3FF\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.3332 13.333H11.9998C11.2635 13.333 10.6665 13.93 10.6665 14.6663V21.333C10.6665 22.0694 11.2635 22.6663 11.9998 22.6663H19.3332C20.0695 22.6663 20.6665 22.0694 20.6665 21.333V14.6663C20.6665 13.93 20.0695 13.333 19.3332 13.333Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'time'? 'video-title':'untouch-title'\">Schedule\r\n with\r\n Calendly</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'time'? 'video-sub':'untouch-sub'\">Choose your\r\n time\r\n slot in the next step.</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"notice d-flex bg-light-primary rounded border-primary cursor-pointer my-4\"\r\n (click)=\"checkvalue('call back')\" [ngClass]=\"timevalue === 'call back'? 'touch-primary':'untouch-primary'\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <rect x=\"2\" y=\"2\" width=\"32\" height=\"32\" rx=\"16\" stroke=\"#EAF8FF\" stroke-width=\"4\" />\r\n <g clip-path=\"url(#clip0_1731_70116)\">\r\n <path\r\n d=\"M24.6665 21.2797V23.2797C24.6672 23.4654 24.6292 23.6492 24.5548 23.8193C24.4804 23.9894 24.3713 24.1421 24.2345 24.2676C24.0977 24.3932 23.9362 24.4887 23.7603 24.5482C23.5844 24.6077 23.398 24.6298 23.2131 24.6131C21.1617 24.3902 19.1911 23.6892 17.4598 22.5664C15.849 21.5428 14.4834 20.1772 13.4598 18.5664C12.3331 16.8272 11.632 14.8471 11.4131 12.7864C11.3965 12.6021 11.4184 12.4162 11.4775 12.2408C11.5365 12.0654 11.6315 11.9042 11.7563 11.7675C11.8811 11.6308 12.033 11.5215 12.2023 11.4468C12.3716 11.372 12.5547 11.3332 12.7398 11.3331H14.7398C15.0633 11.3299 15.377 11.4445 15.6223 11.6554C15.8676 11.8664 16.0278 12.1594 16.0731 12.4797C16.1575 13.1198 16.3141 13.7482 16.5398 14.3531C16.6295 14.5917 16.6489 14.851 16.5957 15.1003C16.5426 15.3496 16.419 15.5785 16.2398 15.7597L15.3931 16.6064C16.3422 18.2754 17.7241 19.6574 19.3931 20.6064L20.2398 19.7597C20.4211 19.5805 20.6499 19.457 20.8992 19.4038C21.1485 19.3506 21.4078 19.37 21.6465 19.4597C22.2513 19.6854 22.8797 19.842 23.5198 19.9264C23.8436 19.9721 24.1394 20.1352 24.3508 20.3847C24.5622 20.6343 24.6746 20.9528 24.6665 21.2797Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1731_70116\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(10 10)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap\">\r\n <div class=\"mb-3 mb-md-0 \">\r\n <h4 class=\"fw-semibold\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-title'\">Request\r\n a\r\n call back</h4>\r\n <div class=\"fw-normal pe-7\" [ngClass]=\"timevalue === 'call back'? 'video-title':'untouch-sub'\">We\u2019ll\r\n call\r\n you on +91 987-654-3219</div>\r\n </div><span *ngIf=\"timevalue ==='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"white\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n </svg></span>\r\n <span *ngIf=\"timevalue !=='time'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" fill=\"#00A3FF\" />\r\n <rect x=\"0.5\" y=\"0.5\" width=\"15\" height=\"15\" rx=\"7.5\" stroke=\"#00A3FF\" />\r\n <path d=\"M11.3332 5.5L6.74984 10.0833L4.6665 8\" stroke=\"white\" stroke-width=\"1.66667\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"timevalue === 'call back'\">\r\n\r\n <h3 class=\"title-val fw-semibold my-3\">Select Preferred Timing</h3>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">\r\n <button [ngClass]=\"callbackPreferredTiming === '9am -12pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '9am -12pm'\" type=\"button\" class=\"btn btn-secondary\">9am -12pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '12pm - 5pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '12pm - 5pm'\" type=\"button\" class=\"btn btn-secondary\">12pm - 5pm</button>\r\n <button [ngClass]=\"callbackPreferredTiming === '5pm - 8pm' ? 'popup-tab-selected': ''\" (click)=\"callbackPreferredTiming = '5pm - 8pm'\" type=\"button\" class=\"btn btn-secondary\">5pm - 8pm</button>\r\n </div>\r\n <h5 class=\"title-sub fw-normal my-3\">We'll call you back in next 24 business hours</h5>\r\n <textarea [formControl]=\"callbackDescription\" class=\"form-control text-area fw-normal\" placeholder=\"Be more specific...\" row=\"2\"></textarea>\r\n\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-default fw-bold w-100\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <button class=\"btn btn-primary submit fw-bold w-100\" (click)=\"submitvalue()\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"overlay\" *ngIf=\"requestpopup\">\r\n <div class=\"popup\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Featured icon\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#DAF1FF\"/>\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#EAF8FF\" stroke-width=\"8\"/>\r\n <g id=\"Check icon\">\r\n <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\"/>\r\n <g id=\"Icon\">\r\n <mask id=\"path-3-inside-1_4346_82646\" fill=\"white\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\"/>\r\n </mask>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M33.0965 23.3897L25.9365 30.2997L24.0365 28.2697C23.6865 27.9397 23.1365 27.9197 22.7365 28.1997C22.3465 28.4897 22.2365 28.9997 22.4765 29.4097L24.7265 33.0697C24.9465 33.4097 25.3265 33.6197 25.7565 33.6197C26.1665 33.6197 26.5565 33.4097 26.7765 33.0697C27.1365 32.5997 34.0065 24.4097 34.0065 24.4097C34.9065 23.4897 33.8165 22.6797 33.0965 23.3797V23.3897Z\" fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"4\" mask=\"url(#path-3-inside-1_4346_82646)\"/>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n \r\n <h3 class=\"fw-bold get-touch my-5\">Thanks for your request!</h3>\r\n <div class=\"fw-normal get-sub mb-5\">Our team will get back to you shortly. Meanwhile explore more about us.\r\n </div>\r\n <div class=\"row mt-10 mb-7\">\r\n <div class=\"col-md-12\">\r\n <button class=\"btn btn-primary fw-bold w-100\" (click)=\"continuesignup()\">Continue Signing Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".bubble{position:fixed;top:0;right:3%}.activeClass{padding:8px 12px!important;gap:8px!important;border-radius:6px!important;background:var(--Primary-25, #F6FCFF)!important;padding:8px 12px;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important}.activeClass .store-primary{color:var(--Gray-700, #344054)!important;font-size:16px!important;font-weight:600;line-height:24px}.bg-gray{padding:4px!important;gap:36px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-50, #F9FAFB)!important}.text-color{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:600!important;line-height:24px}.heading{color:#000!important;font-size:20px!important;font-weight:600!important;line-height:30px}.textval{color:var(--Gray-500, #2654b9)!important}.border-store{width:32px;height:32px;padding:8px;border-radius:28px!important;background:var(--Primary-100, #DAF1FF)!important}.gap-16px{display:flex;height:40px;padding:16px;align-items:center;gap:4px;border-radius:8px;border:1px solid var(--Primary-300, #6BCAFF);background:var(--Primary-50, #EAF8FF)}.featareaval{color:var(--Primary-800, #008EDF)!important;font-size:14px;font-weight:500;line-height:20px}.bg-light{padding:24px!important;border-radius:8px;border:1px solid var(--Gray-100, #F2F4F7)!important;background:var(--Gray-25, #FCFCFD)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a}.price-head{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.price-sub-head{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px}.period{color:var(--Gray-500, #667085)!important;font-size:16px!important;font-weight:400!important;line-height:24px}.plan-sub{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:18px}.plan-head{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-weight:500;line-height:18px}.fs-14px{font-size:14px!important;line-height:20px!important}.text-container{position:relative}.top-right{position:absolute;top:68px;left:173px;font-size:18px}.btn-margin{color:var(--White, #FFF)!important;font-size:12px!important;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px!important;background:var(--Primary-700, #009BF3)!important}.h-239px{height:239px}.button-size{color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;padding:10px 16px!important}.form-check-input:checked{border-color:#009bf3;border-radius:12px;background-color:var(--Primary-600, #00A3FF)!important}@media (min-width: 1396px) and (max-width: 1440px){.plan-sub{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-weight:400!important;line-height:18px}}@media (min-width: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1745px) and (max-width: 1910px){.top-right{left:225px}}@media (min-width: 1706px) and (max-width: 1744px){.top-right{left:216px}}@media (min-width: 1430px) and (max-width: 1439px){.top-right{left:158px}}@media (min-width: 1396px) and (max-width: 1410px){.top-right{left:148px}}@media (min-width: 1410px) and (max-width: 1430px){.top-right{left:153px}}@media (min-width: 1439px) and (max-width: 1475px){.top-right{left:162px}}@media (min-width: 1475px) and (max-width: 1500px){.top-right{left:165px}}@media (min-width: 1547px) and (max-width: 1600px){.top-right{left:189px}}@media (min-width: 1600px) and (max-width: 1635px){.top-right{left:199px}}@media (min-width: 1635px) and (max-width: 1675px){.top-right{left:209px}}@media (min-width: 2160px) and (max-width: 2560px){.top-right{left:438px}}.activePlanBtn{border-radius:6px;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.nav-group{background:var(--Gray-50, #F9FAFB)!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.freeplan{padding:24px!important;border-radius:8px!important;border:1px solid var(--Primary-100, #DAF1FF)!important;background:var(--Primary-25, #F6FCFF)!important;box-shadow:0 1px 2px #1018280f,0 1px 3px #1018281a!important;width:100%}.text-val{color:var(--Primary-700, #009BF3)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.text-set{color:var(--Primary-700, #009BF3)!important;font-size:18px!important;font-weight:600!important;line-height:32px;text-decoration-line:line-through!important}.btn-set{color:var(--Primary-700, #009BF3)!important;font-size:16px!important;font-weight:600!important;line-height:24px;border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important}.life-title{color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:12px!important;line-height:18px;padding:2px 8px!important;border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important}.get-touch{color:var(--Gray-900, #101828);font-size:18px;line-height:28px}.get-sub{color:var(--Gray-500, #667085);font-size:14px;line-height:20px}.touch-primary{padding:16px;border-radius:8px!important;border:1px solid var(--Primary-300, #6BCAFF)!important;background:var(--Primary-50, #EAF8FF)!important}.video-title{color:var(--Primary-800, #008EDF);font-size:14px;line-height:20px}.video-sub{color:var(--Primary-600, #00A3FF);font-size:14px;line-height:20px}.untouch-primary{padding:16px!important;border-radius:8px!important;border:1px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.untouch-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;line-height:20px}.untouch-sub{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px}.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-primary.submit{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:16px!important;line-height:24px;text-transform:capitalize}.btn-group{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.btn-secondary{border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important}.btn-check:checked+.btn.btn-secondary,.btn-check:active+.btn.btn-secondary,.btn.btn-secondary:focus:not(.btn-active),.btn.btn-secondary:hover:not(.btn-active),.btn.btn-secondary:active:not(.btn-active),.btn.btn-secondary.active,.btn.btn-secondary.show,.show>.btn.btn-secondary{background-color:var(--Gray-50, #F9FAFB)!important}.title-val{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.title-sub{color:var(--Primary-500, #33B5FF);font-size:12px;line-height:19.5px}.text-area{color:var(--Gray-500, #667085)!important;font-size:16px!important;line-height:24px!important}.overlay{position:fixed;inset:0;background:#6e6e6eb3;transition:opacity .5s;visibility:visible;opacity:1}.popup{position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);padding:24px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;border-radius:12px;width:480px;position:relative;transition:all 5s ease-in-out}.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}.popup .close{position:absolute;transition:all .2s;font-size:30px;font-weight:700;text-decoration:none;color:#333}.popup .close:hover{color:#06d85f;cursor:pointer}.popup .content{max-height:30%;overflow:auto}.popup-tab-selected{background-color:#f9fafb!important}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}.line-height{line-height:32px!important}\n"] }]
901
904
  }], ctorParameters: () => [{ type: i1.NgbModal }, { type: ConversionService }, { type: AuthService }, { type: i2$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i5.ToastService }] });
902
905
 
903
906
  class Step3Component {
@@ -1468,7 +1471,7 @@ class AuthGuard {
1468
1471
  // const currentUser = localStorage.getItem('isLoggedIn');
1469
1472
  const currentUser = localStorage.getItem(this.authlocalStorageToken);
1470
1473
  if (currentUser) {
1471
- // this.route.navigate(['/manage/brands']);
1474
+ this.route.navigate(['/manage']);
1472
1475
  return true;
1473
1476
  }
1474
1477
  else {