tango-app-ui-auth 3.0.3 → 3.0.4

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 (9) hide show
  1. package/esm2022/lib/components/tango-auth-signup/step/step1/step1.component.mjs +17 -4
  2. package/esm2022/lib/components/tango-auth-signup/step/step2/step2.component.mjs +4 -4
  3. package/esm2022/lib/components/tango-auth-signup/vertical/vertical.component.mjs +2 -2
  4. package/esm2022/lib/services/auth.service.mjs +4 -1
  5. package/fesm2022/tango-app-ui-auth.mjs +24 -8
  6. package/fesm2022/tango-app-ui-auth.mjs.map +1 -1
  7. package/lib/components/tango-auth-signup/step/step1/step1.component.d.ts +2 -0
  8. package/lib/services/auth.service.d.ts +1 -0
  9. package/package.json +1 -1
package/fesm2022/tango-app-ui-auth.mjs CHANGED
@@ -112,6 +112,9 @@ class AuthService {
112
112
  isMobileTaken(data) {
113
113
  return this.http.get(`${this.leadApiUrl}/isExists?mobileNumber=${data}`);
114
114
  }
115
+ getCountryCodes() {
116
+ return this.http.get(`${this.middlewareApiUrl}/country-code`);
117
+ }
115
118
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, deps: [{ token: i1.Router }, { token: i2.HttpClient }, { token: i3.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
116
119
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, providedIn: 'root' });
117
120
  }
@@ -134,6 +137,7 @@ class Step1Component {
134
137
  isEmailTaken;
135
138
  isMobileTaken;
136
139
  subscriptions = [];
140
+ countryList;
137
141
  constructor(setterservice, fb, authService, cd) {
138
142
  this.setterservice = setterservice;
139
143
  this.fb = fb;
@@ -155,6 +159,7 @@ class Step1Component {
155
159
  this.reinitializePasswordValidation(data.password, data.confirmPassword);
156
160
  }
157
161
  }));
162
+ this.getCountryCodes();
158
163
  }
159
164
  ngOnDestroy() {
160
165
  this.subscriptions.forEach((subscription) => { subscription.unsubscribe(); });
@@ -192,7 +197,7 @@ class Step1Component {
192
197
  ],
193
198
  mobileNumber: ['', Validators.compose([
194
199
  Validators.required,
195
- Validators.pattern("^[5-9][0-9]{9}$")
200
+ // Validators.pattern("^[0-9][0-9]{9}$")
196
201
  ]),
197
202
  ],
198
203
  password: ['', Validators.compose([
@@ -274,6 +279,17 @@ class Step1Component {
274
279
  this.confirmPasswordStrength = await this.checkPasswordStrength(confirmPassword);
275
280
  this.cd.detectChanges();
276
281
  }
282
+ getCountryCodes() {
283
+ this.authService.getCountryCodes().subscribe({
284
+ next: (res) => {
285
+ this.countryList = res.data.result;
286
+ this.cd.detectChanges();
287
+ },
288
+ error: (err) => {
289
+ console.log(err);
290
+ }
291
+ });
292
+ }
277
293
  onClientNameBlur() {
278
294
  this.authService.isClientnameTaken(this.aboutForm?.get('clientName')?.value).subscribe({
279
295
  next: (res) => {
@@ -303,11 +319,11 @@ class Step1Component {
303
319
  this.setterservice.completeStepper({ step: 2 });
304
320
  }
305
321
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step1Component, deps: [{ token: ConversionService }, { token: i2$1.FormBuilder }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
306
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step1Component, selector: "lib-step1", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-10 mx-5 my-7\">\r\n <!-- <div>\r\n <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n <div class=\"mobileshow\">\r\n <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n boost\r\n sales.</p>\r\n\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n </div>\r\n <div class=\"me-20\">\r\n <h4 class=\"icon-more\">30 +</h4>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-12\">\r\n <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n \r\n \r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n Brand name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n Brand name must be maximum of 100 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n Brand name is required\r\n </small>\r\n <small \r\n *ngIf=\"isClientNameTaken\">\r\n Brand name is already taken\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"firstname\" class=\"form-label\">First Name <span class=\"alert-required\">*</span></label>\r\n <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n First name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n First name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n First name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n Last name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n Last name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n Last name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Corporate Email <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n Corporate email must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n Corporate email must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n Corporate email is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"isEmailTaken\">\r\n Email is already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n <label for=\"phonenumber\" class=\"form-label\">Phone number <span class=\"alert-required\">*</span></label>\r\n <div class=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ms-4 me-5\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option class=\"mx-2\" value=\"+91\">In</option>\r\n <option class=\"mx-2\" value=\"+93\">Af</option>\r\n <option class=\"mx-2\" value=\"+355\">Al</option>\r\n </select>\r\n </div>\r\n <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\" [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n class=\"form-control border-disabled\" readonly>\r\n <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"type\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Mobile number already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" type=\"password\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">the password most contain atleast one capital letter and number.</div>\r\n <div>\r\n <small \r\n *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.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=\"aboutForm.get('password')?.touched && aboutForm.get('password')?.invalid\"></small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">the password most contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('pattern')\">The password must contain atleast one capital letter and number.</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.invalid\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" class=\"footer\">Tango IT solutions</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-10\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;font-size:1.1rem;font-weight:600;line-height:1.5;color:#181c32;-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}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal;text-transform:capitalize}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;max-width:10%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;text-transform:capitalize}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:10%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
322
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: Step1Component, selector: "lib-step1", ngImport: i0, template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-10 mx-5 my-7\">\r\n <!-- <div>\r\n <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n <div class=\"mobileshow\">\r\n <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n boost\r\n sales.</p>\r\n\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n </div>\r\n <div class=\"me-20\">\r\n <h4 class=\"icon-more\">30 +</h4>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-12\">\r\n <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n \r\n \r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n Brand name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n Brand name must be maximum of 100 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n Brand name is required\r\n </small>\r\n <small \r\n *ngIf=\"isClientNameTaken\">\r\n Brand name is already taken\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"firstname\" class=\"form-label\">First Name <span class=\"alert-required\">*</span></label>\r\n <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n First name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n First name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n First name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n Last name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n Last name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n Last name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Corporate Email <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n Corporate email must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n Corporate email must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n Corporate email is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"isEmailTaken\">\r\n Email is already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n <label for=\"phonenumber\" class=\"form-label\">Phone number <span class=\"alert-required\">*</span></label>\r\n <div class=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ps-7 pe-9\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.countryCode\">{{country.countryAlpha2Code}}</option>\r\n </select>\r\n </div>\r\n <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\" [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n class=\"form-control border-disabled\" readonly>\r\n <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"number\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Mobile number already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" type=\"password\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small \r\n *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.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=\"aboutForm.get('password')?.touched && aboutForm.get('password')?.invalid\"></small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('pattern')\">The password must contain atleast one capital letter and number.</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.invalid\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" class=\"footer\">Tango IT solutions</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-10\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height: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}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;max-width:10%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:10%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
307
323
  }
308
324
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step1Component, decorators: [{
309
325
  type: Component,
310
- args: [{ selector: 'lib-step1', template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-10 mx-5 my-7\">\r\n <!-- <div>\r\n <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n <div class=\"mobileshow\">\r\n <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n boost\r\n sales.</p>\r\n\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n </div>\r\n <div class=\"me-20\">\r\n <h4 class=\"icon-more\">30 +</h4>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-12\">\r\n <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n \r\n \r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n Brand name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n Brand name must be maximum of 100 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n Brand name is required\r\n </small>\r\n <small \r\n *ngIf=\"isClientNameTaken\">\r\n Brand name is already taken\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"firstname\" class=\"form-label\">First Name <span class=\"alert-required\">*</span></label>\r\n <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n First name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n First name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n First name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n Last name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n Last name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n Last name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Corporate Email <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n Corporate email must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n Corporate email must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n Corporate email is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"isEmailTaken\">\r\n Email is already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n <label for=\"phonenumber\" class=\"form-label\">Phone number <span class=\"alert-required\">*</span></label>\r\n <div class=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ms-4 me-5\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option class=\"mx-2\" value=\"+91\">In</option>\r\n <option class=\"mx-2\" value=\"+93\">Af</option>\r\n <option class=\"mx-2\" value=\"+355\">Al</option>\r\n </select>\r\n </div>\r\n <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\" [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n class=\"form-control border-disabled\" readonly>\r\n <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"type\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Mobile number already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" type=\"password\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">the password most contain atleast one capital letter and number.</div>\r\n <div>\r\n <small \r\n *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.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=\"aboutForm.get('password')?.touched && aboutForm.get('password')?.invalid\"></small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">the password most contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('pattern')\">The password must contain atleast one capital letter and number.</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.invalid\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" class=\"footer\">Tango IT solutions</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-10\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;font-size:1.1rem;font-weight:600;line-height:1.5;color:#181c32;-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}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal;text-transform:capitalize}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;max-width:10%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px;text-transform:capitalize}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:10%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}\n"] }]
326
+ args: [{ selector: 'lib-step1', template: "<div class=\"card mt-10 mx-15\">\r\n <div class=\"h-100 px-10 mx-5 my-7\">\r\n <!-- <div>\r\n <img class=\"bubble\" src=\"../../../../../../../assets/Icons/Signup-bubble-icon.svg\"\r\n alt=\"\" srcset=\"\"> -->\r\n <div class=\"mobileshow\">\r\n <h3 class=\"title1 pt-4\">AI co-pilot to boost your sales conversion</h3>\r\n <p class=\"subtext pb-4\">Join the leading global brands in understanding footfall and shopper behavior to\r\n boost\r\n sales.</p>\r\n\r\n\r\n <div class=\"d-flex justify-content-between\">\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Lenskart-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/nykaa-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/giva-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/Duroflex-logo.svg\" alt=\"\">\r\n </div>\r\n <div>\r\n <img class=\"imgsrc\" src=\"./assets/tango/Icons/loccitone-logo.svg\" alt=\"\">\r\n </div>\r\n <div class=\"me-20\">\r\n <h4 class=\"icon-more\">30 +</h4>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mt-12\">\r\n <h6 class=\"card-label mb-7\">Create an Account</h6>\r\n <form [formGroup]=\"aboutForm\" novalidate=\"novalidate\">\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"Brand\" class=\"form-label\">Brand Name <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onClientNameBlur()\" (input)=\"isClientNameTaken = 0\" formControlName=\"clientName\" type=\"type\" class=\"form-control\" id=\"Brand\" \r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required') }\" autocomplete=\"off\" >\r\n \r\n \r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('minlength')\">\r\n Brand name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('maxlength')\">\r\n Brand name must be maximum of 100 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('clientName')?.touched && aboutForm.get('clientName')?.hasError('required')\">\r\n Brand name is required\r\n </small>\r\n <small \r\n *ngIf=\"isClientNameTaken\">\r\n Brand name is already taken\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row px-0\">\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"firstname\" class=\"form-label\">First Name <span class=\"alert-required\">*</span></label>\r\n <input formControlName=\"firstName\" type=\"type\" class=\"form-control\" id=\"firstname\" autocomplete=\"off\"\r\n [ngClass]=\"{ 'is-invalid': aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required') }\">\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('minlength')\">\r\n First name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('maxlength')\">\r\n First name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('firstName')?.touched && aboutForm.get('firstName')?.hasError('required')\">\r\n First name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"lastname\" class=\"form-label\">Last Name</label>\r\n <input formControlName=\"lastName\" type=\"type\" class=\"form-control\" id=\"lastname\" autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('minlength')\">\r\n Last name must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('maxlength')\">\r\n Last name must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('lastName')?.touched && aboutForm.get('lastName')?.hasError('required')\">\r\n Last name is required\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"email\" class=\"form-label\">Corporate Email <span class=\"alert-required\">*</span></label>\r\n <input (blur)=\"onEmailBlur()\" (input)=\"isEmailTaken = 0\" formControlName=\"corporateEmail\" type=\"email\" class=\"form-control\" id=\"email\" [ngClass]=\"{ 'is-invalid': aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required') }\"\r\n autocomplete=\"off\">\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('minlength')\">\r\n Corporate email must be minimum of 3 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('maxlength')\">\r\n Corporate email must be maximum of 50 letters\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('required')\">\r\n Corporate email is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('corporateEmail')?.touched && aboutForm.get('corporateEmail')?.hasError('pattern')\">\r\n Enter a valid email\r\n </small>\r\n <small \r\n *ngIf=\"isEmailTaken\">\r\n Email is already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n\r\n <label for=\"phonenumber\" class=\"form-label\">Phone number <span class=\"alert-required\">*</span></label>\r\n <div class=\"input-group mb-3\">\r\n <div class=\"input-group-append\">\r\n <select formControlName=\"countryCode\" class=\"form-select select-radius ps-7 pe-9\" [ngClass]=\"{ 'country-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"inputGroupSelect01\">\r\n <option *ngFor=\"let country of countryList\" class=\"mx-2\" [value]=\"country.countryCode\">{{country.countryAlpha2Code}}</option>\r\n </select>\r\n </div>\r\n <input [value]=\"aboutForm.get('countryCode')?.value\" type=\"text\" [ngClass]=\"{ 'code-is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n class=\"form-control border-disabled\" readonly>\r\n <input (blur)=\"onMobileNumberBlur()\" (input)=\"isMobileTaken = 0\" formControlName=\"mobileNumber\" type=\"number\" class=\"form-control border-new\" [ngClass]=\"{ 'mobile-is-invalid is-invalid': aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required') }\"\r\n id=\"phonenumber\" autocomplete=\"off\">\r\n </div>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('required')\">\r\n Phone number is required\r\n </small>\r\n <small \r\n *ngIf=\"aboutForm.get('mobileNumber')?.touched && aboutForm.get('mobileNumber')?.hasError('pattern')\">\r\n Enter a valid phone number\r\n </small>\r\n <small \r\n *ngIf=\"isMobileTaken\">\r\n Mobile number already taken\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"password\" class=\"form-label\">Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onPasswordChange($event)\" formControlName=\"password\" type=\"password\" [ngClass]=\"{ 'is-invalid': aboutForm.get('password')?.touched && aboutForm.get('password')?.hasError('required') }\"\r\n class=\"form-control\" id=\"password\" autocomplete=\"new-password\">\r\n\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"passwordStrength\"\r\n [ngStyle]=\"{'background-color': passwordStrength === '0%' ? '' : (passwordStrength === '25%' ? 'red' : (passwordStrength === '50%' ? 'orange': (passwordStrength === '75%' ? 'yellow' : (passwordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small \r\n *ngIf=\"aboutForm.get('password')?.hasError('required') && aboutForm.get('password')?.touched\">Password is required</small>\r\n <small \r\n *ngIf=\"aboutForm.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=\"aboutForm.get('password')?.touched && aboutForm.get('password')?.invalid\"></small>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 col-xl-6 col-xxl-6 mb-7\">\r\n <label for=\"confirm\" class=\"form-label\">Confirm Password <span class=\"alert-required\">*</span></label>\r\n <input (input)=\"onConfirmPasswordChange($event)\" formControlName=\"confirmPassword\" type=\"password\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.hasError('required') }\"\r\n id=\"confirm\" autocomplete=\"off\">\r\n <div class=\"progressbar-wrapper mt-2\">\r\n <span [style.width]=\"confirmPasswordStrength\"\r\n [ngStyle]=\"{'background-color': confirmPasswordStrength === '0%' ? '' : (confirmPasswordStrength === '25%' ? 'red' : (confirmPasswordStrength === '50%' ? 'orange': (confirmPasswordStrength === '75%' ? 'yellow' : (confirmPasswordStrength === '100%' ? 'green' : '')))) }\"\r\n class=\"progressbar-inner\"></span>\r\n </div>\r\n <div class=\"password-note mt-2\">The password must contain atleast one capital letter and number.</div>\r\n <div>\r\n <small *ngIf=\"aboutForm.get('confirmPassword')?.hasError('pattern')\">The password must contain atleast one capital letter and number.</small>\r\n <small \r\n *ngIf=\"aboutForm.get('confirmPassword')?.touched && aboutForm.get('confirmPassword')?.invalid\">Password\r\n does not match</small>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <!-- <ng-container *ngIf=\"currentStep$.value == 1\"> -->\r\n <div class=\"text-end\">\r\n <button [disabled]=\"aboutForm.invalid || isMobileTaken || isEmailTaken || isClientNameTaken\" type=\"button\" class=\"btn btn-lg btn-primary\" (click)=\"nextStep()\">\r\n <span class=\"indicator-label px-5\">\r\n <ng-container>\r\n Next <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"white\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </ng-container>\r\n\r\n </span>\r\n </button>\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"mb-3 d-flex flex-column flex-md-row flex-md-stack pt-3 container-fluid\">\r\n <div class=\"text-gray-900 order-2 order-md-1 ms-10\">\r\n <span class=\"me-1 footer\">\u00A9 2024 </span>\r\n <a target=\"_blank\" class=\"footer\">Tango IT solutions</a>\r\n </div>\r\n <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-10\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#aboutus\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/#contact\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" href=\"https://tangoeye.ai/privacy-policy-2/\" class=\"menu-link px-5\">Privacy & policy</a></li>\r\n </ul>\r\n </div>\r\n</div>", styles: [".logo{width:16%;height:73px!important;margin-top:150px;margin-left:44%}.heading{margin-left:41%}.title1{color:var(--Gray-700, #344054)!important;font-size:24px!important;font-weight:600!important;line-height:32px}.subtext{color:var(--Gray-400, #98A2B3)!important;font-size:18px!important;font-weight:500!important;line-height:28px}.submit{padding-bottom:2%}.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;width:85px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1rem;font-weight:500;line-height:1}input,button,select,optgroup,textarea{margin:5px 0}.form-control{display:block;color:var(--Gray-500, #667085);font-size:16px;font-weight:400;line-height:24px;-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:600;line-height: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}.card-label{font-weight:600;font-size:20px}.me-n2{margin-right:3.5rem!important}.font{font-family:Inter!important}.phone{flex:0 0 auto;width:62.666667%}@media (min-width: 1024px) and (max-width: 1299px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}@media (min-width: 1300px) and (max-width: 1400px){.title1{text-shadow:1px 1px 1px #096dd7;font-weight:600;font-size:21px!important;line-height:34px;text-align:center;color:#464e5f}.subtext{font-family:Inter;font-size:18px;font-weight:600;line-height:37px;letter-spacing:0em;text-align:center;color:#7e8299}.imgsrc{width:100px}}small{color:var(--Gray-500, #667085)!important;font-size:10px!important;font-style:normal;font-weight:400!important;line-height:normal}.border-new{border-radius:0 8px 8px 0!important;border-left:none!important}.border-disabled{padding:5px 0;max-width:10%;border-radius:0!important;border-right:none!important;border-left:none!important}.select-radius{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border-right:none!important}.progressbar-wrapper{height:4px;width:100%;background-color:#f2f4f7;border-radius:4px;position:relative}.progressbar-inner{height:100%;position:absolute;border-radius:4px}small{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.is-invalid{border-radius:8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;padding-right:calc(1.5em + .75rem)!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIyMDFfMjA5NTApIj4KPHBhdGggZD0iTTcuOTk5NjcgNS4zMzM5OFY4LjAwMDY1TTcuOTk5NjcgMTAuNjY3M0g4LjAwNjM0TTE0LjY2NjMgOC4wMDA2NUMxNC42NjYzIDExLjY4MjYgMTEuNjgxNiAxNC42NjczIDcuOTk5NjcgMTQuNjY3M0M0LjMxNzc4IDE0LjY2NzMgMS4zMzMwMSAxMS42ODI2IDEuMzMzMDEgOC4wMDA2NUMxLjMzMzAxIDQuMzE4NzUgNC4zMTc3OCAxLjMzMzk4IDcuOTk5NjcgMS4zMzM5OEMxMS42ODE2IDEuMzMzOTggMTQuNjY2MyA0LjMxODc1IDE0LjY2NjMgOC4wMDA2NVoiIHN0cm9rZT0iI0YwNDQzOCIgc3Ryb2tlLXdpZHRoPSIxLjMzMzMzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yMjAxXzIwOTUwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=)!important;background-repeat:no-repeat!important;background-position:right calc(.375em + .1875rem) center!important;background-size:calc(.75em + .375rem) calc(.75em + .375rem)!important}.alert-required{color:var(--Error-500, #F04438)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.mobile-is-invalid{border-radius:0 8px 8px 0!important;border-left:none!important}.code-is-invalid{padding:5px 0;max-width:10%;border-radius:0!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important;border-left:none!important}.country-is-invalid{padding:5px 0 5px 15px;border-radius:8px 0 0 8px!important;border:1px solid var(--Error-300, #FDA29B)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;border-right:none!important}.icon-more{font-size:24px;font-weight:600;line-height:32px;color:#7e8299}.password-note{color:var(--Gray-500, #667085);font-size:10px;font-weight:400;line-height:normal}.footer{color:#7e8299!important;font-size:16px!important;font-weight:500!important}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
311
327
  }], ctorParameters: () => [{ type: ConversionService }, { type: i2$1.FormBuilder }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
312
328
 
313
329
  class ModalContentComponent {
@@ -502,7 +518,7 @@ class Step2Component {
502
518
  }
503
519
  initForm() {
504
520
  this.productForm = this.fb.group({
505
- tangoTraffic: [false],
521
+ tangoTraffic: [{ value: true, disabled: true }],
506
522
  tangoZone: [false],
507
523
  tangoRevop: [false],
508
524
  tangoSop: [false],
@@ -627,11 +643,11 @@ class Step2Component {
627
643
  this.setterservice.completeStepper({ step: 3 });
628
644
  }
629
645
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step2Component, deps: [{ token: i1$1.NgbModal }, { token: ConversionService }, { token: AuthService }, { token: i2$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
630
- 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\">\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 \"> Provide your store details</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12\">\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\r\n <!--begin::Select-->\r\n <button 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\" *ngIf=\"Original_price\"><b\r\n class=\"pricecodecolor text-set mx-2\"> 7666\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">8199</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\"\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 formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" 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\"\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 formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" 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\"\r\n (click)=\"showViewMore('revops')\">Tango RevOp\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 formControlName=\"tangoRevop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangorevop\" 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\"\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 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\"\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 formControlName=\"tangoPrioritySupport\"\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 [disabled]=\"countOfStore === '1'\" 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 [disabled]=\"countOfStore === '1'\" 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-10\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" 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 <div><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 <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M33.3847 23.8881L33.6522 24.1125L33.3847 23.8881ZM33.3847 23.8881C33.3847 23.8881 33.3847 23.8881 33.3847 23.8882C33.4451 23.9388 33.5308 24.0106 33.6522 24.1125L33.3847 23.8881ZM26.6309 31.0192L29.42 28.3275C27.7818 30.2858 26.1673 32.2205 25.9826 32.4616L25.9585 32.4931L25.9369 32.5264C25.9044 32.5767 25.8332 32.6197 25.7565 32.6197C25.6633 32.6197 25.6031 32.5798 25.5698 32.5319L23.4906 29.1498L25.2064 30.983L25.9003 31.7244L26.6309 31.0192Z\"\r\n fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"2\" />\r\n </svg>\r\n </div>\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;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px;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;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: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1440px) and (max-width: 1500px){.top-right{left:168px}}@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}::ng-deep .modal{position:fixed;inset:15% 0 0 10%}.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:20px;background:#fff;border-radius:5px;width:35%;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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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"] }] });
646
+ 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\">\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 \"> Provide your store details</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12\">\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\" *ngIf=\"Original_price\"><b\r\n class=\"pricecodecolor text-set mx-2\"> 7666\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">8199</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\"\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 formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" 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\"\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 formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" 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\"\r\n (click)=\"showViewMore('revops')\">Tango RevOp\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 formControlName=\"tangoRevop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangorevop\" 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\"\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 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\"\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 formControlName=\"tangoPrioritySupport\"\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-10\">\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 <div><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 <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M33.3847 23.8881L33.6522 24.1125L33.3847 23.8881ZM33.3847 23.8881C33.3847 23.8881 33.3847 23.8881 33.3847 23.8882C33.4451 23.9388 33.5308 24.0106 33.6522 24.1125L33.3847 23.8881ZM26.6309 31.0192L29.42 28.3275C27.7818 30.2858 26.1673 32.2205 25.9826 32.4616L25.9585 32.4931L25.9369 32.5264C25.9044 32.5767 25.8332 32.6197 25.7565 32.6197C25.6633 32.6197 25.6031 32.5798 25.5698 32.5319L23.4906 29.1498L25.2064 30.983L25.9003 31.7244L26.6309 31.0192Z\"\r\n fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"2\" />\r\n </svg>\r\n </div>\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: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1440px) and (max-width: 1500px){.top-right{left:168px}}@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}::ng-deep .modal{position:fixed;inset:15% 0 0 10%}.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:20px;background:#fff;border-radius:5px;width:35%;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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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"] }] });
631
647
  }
632
648
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Step2Component, decorators: [{
633
649
  type: Component,
634
- 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\">\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 \"> Provide your store details</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12\">\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\r\n <!--begin::Select-->\r\n <button 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\" *ngIf=\"Original_price\"><b\r\n class=\"pricecodecolor text-set mx-2\"> 7666\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">8199</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\"\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 formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" 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\"\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 formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" 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\"\r\n (click)=\"showViewMore('revops')\">Tango RevOp\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 formControlName=\"tangoRevop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangorevop\" 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\"\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 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\"\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 formControlName=\"tangoPrioritySupport\"\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 [disabled]=\"countOfStore === '1'\" 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 [disabled]=\"countOfStore === '1'\" 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-10\">\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">About us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" class=\"menu-link px-5\">Contact Us</a></li>\r\n <li class=\"menu-item footer\"><a target=\"_blank\" 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 <div><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 <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M33.3847 23.8881L33.6522 24.1125L33.3847 23.8881ZM33.3847 23.8881C33.3847 23.8881 33.3847 23.8881 33.3847 23.8882C33.4451 23.9388 33.5308 24.0106 33.6522 24.1125L33.3847 23.8881ZM26.6309 31.0192L29.42 28.3275C27.7818 30.2858 26.1673 32.2205 25.9826 32.4616L25.9585 32.4931L25.9369 32.5264C25.9044 32.5767 25.8332 32.6197 25.7565 32.6197C25.6633 32.6197 25.6031 32.5798 25.5698 32.5319L23.4906 29.1498L25.2064 30.983L25.9003 31.7244L26.6309 31.0192Z\"\r\n fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"2\" />\r\n </svg>\r\n </div>\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;font-weight:600!important;line-height:18px;padding:6px 11px!important;border-radius:4px;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;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: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1440px) and (max-width: 1500px){.top-right{left:168px}}@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}::ng-deep .modal{position:fixed;inset:15% 0 0 10%}.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:20px;background:#fff;border-radius:5px;width:35%;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}\n"] }]
650
+ 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\">\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 \"> Provide your store details</h2>\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-12 col-xl-12 col-xxl-12\">\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\" *ngIf=\"Original_price\"><b\r\n class=\"pricecodecolor text-set mx-2\"> 7666\r\n </b>\r\n </span>\r\n <span class=\"fs-3x fw-bold text-primary text-val\">8199</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\"\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 formControlName=\"tangoTraffic\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangotraffic\" 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\"\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 formControlName=\"tangoZone\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangozone\" 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\"\r\n (click)=\"showViewMore('revops')\">Tango RevOp\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 formControlName=\"tangoRevop\" class=\"form-check-input\"\r\n type=\"checkbox\" role=\"switch\" id=\"tangorevop\" 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\"\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 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\"\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 formControlName=\"tangoPrioritySupport\"\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-10\">\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 <div><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 <rect x=\"16\" y=\"16\" width=\"24\" height=\"24\" rx=\"10\" fill=\"#DAF1FF\" />\r\n <path\r\n d=\"M33.3847 23.8881L33.6522 24.1125L33.3847 23.8881ZM33.3847 23.8881C33.3847 23.8881 33.3847 23.8881 33.3847 23.8882C33.4451 23.9388 33.5308 24.0106 33.6522 24.1125L33.3847 23.8881ZM26.6309 31.0192L29.42 28.3275C27.7818 30.2858 26.1673 32.2205 25.9826 32.4616L25.9585 32.4931L25.9369 32.5264C25.9044 32.5767 25.8332 32.6197 25.7565 32.6197C25.6633 32.6197 25.6031 32.5798 25.5698 32.5319L23.4906 29.1498L25.2064 30.983L25.9003 31.7244L26.6309 31.0192Z\"\r\n fill=\"#33B5FF\" stroke=\"#00A3FF\" stroke-width=\"2\" />\r\n </svg>\r\n </div>\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: 1920px) and (max-width: 2100px){.top-right{left:272px}}@media (min-width: 1440px) and (max-width: 1500px){.top-right{left:168px}}@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}::ng-deep .modal{position:fixed;inset:15% 0 0 10%}.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:20px;background:#fff;border-radius:5px;width:35%;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}\n"] }]
635
651
  }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: ConversionService }, { type: AuthService }, { type: i2$1.FormBuilder }, { type: i0.ChangeDetectorRef }] });
636
652
 
637
653
  class Step3Component {
@@ -840,11 +856,11 @@ class VerticalComponent {
840
856
  this.currentStep$.next(prevStep);
841
857
  }
842
858
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VerticalComponent, deps: [{ token: ConversionService }], target: i0.ɵɵFactoryTarget.Component });
843
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VerticalComponent, selector: "lib-vertical", ngImport: i0, template: "\r\n<div class=\"card linearGradient fixed-element h-100\">\r\n <div class=\"d-flex justify-content-center justify-content-xl-start flex-row-auto\">\r\n\r\n<div class=\"stepper stepper-pills stepper-column \r\n \" id=\"kt_create_account_stepper\">\r\n <!--begin::Aside-->\r\n \r\n <div class=\"row justify-content-center logotext my-20\">\r\n <img class=\"mt-10\" src=\"./assets/tango/Icons/TangoEye.svg\" style=\"max-width: 35%\" alt=\"\">\r\n </div>\r\n <div class=\"card-body px-6 px-lg-10 px-xxl-15\">\r\n <div class=\"stepper-nav\">\r\n\r\n <div class=\"stepper-item my-5 pe-15\" [class.brandbg]=\"currentStep$.value === 1\" [ngClass]=\"{\r\n current: currentStep$.value === 1,\r\n completed: currentStep$.value > 1\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">1</i>\r\n <span class=\"stepper-number\">1</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n About\r\n </h3>\r\n\r\n <div class=\"stepper-desc fw-semibold\">\r\n Provide brand details\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 2\" [ngClass]=\"{\r\n current: currentStep$.value === 2,\r\n completed: currentStep$.value > 2\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">2</i>\r\n <span class=\"stepper-number\">2</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Pricing \r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Choose suitable plan\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 3\" [ngClass]=\"{\r\n current: currentStep$.value === 3,\r\n completed: currentStep$.value > 3\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">3</i>\r\n <span class=\"stepper-number\">3</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Sign Up\r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Let's get started\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n </div>\r\n\r\n <div class=\"text-center\">\r\n <div class=\"footerleft text-center\" style=\" bottom: 3%;\"> Already\r\n have an\r\n Account? <a _ngcontent-skm-c153=\"\" href=\"/auth/login\" class=\"link-primary fw-bolder\"\r\n href=\"/auth/login\">Sign\r\n In</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n <!--begin::Aside-->\r\n </div>\r\n \r\n </div>\r\n\r\n\r\n\r\n ", styles: [".linearGradient{background:-webkit-linear-gradient(180deg,#794fd9 0%,#096dd7 100%);border-radius:0!important;height:100%}.fixed-element{position:fixed;border-radius:5px;z-index:999}@media (min-width: 1920px) and (max-width: 2100px){.fixed-element{padding:0 40px}}@media (min-width: 1440px) and (max-width: 1600px){.fixed-element{padding:0}}@media (min-width: 2160px) and (max-width: 3100px){.fixed-element{padding:0 110px}}.stepper.stepper-pills .stepper-item .stepper-icon{background-color:transparent}.brandbg{border-radius:8px;border:1px solid var(--Gray-400, #98A2B3);background:#ffffff1a;display:flex;padding:8px 24px 8px 0!important;align-items:flex-start;gap:16px!important}.stepper.stepper-pills .stepper-item .stepper-label .stepper-title{color:var(--White, #FFF)!important;font-family:Inter;font-size:20px!important;font-style:normal;font-weight:600!important;line-height:30px}.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number{font-weight:600;color:#fff;font-size:1.25rem}.stepper-desc{color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.footerleft{position:fixed;color:var(--White, #FFF)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.link-primary{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon .stepper-check,.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check{color:#fff;display:inline-block;font-style:normal}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
859
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: VerticalComponent, selector: "lib-vertical", ngImport: i0, template: "\r\n<div class=\"card linearGradient fixed-element h-100\">\r\n <div class=\"d-flex justify-content-center justify-content-xl-start flex-row-auto\">\r\n\r\n<div class=\"stepper stepper-pills stepper-column \r\n \" id=\"kt_create_account_stepper\">\r\n <!--begin::Aside-->\r\n \r\n <div class=\"row justify-content-center logotext my-20\">\r\n <img class=\"mt-10\" src=\"./assets/tango/Icons/TangoEye.svg\" style=\"max-width: 35%\" alt=\"\">\r\n </div>\r\n <div class=\"card-body px-6 px-lg-10 px-xxl-15\">\r\n <div class=\"stepper-nav\">\r\n\r\n <div class=\"stepper-item my-5 pe-15\" [class.brandbg]=\"currentStep$.value === 1\" [ngClass]=\"{\r\n current: currentStep$.value === 1,\r\n completed: currentStep$.value > 1\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">1</i>\r\n <span class=\"stepper-number\">1</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n About\r\n </h3>\r\n\r\n <div class=\"stepper-desc fw-semibold\">\r\n Provide brand details\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 2\" [ngClass]=\"{\r\n current: currentStep$.value === 2,\r\n completed: currentStep$.value > 2\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">2</i>\r\n <span class=\"stepper-number\">2</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Pricing \r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Choose suitable plan\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 3\" [ngClass]=\"{\r\n current: currentStep$.value === 3,\r\n completed: currentStep$.value > 3\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">3</i>\r\n <span class=\"stepper-number\">3</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Sign Up\r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Let's get started\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n </div>\r\n\r\n <div class=\"text-center\">\r\n <div class=\"footerleft text-center\" style=\" bottom: 3%;\"> Already\r\n have an\r\n Account? <a _ngcontent-skm-c153=\"\" href=\"/auth/login\" class=\"link-primary fw-bolder\"\r\n href=\"/auth/login\">Sign\r\n In</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n <!--begin::Aside-->\r\n </div>\r\n \r\n </div>\r\n\r\n\r\n\r\n ", styles: [".linearGradient{background:-webkit-linear-gradient(180deg,#794fd9 0%,#096dd7 100%);border-radius:0!important;height:100%}.fixed-element{position:fixed;border-radius:5px;z-index:999}@media (min-width: 1920px) and (max-width: 2100px){.fixed-element{padding:0 40px}}@media (min-width: 1440px) and (max-width: 1600px){.fixed-element{padding:0}}@media (min-width: 2160px) and (max-width: 3100px){.fixed-element{padding:0 110px}}.stepper.stepper-pills .stepper-item .stepper-icon{background-color:transparent}.brandbg{border-radius:8px;border:1px solid var(--Gray-400, #98A2B3);background:#ffffff1a;display:flex;padding:8px 24px 8px 0!important;align-items:flex-start;gap:16px!important}.stepper.stepper-pills .stepper-item .stepper-label .stepper-title{color:var(--White, #FFF)!important;font-family:Inter;font-size:20px!important;font-style:normal;font-weight:600!important;line-height:30px}.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number{color:var(--White, #FFF);font-size:18px;font-weight:600;line-height:28px}.stepper-desc{color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.footerleft{position:fixed;color:var(--White, #FFF)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.link-primary{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon .stepper-check,.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check{color:#fff;display:inline-block;font-style:normal}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
844
860
  }
845
861
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: VerticalComponent, decorators: [{
846
862
  type: Component,
847
- args: [{ selector: 'lib-vertical', template: "\r\n<div class=\"card linearGradient fixed-element h-100\">\r\n <div class=\"d-flex justify-content-center justify-content-xl-start flex-row-auto\">\r\n\r\n<div class=\"stepper stepper-pills stepper-column \r\n \" id=\"kt_create_account_stepper\">\r\n <!--begin::Aside-->\r\n \r\n <div class=\"row justify-content-center logotext my-20\">\r\n <img class=\"mt-10\" src=\"./assets/tango/Icons/TangoEye.svg\" style=\"max-width: 35%\" alt=\"\">\r\n </div>\r\n <div class=\"card-body px-6 px-lg-10 px-xxl-15\">\r\n <div class=\"stepper-nav\">\r\n\r\n <div class=\"stepper-item my-5 pe-15\" [class.brandbg]=\"currentStep$.value === 1\" [ngClass]=\"{\r\n current: currentStep$.value === 1,\r\n completed: currentStep$.value > 1\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">1</i>\r\n <span class=\"stepper-number\">1</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n About\r\n </h3>\r\n\r\n <div class=\"stepper-desc fw-semibold\">\r\n Provide brand details\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 2\" [ngClass]=\"{\r\n current: currentStep$.value === 2,\r\n completed: currentStep$.value > 2\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">2</i>\r\n <span class=\"stepper-number\">2</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Pricing \r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Choose suitable plan\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 3\" [ngClass]=\"{\r\n current: currentStep$.value === 3,\r\n completed: currentStep$.value > 3\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">3</i>\r\n <span class=\"stepper-number\">3</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Sign Up\r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Let's get started\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n </div>\r\n\r\n <div class=\"text-center\">\r\n <div class=\"footerleft text-center\" style=\" bottom: 3%;\"> Already\r\n have an\r\n Account? <a _ngcontent-skm-c153=\"\" href=\"/auth/login\" class=\"link-primary fw-bolder\"\r\n href=\"/auth/login\">Sign\r\n In</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n <!--begin::Aside-->\r\n </div>\r\n \r\n </div>\r\n\r\n\r\n\r\n ", styles: [".linearGradient{background:-webkit-linear-gradient(180deg,#794fd9 0%,#096dd7 100%);border-radius:0!important;height:100%}.fixed-element{position:fixed;border-radius:5px;z-index:999}@media (min-width: 1920px) and (max-width: 2100px){.fixed-element{padding:0 40px}}@media (min-width: 1440px) and (max-width: 1600px){.fixed-element{padding:0}}@media (min-width: 2160px) and (max-width: 3100px){.fixed-element{padding:0 110px}}.stepper.stepper-pills .stepper-item .stepper-icon{background-color:transparent}.brandbg{border-radius:8px;border:1px solid var(--Gray-400, #98A2B3);background:#ffffff1a;display:flex;padding:8px 24px 8px 0!important;align-items:flex-start;gap:16px!important}.stepper.stepper-pills .stepper-item .stepper-label .stepper-title{color:var(--White, #FFF)!important;font-family:Inter;font-size:20px!important;font-style:normal;font-weight:600!important;line-height:30px}.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number{font-weight:600;color:#fff;font-size:1.25rem}.stepper-desc{color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.footerleft{position:fixed;color:var(--White, #FFF)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.link-primary{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon .stepper-check,.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check{color:#fff;display:inline-block;font-style:normal}\n"] }]
863
+ args: [{ selector: 'lib-vertical', template: "\r\n<div class=\"card linearGradient fixed-element h-100\">\r\n <div class=\"d-flex justify-content-center justify-content-xl-start flex-row-auto\">\r\n\r\n<div class=\"stepper stepper-pills stepper-column \r\n \" id=\"kt_create_account_stepper\">\r\n <!--begin::Aside-->\r\n \r\n <div class=\"row justify-content-center logotext my-20\">\r\n <img class=\"mt-10\" src=\"./assets/tango/Icons/TangoEye.svg\" style=\"max-width: 35%\" alt=\"\">\r\n </div>\r\n <div class=\"card-body px-6 px-lg-10 px-xxl-15\">\r\n <div class=\"stepper-nav\">\r\n\r\n <div class=\"stepper-item my-5 pe-15\" [class.brandbg]=\"currentStep$.value === 1\" [ngClass]=\"{\r\n current: currentStep$.value === 1,\r\n completed: currentStep$.value > 1\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">1</i>\r\n <span class=\"stepper-number\">1</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n About\r\n </h3>\r\n\r\n <div class=\"stepper-desc fw-semibold\">\r\n Provide brand details\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 2\" [ngClass]=\"{\r\n current: currentStep$.value === 2,\r\n completed: currentStep$.value > 2\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">2</i>\r\n <span class=\"stepper-number\">2</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Pricing \r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Choose suitable plan\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n \r\n </div>\r\n\r\n <div class=\"stepper-item my-5\" [class.brandbg]=\"currentStep$.value === 3\" [ngClass]=\"{\r\n current: currentStep$.value === 3,\r\n completed: currentStep$.value > 3\r\n }\">\r\n <!--begin::Wrapper-->\r\n <div class=\"stepper-wrapper px-5\">\r\n <!--begin::Icon-->\r\n <div class=\"stepper-icon w-40px h-40px\">\r\n <i class=\"stepper-check stepper-number\">3</i>\r\n <span class=\"stepper-number\">3</span>\r\n </div>\r\n <!--end::Icon-->\r\n\r\n <!--begin::Label-->\r\n <div class=\"stepper-label\">\r\n <h3 class=\"stepper-title\">\r\n Sign Up\r\n </h3>\r\n <div class=\"stepper-desc fw-semibold\">\r\n Let's get started\r\n </div>\r\n </div>\r\n <!--end::Label-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n </div>\r\n\r\n <div class=\"text-center\">\r\n <div class=\"footerleft text-center\" style=\" bottom: 3%;\"> Already\r\n have an\r\n Account? <a _ngcontent-skm-c153=\"\" href=\"/auth/login\" class=\"link-primary fw-bolder\"\r\n href=\"/auth/login\">Sign\r\n In</a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n <!--begin::Aside-->\r\n </div>\r\n \r\n </div>\r\n\r\n\r\n\r\n ", styles: [".linearGradient{background:-webkit-linear-gradient(180deg,#794fd9 0%,#096dd7 100%);border-radius:0!important;height:100%}.fixed-element{position:fixed;border-radius:5px;z-index:999}@media (min-width: 1920px) and (max-width: 2100px){.fixed-element{padding:0 40px}}@media (min-width: 1440px) and (max-width: 1600px){.fixed-element{padding:0}}@media (min-width: 2160px) and (max-width: 3100px){.fixed-element{padding:0 110px}}.stepper.stepper-pills .stepper-item .stepper-icon{background-color:transparent}.brandbg{border-radius:8px;border:1px solid var(--Gray-400, #98A2B3);background:#ffffff1a;display:flex;padding:8px 24px 8px 0!important;align-items:flex-start;gap:16px!important}.stepper.stepper-pills .stepper-item .stepper-label .stepper-title{color:var(--White, #FFF)!important;font-family:Inter;font-size:20px!important;font-style:normal;font-weight:600!important;line-height:30px}.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number{color:var(--White, #FFF);font-size:18px;font-weight:600;line-height:28px}.stepper-desc{color:var(--Gray-300, #D0D5DD)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.footerleft{position:fixed;color:var(--White, #FFF)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400!important;line-height:24px}.link-primary{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:16px!important;font-style:normal;font-weight:600!important;line-height:24px}.stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon .stepper-check,.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check{color:#fff;display:inline-block;font-style:normal}\n"] }]
848
864
  }], ctorParameters: () => [{ type: ConversionService }] });
849
865
 
850
866
  class TangoAuthSignupComponent {