tango-app-ui-auth 3.0.21-dev → 3.0.23-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-forgot-password/tango-auth-forgot-password.component.mjs +5 -7
  2. package/esm2022/lib/components/tango-auth-login/tango-auth-login.component.mjs +20 -7
  3. package/esm2022/lib/components/tango-auth-signup/step/step1/step1.component.mjs +4 -1
  4. package/esm2022/lib/components/tango-auth-signup/step/step2/step2.component.mjs +3 -3
  5. package/fesm2022/tango-app-ui-auth.mjs +28 -14
  6. package/fesm2022/tango-app-ui-auth.mjs.map +1 -1
  7. package/lib/components/tango-auth-login/tango-auth-login.component.d.ts +3 -1
  8. package/package.json +1 -1
package/fesm2022/tango-app-ui-auth.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Component, Injectable, EventEmitter, Input, ViewChild, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
2
+ import { Component, Injectable, ViewChild, EventEmitter, Input, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
3
3
  import * as i6 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i3 from '@angular/router';
@@ -150,6 +150,8 @@ class TangoAuthLoginComponent {
150
150
  password: null,
151
151
  };
152
152
  isLoading;
153
+ emailInputRef;
154
+ passwordInputRef;
153
155
  authlocalStorageToken;
154
156
  destroy$ = new Subject();
155
157
  constructor(router, route, fb, service, gs, cd, toastService) {
@@ -175,6 +177,11 @@ class TangoAuthLoginComponent {
175
177
  // get return url from route parameters or default to '/'
176
178
  this.returnUrl =
177
179
  this.route.snapshot.queryParams["returnUrl".toString()] || "/";
180
+ if (this.emailInputRef?.nativeElement.value || this.passwordInputRef?.nativeElement.value) {
181
+ // Clear the fields if autofilled
182
+ this.emailInputRef.nativeElement.value = '';
183
+ this.passwordInputRef.nativeElement.value = '';
184
+ }
178
185
  }
179
186
  ngOnDestroy() {
180
187
  this.destroy$.next(true);
@@ -215,7 +222,7 @@ class TangoAuthLoginComponent {
215
222
  localStorage.setItem(this.authlocalStorageToken, JSON.stringify(res?.data?.result));
216
223
  this.userProfile();
217
224
  }
218
- else if (!res || res.code == 401) {
225
+ else if (!res || res?.code == 401) {
219
226
  this.toastService.getErrorToast('Enter Valid Credentials');
220
227
  }
221
228
  else {
@@ -224,7 +231,7 @@ class TangoAuthLoginComponent {
224
231
  },
225
232
  error: (err) => {
226
233
  this.hasError = true;
227
- this.toastService.getErrorToast(err.error.error);
234
+ this.toastService.getErrorToast(err?.error?.error ? err?.error?.error : 'The user has been unauthorized to login');
228
235
  },
229
236
  });
230
237
  }
@@ -254,12 +261,18 @@ class TangoAuthLoginComponent {
254
261
  this.show = !this.show;
255
262
  }
256
263
  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 });
257
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TangoAuthLoginComponent, selector: "lib-tango-auth-login", 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 w-100\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <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=\"Brand\" class=\"form-label\">Email</label>\r\n <input type=\"type\" class=\"form-control\" id=\"Email\" name=\"Email\" autocomplete=\"off\" required [(ngModel)]=\"credentials.email\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"mb-5 \">\r\n <label for=\"Brand\" 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\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\r\n <h6 class=\"forgot cursor-pointer\" routerLink=\"/auth/forgot-password\">Forgot Password</h6>\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\"><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> </button>\r\n <button class=\"btn btn-outline w-100 mt-3\"><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></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%)}\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"] }] });
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 w-100\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <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\"><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> </button>\r\n <button class=\"btn btn-outline w-100 mt-3\"><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></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%)}\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"] }] });
258
265
  }
259
266
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthLoginComponent, decorators: [{
260
267
  type: Component,
261
- 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 w-100\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <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=\"Brand\" class=\"form-label\">Email</label>\r\n <input type=\"type\" class=\"form-control\" id=\"Email\" name=\"Email\" autocomplete=\"off\" required [(ngModel)]=\"credentials.email\" autocomplete=\"off\">\r\n </div>\r\n <div class=\"mb-5 \">\r\n <label for=\"Brand\" 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\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\r\n <h6 class=\"forgot cursor-pointer\" routerLink=\"/auth/forgot-password\">Forgot Password</h6>\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\"><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> </button>\r\n <button class=\"btn btn-outline w-100 mt-3\"><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></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%)}\n"] }]
262
- }], ctorParameters: () => [{ type: i3.Router }, { type: i3.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i4.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i5.ToastService }] });
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 w-100\">\r\n \r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <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\"><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> </button>\r\n <button class=\"btn btn-outline w-100 mt-3\"><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></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%)}\n"] }]
269
+ }], 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
+ type: ViewChild,
271
+ args: ['emailInput']
272
+ }], passwordInputRef: [{
273
+ type: ViewChild,
274
+ args: ['passwordInput']
275
+ }] } });
263
276
 
264
277
  class ConversionService {
265
278
  filtersSubject = new Subject();
@@ -380,6 +393,9 @@ class Step1Component {
380
393
  ,
381
394
  ],
382
395
  });
396
+ this.aboutForm.get('password')?.valueChanges.subscribe(() => {
397
+ this.aboutForm.get('confirmPassword')?.updateValueAndValidity();
398
+ });
383
399
  }
384
400
  validateAreEqual(fieldControl) {
385
401
  return fieldControl?.value === this.aboutForm?.get('password').value ? null : {
@@ -877,11 +893,11 @@ class Step2Component {
877
893
  this.getPricingData();
878
894
  }
879
895
  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 });
880
- 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-7\">\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-6\">\r\n <!--begin::Features-->\r\n <div class=\"w-100 mb-10\">\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"] }] });
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"] }] });
881
897
  }
882
898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step2Component, decorators: [{
883
899
  type: Component,
884
- 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-7\">\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-6\">\r\n <!--begin::Features-->\r\n <div class=\"w-100 mb-10\">\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"] }]
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"] }]
885
901
  }], ctorParameters: () => [{ type: i1.NgbModal }, { type: ConversionService }, { type: AuthService }, { type: i2$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i5.ToastService }] });
886
902
 
887
903
  class Step3Component {
@@ -1301,15 +1317,13 @@ class TangoAuthForgotPasswordComponent {
1301
1317
  next: (res) => {
1302
1318
  if (res && res.code == 200) {
1303
1319
  this.toast.getSuccessToast(`Reset password link sent to ${this.email.value}`);
1304
- this.passwordEnable = true;
1305
- this.emailEnable = false;
1306
1320
  }
1307
1321
  else {
1308
- this.toast.getSuccessToast(`Unable to send reset password link to ${this.email.value}`);
1322
+ this.toast.getErrorToast(`Unable to send reset password link to ${this.email.value}`);
1309
1323
  }
1310
1324
  },
1311
1325
  error: () => {
1312
- this.toast.getSuccessToast(`Unable to send reset password link to ${this.email.value}`);
1326
+ this.toast.getErrorToast(`Unable to send reset password link to ${this.email.value}`);
1313
1327
  },
1314
1328
  });
1315
1329
  }
@@ -1339,11 +1353,11 @@ class TangoAuthForgotPasswordComponent {
1339
1353
  });
1340
1354
  }
1341
1355
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthForgotPasswordComponent, deps: [{ token: i5.ToastService }, { token: AuthService }, { token: i3.ActivatedRoute }, { token: i2$1.FormBuilder }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
1342
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoAuthForgotPasswordComponent, selector: "lib-tango-auth-forgot-password", ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"row position-absolute\">\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n </div>\r\n @if (emailEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h1 class=\"title my-4\"> Forgot Password\r\n </h1>\r\n <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n we'll send you a OTP to reset your password.\r\n </div>\r\n </div>\r\n <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-1\">\r\n <label class=\"label\">Email</label>\r\n <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n name=\"email\">\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n (click)=\"onSubmit()\">Request reset link</button>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n to\r\n login</a>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n }\r\n @if(passwordEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-5 ms-10\">\r\n\r\n <h1 class=\"title my-4\">Reset Password\r\n </h1>\r\n <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n </div>\r\n <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"email\" class=\"form-label\">New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n formControlName=\"password\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n <span (click)=\"showNewPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <small\r\n *ngIf=\"PasswordForm.get('password')?.hasError('required') && PasswordForm.get('password')?.touched\">Password\r\n is required</small>\r\n <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">Use\r\n 8 or more characters with a mix of letters, numbers & symbols.</small>\r\n <small\r\n *ngIf=\"PasswordForm.get('password')?.touched && PasswordForm.get('password')?.invalid\"></small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n formControlName=\"confirmPassword\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n <span (click)=\"showVerifyPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The password must\r\n contain atleast one capital letter and number.</small>\r\n <small\r\n *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.invalid\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n (click)=\"onPasswordSubmit()\">Reset\r\n password</button>\r\n </div>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n login</a>\r\n\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
1356
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoAuthForgotPasswordComponent, selector: "lib-tango-auth-forgot-password", ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"row position-absolute\">\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n </div>\r\n @if (emailEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h1 class=\"title my-4\"> Forgot Password\r\n </h1>\r\n <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n we'll send you a OTP to reset your password.\r\n </div>\r\n </div>\r\n <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-1\">\r\n <label class=\"label\">Email</label>\r\n <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n name=\"email\">\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n (click)=\"onSubmit()\">Request reset link</button>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n to\r\n login</a>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n }\r\n @if(passwordEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-5 ms-10\">\r\n\r\n <h1 class=\"title my-4\">Reset Password\r\n </h1>\r\n <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n </div>\r\n <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"email\" class=\"form-label\">New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n formControlName=\"password\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n <span (click)=\"showNewPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n @if(PasswordForm.get('password')?.touched) {\r\n @if (PasswordForm.get('password')?.hasError('required')) {\r\n <small>Password is required</small>\r\n } \r\n }\r\n <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">Use\r\n 8 or more characters with a mix of letters, numbers & symbols.</small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n formControlName=\"confirmPassword\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n <span (click)=\"showVerifyPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n @if(PasswordForm.get('confirmPassword')?.touched) {\r\n @if (PasswordForm.get('confirmPassword')?.hasError('required')) {\r\n <small>Confirm password is required</small>\r\n } @else {\r\n <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The confirm password must\r\n contain atleast one capital letter and number.</small>\r\n <small\r\n *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.invalid\">Confirm password\r\n does not match</small>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n (click)=\"onPasswordSubmit()\">Reset\r\n password</button>\r\n </div>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n login</a>\r\n\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
1343
1357
  }
1344
1358
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAuthForgotPasswordComponent, decorators: [{
1345
1359
  type: Component,
1346
- args: [{ selector: "lib-tango-auth-forgot-password", template: "<div class=\"container\">\r\n <div class=\"row position-absolute\">\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n </div>\r\n @if (emailEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h1 class=\"title my-4\"> Forgot Password\r\n </h1>\r\n <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n we'll send you a OTP to reset your password.\r\n </div>\r\n </div>\r\n <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-1\">\r\n <label class=\"label\">Email</label>\r\n <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n name=\"email\">\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n (click)=\"onSubmit()\">Request reset link</button>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n to\r\n login</a>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n }\r\n @if(passwordEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-5 ms-10\">\r\n\r\n <h1 class=\"title my-4\">Reset Password\r\n </h1>\r\n <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n </div>\r\n <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"email\" class=\"form-label\">New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n formControlName=\"password\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n <span (click)=\"showNewPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <small\r\n *ngIf=\"PasswordForm.get('password')?.hasError('required') && PasswordForm.get('password')?.touched\">Password\r\n is required</small>\r\n <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">Use\r\n 8 or more characters with a mix of letters, numbers & symbols.</small>\r\n <small\r\n *ngIf=\"PasswordForm.get('password')?.touched && PasswordForm.get('password')?.invalid\"></small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n formControlName=\"confirmPassword\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n <span (click)=\"showVerifyPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The password must\r\n contain atleast one capital letter and number.</small>\r\n <small\r\n *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.invalid\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n (click)=\"onPasswordSubmit()\">Reset\r\n password</button>\r\n </div>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n login</a>\r\n\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
1360
+ args: [{ selector: "lib-tango-auth-forgot-password", template: "<div class=\"container\">\r\n <div class=\"row position-absolute\">\r\n <div class=\"col-md-6 pe-10 d-flex justify-content-center align-items-center \">\r\n <img src=\"./assets/tango/Icons/LHS.svg\" alt=\"Image\" class=\"img-fluid\">\r\n </div>\r\n @if (emailEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-10 ms-10\">\r\n <h1 class=\"title my-4\"> Forgot Password\r\n </h1>\r\n <div class=\"title-subtitle mb-1\"> Enter the Email associated with your account and\r\n we'll send you a OTP to reset your password.\r\n </div>\r\n </div>\r\n <form class=\"w-100 title-padding\" novalidate=\"novalidate\">\r\n <div class=\"mb-1\">\r\n <label class=\"label\">Email</label>\r\n <input class=\"form-control my-3\" [formControl]=\"email\" type=\"email\" id=\"email\"\r\n name=\"email\">\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex mt-5 mb-5 mx-10\" role=\"group\">\r\n\r\n <button class=\"btn btn-primary w-100\" id=\"alert-toast\" [disabled]=\"email.invalid\"\r\n (click)=\"onSubmit()\">Request reset link</button>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center my-3\" routerLink=\"/auth/login\">Back\r\n to\r\n login</a>\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n }\r\n @if(passwordEnable) {\r\n <div class=\"col-md-6 ps-10 d-flex justify-content-center align-items-center\">\r\n <div class=\"card card-flush w-lg-600px ms-20 py-3 mt-20\">\r\n\r\n <div class=\"login-form login-signin w-100\">\r\n\r\n <div class=\"d-flex flex-column align-items-between title-padding\">\r\n <div class=\"text-start my-5 ms-10\">\r\n\r\n <h1 class=\"title my-4\">Reset Password\r\n </h1>\r\n <div class=\"title-subtitle mb-7\">Enter a new password to reset the password on your account\r\n </div>\r\n <form [formGroup]=\"PasswordForm\" novalidate=\"novalidate\" class=\"\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"email\" class=\"form-label\">New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"newPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"password\"\r\n formControlName=\"password\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('password')?.touched && PasswordForm.get('password')?.hasError('required') }\">\r\n <span (click)=\"showNewPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"newPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!newPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n @if(PasswordForm.get('password')?.touched) {\r\n @if (PasswordForm.get('password')?.hasError('required')) {\r\n <small>Password is required</small>\r\n } \r\n }\r\n <small *ngIf=\"PasswordForm.get('password')?.hasError('pattern')\">Use\r\n 8 or more characters with a mix of letters, numbers & symbols.</small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12 mb-7\">\r\n <label for=\"contact\" class=\"form-label\">Confirm New Password</label>\r\n <div class=\"position-relative mb-3\">\r\n <input [type]=\"verifyPasswordShow ? 'text' : 'password'\" class=\"form-control\" id=\"confirmPassword\"\r\n formControlName=\"confirmPassword\"\r\n [ngClass]=\"{ 'is-invalid': PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.hasError('required') }\">\r\n <span (click)=\"showVerifyPassword()\"\r\n class=\"btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2\"\r\n data-kt-password-meter-control=\"visibility\">\r\n <i *ngIf=\"verifyPasswordShow\" class=\"fa fa-eye\" aria-hidden=\"true\"></i>\r\n <i *ngIf=\"!verifyPasswordShow\" class=\"fa fa-eye-slash\" aria-hidden=\"true\"></i>\r\n </span>\r\n </div>\r\n @if(PasswordForm.get('confirmPassword')?.touched) {\r\n @if (PasswordForm.get('confirmPassword')?.hasError('required')) {\r\n <small>Confirm password is required</small>\r\n } @else {\r\n <small *ngIf=\"PasswordForm.get('confirmPassword')?.hasError('pattern')\">The confirm password must\r\n contain atleast one capital letter and number.</small>\r\n <small\r\n *ngIf=\"PasswordForm.get('confirmPassword')?.touched && PasswordForm.get('confirmPassword')?.invalid\">Confirm password\r\n does not match</small>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex mt-10 mb-5\" role=\"group\">\r\n <button class=\"btn btn-primary w-100 \" id=\"alert-toast\" [disabled]=\"PasswordForm.invalid\"\r\n (click)=\"onPasswordSubmit()\">Reset\r\n password</button>\r\n </div>\r\n </div>\r\n <a class=\"text-decoration-underline backtologin text-center\" routerLink=\"/auth/login\">Back to\r\n login</a>\r\n\r\n </div>\r\n <div class=\" d-flex flex-column flex-md-row mb-3 flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-20\">\r\n <span class=\"me-1 footer\">2024</span>\r\n <a target=\"_blank\"\r\n class=\"footer text-decoration-underline cursor-pointer\">&#64;TangoITSolutions\r\n India Pvt Ltd</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\"\r\n class=\"menu-link px-5\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\"\r\n height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\">\r\n <path\r\n d=\"M11 3.7002C11 3.1502 10.55 2.7002 10 2.7002H2C1.45 2.7002 1 3.1502 1 3.7002M11 3.7002V9.7002C11 10.2502 10.55 10.7002 10 10.7002H2C1.45 10.7002 1 10.2502 1 9.7002V3.7002M11 3.7002L6 7.2002L1 3.7002\"\r\n stroke=\"#667085\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">support&#64;tangotech.co.in</span></a></li>\r\n\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <img src=\"./assets/tango/Icons/login-background1.svg\" alt=\"Image\" class=\"background-image\">\r\n</div>\r\n\r\n\r\n\r\n\r\n", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:24px!important;font-weight:600;line-height:32px!important}.title-subtitle{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400;line-height:20px!important}.label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px!important}:host ::ng-deep .ng-otp-input-wrapper .otp-input:first-child{margin:0}:host ::ng-deep .ng-otp-input-wrapper .otp-input{margin-right:0!important;height:80px!important;width:80px;padding:8px;text-align:center;margin:10px 38px;color:var(--Gray-300, #D0D5DD)!important;font-size:60px;font-style:normal;font-weight:500;line-height:72px;letter-spacing:-1.2px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.small_lbl{color:var(--Gray-500, #667085);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.container{width:100%;height:100%;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;width:45%;margin-left:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.login-form .title-padding{padding:0 32px}.login-form .login-title{color:var(--Gray-900, #101828);font-size:36px;font-weight:600;line-height:44px;letter-spacing:-.72px}.login-form .login-sub-title{color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px}.login-form .form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500;line-height:20px}.login-form .img-src{padding:10px 5px 32px}.login-form .mx-25{margin-right:-10px!important;margin-left:-45px!important}.login-form .w-360px{width:360px!important}.login-form .forgot{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize;text-align:center}.login-form .signup-default{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.login-form .signup-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-weight:600!important;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.login-form .footer{color:var(--Gray-500, #667085)!important;font-size:12px!important;font-weight:400!important;line-height:20px}@media (min-width: 1745px) and (max-width: 1910px){.mt-6{margin-top:7rem!important}}@media (min-width: 1920px) and (max-width: 2100px){.mt-6{margin-top:10rem!important}.login-form .mx-25{margin-right:0!important;margin-left:20px!important}}.position-absolute{position:absolute;top:50%;transform:translateY(-50%)}.card{border-radius:16px;background:#fff;box-shadow:0 4px 10px #0000000d}.backtologin{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height:2.35;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.translate-middle{transform:translate(-65%,-50%)!important}\n"] }]
1347
1361
  }], ctorParameters: () => [{ type: i5.ToastService }, { type: AuthService }, { type: i3.ActivatedRoute }, { type: i2$1.FormBuilder }, { type: i3.Router }] });
1348
1362
 
1349
1363
  const routes = [