tango-app-ui-manage-stores 3.0.26-dev → 3.0.28-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/esm2022/lib/components/add-stores/add-stores.component.mjs +33 -25
  2. package/esm2022/lib/components/add-stores-form/add-stores-form.component.mjs +3 -3
  3. package/esm2022/lib/components/create-group/create-group.component.mjs +3 -3
  4. package/esm2022/lib/components/group-details/group-details.component.mjs +8 -15
  5. package/esm2022/lib/components/tango-manage-groups/tango-manage-groups.component.mjs +53 -3
  6. package/esm2022/lib/components/tango-manage-stores/tango-manage-stores.component.mjs +57 -38
  7. package/esm2022/lib/services/stores.service.mjs +6 -1
  8. package/esm2022/lib/utils/filters/filters.component.mjs +19 -15
  9. package/fesm2022/tango-app-ui-manage-stores.mjs +173 -95
  10. package/fesm2022/tango-app-ui-manage-stores.mjs.map +1 -1
  11. package/lib/components/tango-manage-groups/tango-manage-groups.component.d.ts +9 -0
  12. package/lib/components/tango-manage-stores/tango-manage-stores.component.d.ts +4 -2
  13. package/lib/services/stores.service.d.ts +1 -0
  14. package/lib/utils/filters/filters.component.d.ts +4 -4
  15. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-stores.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Component, Input, HostListener, EventEmitter, Output, ViewChild, inject, NgModule } from '@angular/core';
3
- import * as i5 from '@angular/common';
3
+ import * as i6 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i1$3 from '@angular/forms';
6
6
  import { Validators, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -19,7 +19,7 @@ import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
19
19
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
20
20
  import Swal from 'sweetalert2';
21
21
  import * as moment from 'moment-timezone';
22
- import * as i6 from '@angular-magic/ngx-gp-autocomplete';
22
+ import * as i6$1 from '@angular-magic/ngx-gp-autocomplete';
23
23
  import { NgxGpAutocompleteModule } from '@angular-magic/ngx-gp-autocomplete';
24
24
  import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
25
25
  import { Loader } from '@googlemaps/js-api-loader';
@@ -63,6 +63,11 @@ class StoresService {
63
63
  .post(`${this.storeApiUrl}/create-store`, storeBody)
64
64
  .pipe(map((response) => response), catchError(this.handleError));
65
65
  }
66
+ updateStore(storeId, storesBodyReq) {
67
+ return this.http
68
+ .put(`${this.storeApiUrl}/update-store/${storeId}`, storesBodyReq)
69
+ .pipe(map((response) => response), catchError(this.handleError));
70
+ }
66
71
  storeBulkUpload(storesBodyReq) {
67
72
  return this.http
68
73
  .post(`${this.storeApiUrl}/storeBulkUpload`, storesBodyReq)
@@ -427,11 +432,11 @@ class CreateGroupComponent {
427
432
  this.selectedText = `${this.selectedValuesArray[0].length} Stores Selected`;
428
433
  }
429
434
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CreateGroupComponent, deps: [{ token: i1$2.NgbActiveModal }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormBuilder }, { token: GroupService }, { token: i3.ToastService }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
430
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: CreateGroupComponent, selector: "lib-create-group", inputs: { type: "type", editGroup: "editGroup" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"card py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\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\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"operationType==='add'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n Group</a>\r\n <div class=\"sub-title\">Please add your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Group</a>\r\n <div class=\"sub-title\">Edit your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">View Group</a>\r\n <div class=\"sub-title\">View your group details</div>\r\n </div>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-3 text-end px-0\" (click)=\"editgroup()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n }\r\n </div>\r\n <form [formGroup]=\"groupForm\">\r\n <div class=\"row mt-8\">\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"groupName\" class=\"form-label\">Group Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"groupName\"\r\n formControlName=\"groupName\">\r\n </div>\r\n <div class=\"my-5 dropdown1 cursor-pointer h-700\" *ngFor=\"let item of dataObject; let i = index\">\r\n <label for=\"storeList\" class=\"form-label\">Select Stores</label>\r\n <input type=\"text\" class=\"form-control disable\" id=\"storeName\" [ngModel]=\"selectedText\" [ngModelOptions]=\"{standalone: true}\"\r\n placeholder=\"Select Stores\" (click)=\"Dropdown('Stores',i,$event)\" readonly>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Stores.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div *ngFor=\"let store of item.Stores;let j=index;\"\r\n class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"store?.storeName\"\r\n id=\"option{{store?.storeName}}\" [checked]=\"store?.checked\"\r\n (change)=\"toggleCheckbox($event,store,i,j)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{store?.storeName}}\">\r\n {{ store?.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"description\" class=\"form-label\">Description</label>\r\n <textarea rows=\"5\" class=\"form-control\" id=\"description\" formControlName=\"description\"></textarea>\r\n </div>\r\n </div>\r\n <div *ngIf=\"operationType !== 'view'\" role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button type=\"button\" class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button type=\"submit\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n (click)=\"groupSubmit()\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}::ng-deep .modal-content{border-radius:12px!important}.btn-outline{padding:12px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:285px;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:89%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
435
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: CreateGroupComponent, selector: "lib-create-group", inputs: { type: "type", editGroup: "editGroup" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"card py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\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\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"operationType==='add'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n Group</a>\r\n <div class=\"sub-title\">Please add your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Group</a>\r\n <div class=\"sub-title\">Edit your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">View Group</a>\r\n <div class=\"sub-title\">View your group details</div>\r\n </div>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-3 text-end px-0\" (click)=\"editgroup()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n }\r\n </div>\r\n <form [formGroup]=\"groupForm\">\r\n <div class=\"row mt-8\">\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"groupName\" class=\"form-label\">Group Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"groupName\"\r\n formControlName=\"groupName\" \r\n [ngClass]=\"{ 'is-invalid': groupForm.get('groupName')?.touched && groupForm.get('groupName')?.hasError('required') }\">\r\n @if (groupForm.get('groupName')?.touched && groupForm.get('groupName')?.hasError('required')) {\r\n <small>Group Name is required</small>\r\n }\r\n </div>\r\n <div class=\"my-5 dropdown1 cursor-pointer h-700\" *ngFor=\"let item of dataObject; let i = index\">\r\n <label for=\"storeList\" class=\"form-label\">Select Stores</label>\r\n <input type=\"text\" class=\"form-control disable\" id=\"storeName\" [ngModel]=\"selectedText\" [ngModelOptions]=\"{standalone: true}\"\r\n placeholder=\"Select Stores\" (click)=\"Dropdown('Stores',i,$event)\" readonly>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Stores.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div *ngFor=\"let store of item.Stores;let j=index;\"\r\n class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"store?.storeName\"\r\n id=\"option{{store?.storeName}}\" [checked]=\"store?.checked\"\r\n (change)=\"toggleCheckbox($event,store,i,j)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{store?.storeName}}\">\r\n {{ store?.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"description\" class=\"form-label\">Description</label>\r\n <textarea rows=\"5\" class=\"form-control\" id=\"description\" formControlName=\"description\"></textarea>\r\n </div>\r\n </div>\r\n <div *ngIf=\"operationType !== 'view'\" role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button type=\"button\" class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button type=\"submit\" [disabled]=\"!groupForm.valid\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n (click)=\"groupSubmit()\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}::ng-deep .modal-content{border-radius:12px!important}.btn-outline{padding:12px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:285px;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:89%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.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}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
431
436
  }
432
437
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CreateGroupComponent, decorators: [{
433
438
  type: Component,
434
- args: [{ selector: "lib-create-group", template: "<div class=\"card py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\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\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"operationType==='add'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n Group</a>\r\n <div class=\"sub-title\">Please add your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Group</a>\r\n <div class=\"sub-title\">Edit your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">View Group</a>\r\n <div class=\"sub-title\">View your group details</div>\r\n </div>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-3 text-end px-0\" (click)=\"editgroup()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n }\r\n </div>\r\n <form [formGroup]=\"groupForm\">\r\n <div class=\"row mt-8\">\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"groupName\" class=\"form-label\">Group Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"groupName\"\r\n formControlName=\"groupName\">\r\n </div>\r\n <div class=\"my-5 dropdown1 cursor-pointer h-700\" *ngFor=\"let item of dataObject; let i = index\">\r\n <label for=\"storeList\" class=\"form-label\">Select Stores</label>\r\n <input type=\"text\" class=\"form-control disable\" id=\"storeName\" [ngModel]=\"selectedText\" [ngModelOptions]=\"{standalone: true}\"\r\n placeholder=\"Select Stores\" (click)=\"Dropdown('Stores',i,$event)\" readonly>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Stores.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div *ngFor=\"let store of item.Stores;let j=index;\"\r\n class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"store?.storeName\"\r\n id=\"option{{store?.storeName}}\" [checked]=\"store?.checked\"\r\n (change)=\"toggleCheckbox($event,store,i,j)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{store?.storeName}}\">\r\n {{ store?.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"description\" class=\"form-label\">Description</label>\r\n <textarea rows=\"5\" class=\"form-control\" id=\"description\" formControlName=\"description\"></textarea>\r\n </div>\r\n </div>\r\n <div *ngIf=\"operationType !== 'view'\" role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button type=\"button\" class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button type=\"submit\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n (click)=\"groupSubmit()\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}::ng-deep .modal-content{border-radius:12px!important}.btn-outline{padding:12px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:285px;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:89%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
439
+ args: [{ selector: "lib-create-group", template: "<div class=\"card py-0\">\r\n <div class=\"card-body py-0 d-flex flex-start flex-column p-9 \">\r\n <div class=\"my-5\">\r\n <div class=\"symbol symbol-75px symbol-circle\">\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\r\n d=\"M20.5 23.6816C18.8425 23.6816 17.5 22.2133 17.5 20.4004C17.5 18.5875 18.8425 17.1191 20.5 17.1191C22.1575 17.1191 23.5 18.5875 23.5 20.4004C23.5 22.2133 22.1575 23.6816 20.5 23.6816ZM35.6483 23.6816C33.9908 23.6816 32.6483 22.2133 32.6483 20.4004C32.6483 18.5875 33.9908 17.1191 35.6483 17.1191C37.3058 17.1191 38.6483 18.5875 38.6483 20.4004C38.6483 22.2133 37.3058 23.6816 35.6483 23.6816ZM31.509 26.3066C31.509 28.4805 29.8965 30.2441 27.909 30.2441C25.9215 30.2441 24.309 28.4805 24.309 26.3066C24.309 24.1328 25.9215 22.3691 27.909 22.3691C29.8965 22.3691 31.509 24.1328 31.509 26.3066Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M20.0013 25.7559C17.7925 25.7559 16 27.7164 16 30.1322C16 30.6121 16.36 31.0059 16.7988 31.0059H24.8013H24.8275C23.8338 30.042 23.2038 28.6352 23.2038 27.0684C23.2038 26.7566 23.2263 26.449 23.275 26.1537C22.765 25.8994 22.1988 25.7559 21.6025 25.7559H20.0013Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M31.1725 31.0059H31.1987H39.2012C39.64 31.0059 40 30.6162 40 30.1322C40 27.7164 38.2075 25.7559 35.9987 25.7559H34.3975C33.8012 25.7559 33.235 25.8953 32.725 26.1537C32.77 26.4531 32.7963 26.7566 32.7963 27.0684C32.7963 28.6352 32.17 30.042 31.1725 31.0059Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M25.7988 32.3183C23.0388 32.3183 20.8 34.767 20.8 37.7857C20.8 38.3928 21.25 38.8809 21.8013 38.8809H34.1987C34.7537 38.8809 35.2 38.3887 35.2 37.7857C35.2 34.767 32.9613 32.3183 30.2013 32.3183H25.7988Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row w-100\">\r\n <div *ngIf=\"operationType==='add'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Add\r\n Group</a>\r\n <div class=\"sub-title\">Please add your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='edit'\" class=\"col-md-12\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">Edit Group</a>\r\n <div class=\"sub-title\">Edit your group details</div>\r\n </div>\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-9\">\r\n <a class=\"fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer\">View Group</a>\r\n <div class=\"sub-title\">View your group details</div>\r\n </div>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <div *ngIf=\"operationType==='view'\" class=\"col-md-3 text-end px-0\" (click)=\"editgroup()\">\r\n <button class=\"btn btn-outline\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3833_85908)\">\r\n <path\r\n d=\"M9.16602 3.3332H3.33268C2.89065 3.3332 2.46673 3.50879 2.15417 3.82135C1.84161 4.13391 1.66602 4.55784 1.66602 4.99986V16.6665C1.66602 17.1086 1.84161 17.5325 2.15417 17.845C2.46673 18.1576 2.89065 18.3332 3.33268 18.3332H14.9993C15.4414 18.3332 15.8653 18.1576 16.1779 17.845C16.4904 17.5325 16.666 17.1086 16.666 16.6665V10.8332M15.416 2.0832C15.7475 1.75168 16.1972 1.56543 16.666 1.56543C17.1349 1.56543 17.5845 1.75168 17.916 2.0832C18.2475 2.41472 18.4338 2.86436 18.4338 3.3332C18.4338 3.80204 18.2475 4.25168 17.916 4.5832L9.99935 12.4999L6.66602 13.3332L7.49935 9.99986L15.416 2.0832Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3833_85908\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg></button>\r\n </div>\r\n }\r\n </div>\r\n <form [formGroup]=\"groupForm\">\r\n <div class=\"row mt-8\">\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"groupName\" class=\"form-label\">Group Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"groupName\"\r\n formControlName=\"groupName\" \r\n [ngClass]=\"{ 'is-invalid': groupForm.get('groupName')?.touched && groupForm.get('groupName')?.hasError('required') }\">\r\n @if (groupForm.get('groupName')?.touched && groupForm.get('groupName')?.hasError('required')) {\r\n <small>Group Name is required</small>\r\n }\r\n </div>\r\n <div class=\"my-5 dropdown1 cursor-pointer h-700\" *ngFor=\"let item of dataObject; let i = index\">\r\n <label for=\"storeList\" class=\"form-label\">Select Stores</label>\r\n <input type=\"text\" class=\"form-control disable\" id=\"storeName\" [ngModel]=\"selectedText\" [ngModelOptions]=\"{standalone: true}\"\r\n placeholder=\"Select Stores\" (click)=\"Dropdown('Stores',i,$event)\" readonly>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Stores.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div *ngFor=\"let store of item.Stores;let j=index;\"\r\n class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"store?.storeName\"\r\n id=\"option{{store?.storeName}}\" [checked]=\"store?.checked\"\r\n (change)=\"toggleCheckbox($event,store,i,j)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{store?.storeName}}\">\r\n {{ store?.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-12 col-lg-12 mb-5\">\r\n <label for=\"description\" class=\"form-label\">Description</label>\r\n <textarea rows=\"5\" class=\"form-control\" id=\"description\" formControlName=\"description\"></textarea>\r\n </div>\r\n </div>\r\n <div *ngIf=\"operationType !== 'view'\" role=\"group\" class=\"d-flex mt-3 mb-15\">\r\n <button type=\"button\" class=\"btn btn-outline w-100 me-3\" (click)=\"cancel()\">Cancel</button>\r\n <button type=\"submit\" [disabled]=\"!groupForm.valid\" id=\"alert-toast\" class=\"btn btn-primary w-100 ms-3\"\r\n (click)=\"groupSubmit()\">Submit</button>\r\n </div>\r\n </form>\r\n </div>\r\n</div>", styles: [".title{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600;line-height:28px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}::ng-deep .modal-content{border-radius:12px!important}.btn-outline{padding:12px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;height:285px;overflow:auto;border-radius:12px;background:var(--White, #FFF);box-shadow:0 8px 8px -4px #10182808,0 20px 24px -4px #10182814;width:89%}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.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}small{color:var(--Error-500, #F04438)!important;font-size:13px!important;font-weight:400!important;line-height:20px}\n"] }]
435
440
  }], ctorParameters: () => [{ type: i1$2.NgbActiveModal }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormBuilder }, { type: GroupService }, { type: i3.ToastService }, { type: i1$1.GlobalStateService }], propDecorators: { type: [{
436
441
  type: Input
437
442
  }], editGroup: [{
@@ -540,6 +545,12 @@ class TangoManageGroupsComponent {
540
545
  searchValue = "";
541
546
  $headerFilters;
542
547
  detach = new Subject();
548
+ pagination = {
549
+ offset: 1,
550
+ limit: 10,
551
+ totalCount: 0,
552
+ };
553
+ paginationSizes = [10, 20, 30];
543
554
  constructor(modalService, groupService, cd, gs) {
544
555
  this.modalService = modalService;
545
556
  this.groupService = groupService;
@@ -571,12 +582,30 @@ class TangoManageGroupsComponent {
571
582
  if (res && res.code == 200) {
572
583
  this.groupData = res.data;
573
584
  this.groups = res.data.result;
585
+ this.pagination = {
586
+ offset: res.data?.offset
587
+ ? res?.data.offset
588
+ : this.pagination.offset,
589
+ limit: res.data?.limit ? res?.data.limit : this.pagination.limit,
590
+ totalCount: res.data.count,
591
+ };
592
+ if (res.data.count < 10) {
593
+ this.paginationSizes = [res.data.count];
594
+ }
595
+ else {
596
+ this.paginationSizes = [10, 20, 30];
597
+ }
574
598
  this.loading = false;
575
599
  this.cd.detectChanges();
576
600
  }
577
601
  else {
578
602
  this.groups = [];
579
603
  this.loading = false;
604
+ this.pagination = {
605
+ offset: 1,
606
+ limit: 10,
607
+ totalCount: 0,
608
+ };
580
609
  this.cd.detectChanges();
581
610
  }
582
611
  this.loading = false;
@@ -585,6 +614,11 @@ class TangoManageGroupsComponent {
585
614
  error: () => {
586
615
  this.groups = [];
587
616
  this.loading = false;
617
+ this.pagination = {
618
+ offset: 1,
619
+ limit: 10,
620
+ totalCount: 0,
621
+ };
588
622
  this.cd.detectChanges();
589
623
  },
590
624
  complete: () => {
@@ -599,9 +633,29 @@ class TangoManageGroupsComponent {
599
633
  };
600
634
  this.getGroups();
601
635
  }
636
+ onPageChange(pageOffset) {
637
+ this.group_req.offset = Number(pageOffset);
638
+ this.pagination.offset = Number(pageOffset);
639
+ this.getGroups();
640
+ }
641
+ onPageSizeChange(pageSize) {
642
+ this.group_req.limit = Number(pageSize);
643
+ this.pagination.limit = Number(pageSize);
644
+ this.group_req.offset = 1;
645
+ this.pagination.offset = 1;
646
+ this.getGroups();
647
+ }
602
648
  // isLinkActive(link: string): boolean {
603
649
  // return this.router.isActive(link, true);
604
650
  // }
651
+ paginationSize() {
652
+ if (this.pagination?.totalCount < 10) {
653
+ return this.pagination.totalCount;
654
+ }
655
+ else {
656
+ return this.pagination.limit;
657
+ }
658
+ }
605
659
  groupsDetials(val) {
606
660
  const dataToGroup = "Group Details Value";
607
661
  this.dataEvent.emit(dataToGroup);
@@ -693,17 +747,18 @@ class TangoManageGroupsComponent {
693
747
  });
694
748
  }
695
749
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, deps: [{ token: i1$2.NgbModal }, { token: GroupService }, { token: i0.ChangeDetectorRef }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
696
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 0}} total groups</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n @if (groups.length) {\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create Group</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && groups.length\" class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n @if ((gs.userAccess | async)?.manage_stores_isDelete) {\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading && !groups.length\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!loading && !groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n Create Group\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] });
750
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 0}} total groups</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n @if (groups.length) {\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create Group</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && groups.length\" class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n @if ((gs.userAccess | async)?.manage_stores_isDelete) {\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <ng-container *ngIf=\"loading && !groups.length\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!loading && !groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n Create Group\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
697
751
  }
698
752
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageGroupsComponent, decorators: [{
699
753
  type: Component,
700
- args: [{ selector: "lib-tango-manage-groups", template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 0}} total groups</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n @if (groups.length) {\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create Group</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && groups.length\" class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n @if ((gs.userAccess | async)?.manage_stores_isDelete) {\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"loading && !groups.length\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!loading && !groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n Create Group\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"] }]
754
+ args: [{ selector: "lib-tango-manage-groups", template: "<div class=\"card mb-10\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Groups</span>\r\n <span class=\"text-sub mb-2\">{{groupData?.count || 0}} total groups</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n @if (groups.length) {\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" class=\"form-control ps-14 me-2\"\r\n name=\"search\" autocomplete=\"off\" placeholder=\"Search\" autocomplete=\"off\" />\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Create Group</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!loading && groups.length\" class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-4\" *ngFor=\"let obj of groups\">\r\n <div class=\"border-val mb-7 py-7\">\r\n <div class=\"d-flex justify-content-between\">\r\n <span><a class=\"role-title my-2 cursor-pointer\" (click)=\"groupsDetials(obj)\">{{obj.groupName ||\r\n 'NA'}}</a></span>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"px-5 cursor-pointer\" (click)=\"createGroup('view',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M0.833496 9.99999C0.833496 9.99999 4.16683 3.33333 10.0002 3.33333C15.8335 3.33333 19.1668 9.99999 19.1668 9.99999C19.1668 9.99999 15.8335 16.6667 10.0002 16.6667C4.16683 16.6667 0.833496 9.99999 0.833496 9.99999Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M10.0002 12.5C11.3809 12.5 12.5002 11.3807 12.5002 9.99999C12.5002 8.61928 11.3809 7.49999 10.0002 7.49999C8.61945 7.49999 7.50016 8.61928 7.50016 9.99999C7.50016 11.3807 8.61945 12.5 10.0002 12.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n @if ((gs.userAccess | async)?.manage_stores_isDelete) {\r\n <span class=\"cursor-pointer\" (click)=\"deleteGroups('delete',obj)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n d=\"M2.5 5.00001H4.16667M4.16667 5.00001H17.5M4.16667 5.00001V16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667V5.00001H4.16667ZM6.66667 5.00001V3.33334C6.66667 2.89131 6.84226 2.46739 7.15482 2.15483C7.46738 1.84227 7.89131 1.66667 8.33333 1.66667H11.6667C12.1087 1.66667 12.5326 1.84227 12.8452 2.15483C13.1577 2.46739 13.3333 2.89131 13.3333 3.33334V5.00001M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"sub-title fw-semibold my-5\">{{obj.description || 'NA'}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\"\r\n stroke=\"#667085\" stroke-width=\"1.5\" />\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.storeCount || '--'}} Stores</span>\r\n </div>\r\n <div><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"24\"\r\n viewBox=\"0 0 25 24\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1973_14308)\">\r\n <path\r\n d=\"M17.5 21V19C17.5 17.9391 17.0786 16.9217 16.3284 16.1716C15.5783 15.4214 14.5609 15 13.5 15H5.5C4.43913 15 3.42172 15.4214 2.67157 16.1716C1.92143 16.9217 1.5 17.9391 1.5 19V21M23.5 21V19C23.4993 18.1137 23.2044 17.2528 22.6614 16.5523C22.1184 15.8519 21.3581 15.3516 20.5 15.13M16.5 3.13C17.3604 3.3503 18.123 3.8507 18.6676 4.55231C19.2122 5.25392 19.5078 6.11683 19.5078 7.005C19.5078 7.89317 19.2122 8.75608 18.6676 9.45769C18.123 10.1593 17.3604 10.6597 16.5 10.88M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1973_14308\">\r\n <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n <span class=\"uses-list fw-semibold\">{{obj?.userCount || '--'}} Members</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n <ng-container *ngIf=\"loading && !groups.length\" >\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n <!-- No group Illustration -->\r\n <div *ngIf=\"!loading && !groups?.length\" class=\"d-flex justify-content-center my-20 w-100\">\r\n <div class=\"w-350px d-grid align-items-center text-center\">\r\n <img class=\"mx-auto\" src=\"./assets/tango/Images/storesIllustration.png\" alt=\"\">\r\n\r\n <span class=\"illustcontent\"> Start by creating a group</span>\r\n <span class=\"text-sub\">You can view all your groups here</span>\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button (click)=\"createGroup('add')\" class=\"btn btn-primary w-100 mt-10\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M9.99984 4.16675V15.8334M4.1665 10.0001H15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> \r\n Create Group\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- <lib-group-details></lib-group-details> -->", styles: [".title{color:var(--Gray-900, #101828);font-size:20px;line-height:30px}.sub-title{color:var(--Gray-500, #667085)!important;font-size:14px!important;line-height:20px!important}.border-val{padding:16px;border-radius:12px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;box-shadow:0 0 20px #4c577d05}.role-title,.role-title:hover{color:var(--Primary-600, #00A3FF);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline!important}.col-md-4{width:31%!important}.user-list{color:var(--Gray-700, #344054);font-size:16px;line-height:24px}.dropdown1{position:absolute;top:70px;right:14.5%;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown{position:relative;display:inline-block}.dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003}.dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown button{padding:10px;font-size:16px;cursor:pointer}input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}\n"] }]
701
755
  }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: GroupService }, { type: i0.ChangeDetectorRef }, { type: i1$1.GlobalStateService }], propDecorators: { dataEvent: [{
702
756
  type: Output
703
757
  }] } });
704
758
 
705
759
  class FiltersComponent {
706
760
  storesService;
761
+ cd;
707
762
  dataObject;
708
763
  AppliedFilters = new EventEmitter();
709
764
  Opendropdown = false;
@@ -717,17 +772,9 @@ class FiltersComponent {
717
772
  cityIndex;
718
773
  stateIndex;
719
774
  countryIndex;
720
- constructor(storesService) {
775
+ constructor(storesService, cd) {
721
776
  this.storesService = storesService;
722
- }
723
- ngOnChanges(changes) {
724
- if (changes.dataObject && changes.dataObject.currentValue) {
725
- this.backUpArray = JSON.parse(JSON.stringify(this.dataObject));
726
- this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
727
- this.dataObject.forEach((item, index) => {
728
- this.selectedValuesArray[index] = item.selected.map((x) => x.text);
729
- });
730
- }
777
+ this.cd = cd;
731
778
  }
732
779
  onClick(event) {
733
780
  const target = event.target;
@@ -749,6 +796,18 @@ class FiltersComponent {
749
796
  }
750
797
  opendropdown(e) {
751
798
  e.stopPropagation();
799
+ this.dataObject.forEach((item, index) => {
800
+ this.selectedValuesArray[index] = item.selected.map((x) => x.text);
801
+ item.Issues.forEach((el) => {
802
+ const isChecked = item.selected.includes(item.text);
803
+ const checkboxId = `option${item.text}`;
804
+ const checkboxElement = document.getElementById(checkboxId);
805
+ if (checkboxElement) {
806
+ checkboxElement.checked = isChecked;
807
+ }
808
+ });
809
+ });
810
+ this.cd.detectChanges();
752
811
  this.Opendropdown = !this.Opendropdown;
753
812
  }
754
813
  Dropdown(value, index, event) {
@@ -907,7 +966,6 @@ class FiltersComponent {
907
966
  this.backUpArray.forEach((item, index) => {
908
967
  this.backUpArray[index].selected = [];
909
968
  });
910
- this.Opendropdown = false;
911
969
  }
912
970
  searchData(event, i) {
913
971
  const filteredIssues = this.backUpArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.text));
@@ -942,13 +1000,13 @@ class FiltersComponent {
942
1000
  });
943
1001
  this.AppliedFilters.emit(this.responseArray);
944
1002
  }
945
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: StoresService }], target: i0.ɵɵFactoryTarget.Component });
946
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters-custom", inputs: { dataObject: "dataObject" }, outputs: { AppliedFilters: "AppliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n @if(item.multiDropdown) {\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckboxs('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckboxs(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n </div>\r\n } @else {\r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" > No filters available</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1003
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: StoresService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1004
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters-custom", inputs: { dataObject: "dataObject" }, outputs: { AppliedFilters: "AppliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n @if(item.multiDropdown) {\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckboxs('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckboxs(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n </div>\r\n } @else {\r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" > No filters available</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
947
1005
  }
948
1006
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
949
1007
  type: Component,
950
1008
  args: [{ selector: "lib-filters-custom", template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\" \r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n \r\n <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n <span class=\"dropdown-title\">Filter Options</span>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n @if(item.multiDropdown) {\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckboxs('Select All', i)\">\r\n <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckboxs(issue.text,i)\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"!item.Issues && !item.Issues.length\"> No filters available</span>\r\n </div>\r\n } @else {\r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index;\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n (change)=\"toggleCheckbox(issue.text,i);countrySelection(issue,i);stateSelection(issue,i);\">\r\n <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div *ngIf=\"!item.Issues.length\" class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" > No filters available</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:50px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
951
- }], ctorParameters: () => [{ type: StoresService }], propDecorators: { dataObject: [{
1009
+ }], ctorParameters: () => [{ type: StoresService }, { type: i0.ChangeDetectorRef }], propDecorators: { dataObject: [{
952
1010
  type: Input
953
1011
  }], AppliedFilters: [{
954
1012
  type: Output
@@ -1127,23 +1185,14 @@ class GroupDetailsComponent {
1127
1185
  this.storeList_req = {
1128
1186
  fromDate: this.$headerFilters.date?.startDate
1129
1187
  ? this.$headerFilters.date.startDate
1130
- .split("-")
1131
- .reverse()
1132
- .join("-")
1133
1188
  : new Date()
1134
1189
  .toISOString()
1135
- .split("T")[0]
1136
- .split("-")
1137
- .reverse()
1138
- .join("-"),
1190
+ .split("T")[0],
1139
1191
  toDate: this.$headerFilters.date?.endDate
1140
- ? this.$headerFilters.date.endDate.split("-").reverse().join("-")
1192
+ ? this.$headerFilters.date.endDate
1141
1193
  : new Date()
1142
1194
  .toISOString()
1143
- .split("T")[0]
1144
- .split("-")
1145
- .reverse()
1146
- .join("-"),
1195
+ .split("T")[0],
1147
1196
  clientId: [this.$headerFilters.client],
1148
1197
  offset: 1,
1149
1198
  limit: 10,
@@ -1298,8 +1347,10 @@ class GroupDetailsComponent {
1298
1347
  this.loadTable();
1299
1348
  }
1300
1349
  onPageSizeChange(pageSize) {
1301
- this.storeList_req.limit = pageSize;
1302
- this.pagination.limit = pageSize;
1350
+ this.storeList_req.limit = Number(pageSize);
1351
+ this.pagination.limit = Number(pageSize);
1352
+ this.storeList_req.offset = 1;
1353
+ this.pagination.offset = 1;
1303
1354
  this.loadTable();
1304
1355
  }
1305
1356
  isLinkActive(link) {
@@ -1347,7 +1398,7 @@ class GroupDetailsComponent {
1347
1398
  }
1348
1399
  deactivateStore(store) { }
1349
1400
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GroupDetailsComponent, deps: [{ token: i1$1.PageInfoService }, { token: StoresService }, { token: i0.ChangeDetectorRef }, { token: GroupService }, { token: ExcelService }, { token: i1$1.GlobalStateService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
1350
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: GroupDetailsComponent, selector: "lib-group-details", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex justify-content-left align-items-center\">\r\n <div class=\"backArrow d-flex justify-content-center align-items-center me-5 ml-0\">\r\n <button (click)=\"backToGroup()\"\r\n class=\"btn btn-default mx-2 btn-outline-default rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label\">{{group?.groupName}}</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} stores in this group</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\"\r\n (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n @if ((gs.userAccess | async)?.manage_stores_isDownload) { \r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\"> \r\n <div class=\"table-title\">\r\n <span class=\"txt-light-primary\"> \r\n {{store?.storeName}}\r\n </span>\r\n </div>\r\n <div class=\"table-sub storeId\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n {{store?.progress ? store?.progress : 20}}%\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div class=\"bg-success rounded h-5px\" role=\"progressbar\" [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city) {\r\n <div class=\"table-sub\">{{store?.city}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.country && store?.state) {\r\n <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\"> \r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{store?.spocEmail.slice(0,2) | uppercase }} \r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"ms-2\">\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"fw-semibold\">{{store?.downTime}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{store?.status || 'NA'}}</span></td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n </td>\r\n <td>\r\n <button type=\"button\" (click)=\"goToEdgeApp(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\"\r\n type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" (click)=\"deactivateStore(store)\"\r\n type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading && !noData\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.options-class{border:none;background-color:transparent}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.profile{color:var(--Primary-600, #00A3FF);padding:6px;font-size:14px;font-weight:500;line-height:20px;border-radius:200px;background:var(--Primary-50, #EAF8FF);width:32px;height:32px}.backArrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.img-src{width:25%;height:20%}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.UpperCasePipe, name: "uppercase" }] });
1401
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: GroupDetailsComponent, selector: "lib-group-details", outputs: { dataEvent: "dataEvent" }, ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <div class=\"d-flex justify-content-left align-items-center\">\r\n <div class=\"backArrow d-flex justify-content-center align-items-center me-5 ml-0\">\r\n <button (click)=\"backToGroup()\"\r\n class=\"btn btn-default mx-2 btn-outline-default rounded-3 text-nowrap\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <path d=\"M16.3333 9.99996H4.66663M4.66663 9.99996L10.5 15.8333M4.66663 9.99996L10.5 4.16663\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label\">{{group?.groupName}}</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} stores in this group</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\"\r\n (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n @if ((gs.userAccess | async)?.manage_stores_isDownload) { \r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">Export</span> </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"!loading && !noData\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\"> \r\n <div class=\"table-title\">\r\n <span class=\"txt-light-primary\"> \r\n {{store?.storeName}}\r\n </span>\r\n </div>\r\n <div class=\"table-sub storeId\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n {{store?.progress ? store?.progress : 20}}%\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div class=\"bg-success rounded h-5px\" role=\"progressbar\" [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city) {\r\n <div class=\"table-sub\">{{store?.city}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.country && store?.state) {\r\n <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\"> \r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{store?.spocEmail.slice(0,2) | uppercase }} \r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"ms-2\">\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"fw-semibold\">{{store?.downTime}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{store?.status || 'NA'}}</span></td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n </td>\r\n <td>\r\n <button type=\"button\" (click)=\"goToEdgeApp(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\"\r\n type=\"button\">Edit Store</button></li>\r\n <li><button class=\"dropdown-item\" (click)=\"deactivateStore(store)\"\r\n type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"paginationSize()\"\r\n (pageChange)=\"onPageChange($event)\" (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n <ng-container *ngIf=\"loading && !noData\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>", styles: [".activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.options-class{border:none;background-color:transparent}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.profile{color:var(--Primary-600, #00A3FF);padding:6px;font-size:14px;font-weight:500;line-height:20px;border-radius:200px;background:var(--Primary-50, #EAF8FF);width:32px;height:32px}.backArrow{width:44px;height:44px;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d}.img-src{width:25%;height:20%}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }] });
1351
1402
  }
1352
1403
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GroupDetailsComponent, decorators: [{
1353
1404
  type: Component,
@@ -1363,6 +1414,7 @@ class TangoManageStoresComponent {
1363
1414
  excelService;
1364
1415
  gs;
1365
1416
  router;
1417
+ ts;
1366
1418
  // Table
1367
1419
  filterOptions;
1368
1420
  searchValue;
@@ -1382,13 +1434,14 @@ class TangoManageStoresComponent {
1382
1434
  searchInput = new FormControl("");
1383
1435
  detach = new Subject();
1384
1436
  user;
1385
- constructor(pageInfo, storesService, changeDetector, excelService, gs, router) {
1437
+ constructor(pageInfo, storesService, changeDetector, excelService, gs, router, ts) {
1386
1438
  this.pageInfo = pageInfo;
1387
1439
  this.storesService = storesService;
1388
1440
  this.changeDetector = changeDetector;
1389
1441
  this.excelService = excelService;
1390
1442
  this.gs = gs;
1391
1443
  this.router = router;
1444
+ this.ts = ts;
1392
1445
  this.initSearch();
1393
1446
  }
1394
1447
  initSearch() {
@@ -1514,30 +1567,21 @@ class TangoManageStoresComponent {
1514
1567
  this.$headerFilters = data;
1515
1568
  this.getCountries();
1516
1569
  this.storeList_req = {
1517
- fromDate: this.$headerFilters.date?.startDate
1518
- ? this.$headerFilters.date.startDate
1519
- .split("-")
1520
- .reverse()
1521
- .join("-")
1522
- : new Date()
1523
- .toISOString()
1524
- .split("T")[0]
1525
- .split("-")
1526
- .reverse()
1527
- .join("-"),
1528
- toDate: this.$headerFilters.date?.endDate
1529
- ? this.$headerFilters.date.endDate.split("-").reverse().join("-")
1530
- : new Date()
1531
- .toISOString()
1532
- .split("T")[0]
1533
- .split("-")
1534
- .reverse()
1535
- .join("-"),
1570
+ // fromDate: this.$headerFilters.date?.startDate
1571
+ // ? this.$headerFilters.date.startDate
1572
+ // : new Date()
1573
+ // .toISOString()
1574
+ // .split("T")[0],
1575
+ // toDate: this.$headerFilters.date?.endDate
1576
+ // ? this.$headerFilters.date.endDate
1577
+ // : new Date()
1578
+ // .toISOString()
1579
+ // .split("T")[0],
1536
1580
  clientId: [this.$headerFilters.client],
1537
1581
  offset: 1,
1538
1582
  limit: 10,
1539
1583
  sortColumName: "storeId",
1540
- sortBy: 1,
1584
+ sortBy: -1,
1541
1585
  searchValue: "",
1542
1586
  export: false,
1543
1587
  };
@@ -1667,14 +1711,22 @@ class TangoManageStoresComponent {
1667
1711
  });
1668
1712
  }
1669
1713
  exportXLSX() {
1714
+ let limit = this.storeList_req.limit;
1670
1715
  this.storeList_req.offset = 1;
1671
1716
  this.storeList_req.limit = 10000;
1672
1717
  this.storeList_req.export = true;
1673
- this.storesService.getStoreListExport(this.storeList_req).subscribe((res) => {
1674
- if (res) {
1675
- this.excelService.saveAsExcelFile(res, "storesList");
1676
- }
1718
+ this.storesService.getStoreListExport(this.storeList_req).subscribe({
1719
+ next: (res) => {
1720
+ if (res) {
1721
+ this.excelService.saveAsExcelFile(res, "storesList");
1722
+ }
1723
+ else {
1724
+ }
1725
+ },
1726
+ error: () => { },
1677
1727
  });
1728
+ this.storeList_req.limit = limit;
1729
+ this.storeList_req.export = false;
1678
1730
  }
1679
1731
  navigateToStore(storeId) {
1680
1732
  let data = JSON.parse(localStorage.getItem("header-filters") || "");
@@ -1685,13 +1737,15 @@ class TangoManageStoresComponent {
1685
1737
  });
1686
1738
  }
1687
1739
  onPageChange(pageOffset) {
1688
- this.storeList_req.offset = pageOffset;
1689
- this.pagination.offset = pageOffset;
1740
+ this.storeList_req.offset = Number(pageOffset);
1741
+ this.pagination.offset = Number(pageOffset);
1690
1742
  this.loadTable();
1691
1743
  }
1692
1744
  onPageSizeChange(pageSize) {
1693
- this.storeList_req.limit = pageSize;
1694
- this.pagination.limit = pageSize;
1745
+ this.storeList_req.limit = Number(pageSize);
1746
+ this.pagination.limit = Number(pageSize);
1747
+ this.storeList_req.offset = 1;
1748
+ this.pagination.offset = 1;
1695
1749
  this.loadTable();
1696
1750
  }
1697
1751
  isLinkActive(link) {
@@ -1754,14 +1808,30 @@ class TangoManageStoresComponent {
1754
1808
  localStorage.setItem("header-filters", JSON.stringify(data));
1755
1809
  this.router.navigate([`/manage/stores/infra-ticket`], { queryParams: { storeId: store.storeId } });
1756
1810
  }
1757
- deactivateStore(store) { }
1758
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, deps: [{ token: i1$1.PageInfoService }, { token: StoresService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i1$1.GlobalStateService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
1759
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageStoresComponent, selector: "lib-tango-manage-stores", ngImport: i0, template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Add Store</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n @if(!loading && !noData) {\r\n <ng-container>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n <div class=\"table-title\">\r\n <span class=\"txt-light-primary\">\r\n {{store?.storeName}}\r\n </span>\r\n </div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n {{store?.progress ? store?.progress : 20}}%\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city) {\r\n <div class=\"table-sub\">{{store?.city}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.country && store?.state) {\r\n <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{store?.spocEmail.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"ms-2\">\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"fw-semibold\">{{store?.downTime}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{store?.status || 'NA'}}</span></td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n </td>\r\n <td> \r\n <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button> \r\n <!-- @if (store.status!=='Live') {\r\n <button type=\"button\" disabled=\"true\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button>\r\n } -->\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType == 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Pair</span>\r\n </button>\r\n <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType == 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>infra</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n Store</button></li>\r\n <li><button class=\"dropdown-item\" (click)=\"deactivateStore(store)\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n }\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n } @else if (loading && !noData) {\r\n <ng-container>\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n } @else if (noData && !loading) {\r\n <ng-container>\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: ["dataEvent"] }, { kind: "component", type: GroupDetailsComponent, selector: "lib-group-details", outputs: ["dataEvent"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.UpperCasePipe, name: "uppercase" }] });
1811
+ updateStoreStatus(store) {
1812
+ this.storesService.updateStore(store.storeId, { status: store.status, storeName: store.storeName, clientId: this.$headerFilters.client }).pipe(takeUntil(this.detach)).subscribe({
1813
+ next: (res) => {
1814
+ if (res && res.code === 200 && res.status === "success") {
1815
+ this.ts.getSuccessToast("Store Status Updated Successfully!");
1816
+ this.loadTable();
1817
+ }
1818
+ else {
1819
+ this.ts.getErrorToast("Unable to update Store Status!");
1820
+ }
1821
+ },
1822
+ error: () => {
1823
+ this.ts.getErrorToast("Unable to update Store Status!");
1824
+ },
1825
+ complete: () => { },
1826
+ });
1827
+ }
1828
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, deps: [{ token: i1$1.PageInfoService }, { token: StoresService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i1$1.GlobalStateService }, { token: i4.Router }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
1829
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: TangoManageStoresComponent, selector: "lib-tango-manage-stores", ngImport: i0, template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Add Store</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n @if(!loading && !noData) {\r\n <ng-container>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n <div class=\"table-title\">\r\n <span class=\"txt-light-primary\">\r\n {{store?.storeName}}\r\n </span>\r\n </div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n {{store?.progress ? store?.progress : 20}}%\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city) {\r\n <div class=\"table-sub\">{{store?.city}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.country && store?.state) {\r\n <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{store?.spocEmail.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"ms-2\">\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"fw-semibold\">{{store?.downTime}}</td>\r\n <td><span class=\"badge badge-light-primary\">\r\n @if(store?.status=='onboareded') {\r\n Onboarded\r\n } @else if (store.status==='installationfailed') {\r\n Installation Failed\r\n } @else {\r\n {{store?.status | titlecase}}\r\n }\r\n </span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n </td>\r\n <td> \r\n <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button> \r\n <!-- @if (store.status!=='Live') {\r\n <button type=\"button\" disabled=\"true\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button>\r\n } -->\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType === 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Pair</span>\r\n </button>\r\n <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType === 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>infra</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n Store</button></li>\r\n @if(store?.status != 'active') {\r\n <li><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store)\" type=\"button\">Deactivate</button></li>\r\n } @else {\r\n <li><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store)\" type=\"button\">Activate</button></li>\r\n }\r\n </ul>\r\n </span>\r\n }\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n } @else if (loading && !noData) {\r\n <ng-container>\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n } @else if (noData && !loading) {\r\n <ng-container>\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TangoManageGroupsComponent, selector: "lib-tango-manage-groups", outputs: ["dataEvent"] }, { kind: "component", type: GroupDetailsComponent, selector: "lib-group-details", outputs: ["dataEvent"] }, { kind: "component", type: FiltersComponent, selector: "lib-filters-custom", inputs: ["dataObject"], outputs: ["AppliedFilters"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }] });
1760
1830
  }
1761
1831
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoManageStoresComponent, decorators: [{
1762
1832
  type: Component,
1763
- args: [{ selector: "lib-tango-manage-stores", template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Add Store</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n @if(!loading && !noData) {\r\n <ng-container>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n <div class=\"table-title\">\r\n <span class=\"txt-light-primary\">\r\n {{store?.storeName}}\r\n </span>\r\n </div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n {{store?.progress ? store?.progress : 20}}%\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city) {\r\n <div class=\"table-sub\">{{store?.city}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.country && store?.state) {\r\n <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{store?.spocEmail.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"ms-2\">\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"fw-semibold\">{{store?.downTime}}</td>\r\n <td><span class=\"badge badge-light-primary\">{{store?.status || 'NA'}}</span></td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n </td>\r\n <td> \r\n <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button> \r\n <!-- @if (store.status!=='Live') {\r\n <button type=\"button\" disabled=\"true\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button>\r\n } -->\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType == 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Pair</span>\r\n </button>\r\n <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType == 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>infra</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n Store</button></li>\r\n <li><button class=\"dropdown-item\" (click)=\"deactivateStore(store)\" type=\"button\">Deactivate</button></li>\r\n </ul>\r\n </span>\r\n }\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n } @else if (loading && !noData) {\r\n <ng-container>\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n } @else if (noData && !loading) {\r\n <ng-container>\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}\n"] }]
1764
- }], ctorParameters: () => [{ type: i1$1.PageInfoService }, { type: StoresService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i1$1.GlobalStateService }, { type: i4.Router }] });
1833
+ args: [{ selector: "lib-tango-manage-stores", template: "<div class=\"card mb-5\">\r\n <div class=\"card-body pt-2 pb-1\">\r\n <div class=\"d-flex overflow-auto mb-2\">\r\n <ul\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs-2x justify-content-center align-items-center border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('stores')\">\r\n <a [ngClass]=\"receivedData === 'stores'?'btn activebtn':''\" class=\"fw-semibold nav-link me-6\">\r\n Stores\r\n </a>\r\n </li>\r\n <li class=\"nav-item cursor-pointer\" (click)=\"Selecttabs('groups')\">\r\n <a [ngClass]=\"receivedData === 'groups' || receivedData === 'Group Details Value'? 'btn activebtn':''\"\r\n class=\"nav-link me-6\">Groups\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"\" *ngIf=\"receivedData === 'stores'\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Stores</span>\r\n <span class=\"text-sub mb-2\">{{ pagination.totalCount ? pagination.totalCount : '--'}} total\r\n stores</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n <path\r\n d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [formControl]=\"searchInput\" class=\"form-control ps-14 me-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n <!-- filter Start -->\r\n <lib-filters-custom [dataObject]=\"filterOptions\" (AppliedFilters)=\"applyFilter($event)\"></lib-filters-custom>\r\n <!-- filter End -->\r\n @if ((gs.userAccess | async)?.manage_stores_isDownload) {\r\n <button type=\"button\" (click)=\"exportXLSX()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Export</span>\r\n </button>\r\n }\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button routerLink=\"/manage/stores/addition-method\" type=\"button\" class=\"btn btn-primary mx-2 rounded-3 text-nowrap\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2 text-white\">Add Store</span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n @if(!loading && !noData) {\r\n <ng-container>\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap\">\r\n <thead class=\"cursor-pointer\">\r\n <tr>\r\n <!-- <th>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </th> -->\r\n <th (click)=\"onSort('storeId')\">Store Info\r\n <span *ngIf=\"colDirection('storeId')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('storeId')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('city')\">Location\r\n <span *ngIf=\"colDirection('city')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('city')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </th>\r\n <th (click)=\"onSort('spocContact')\">SPOC Contact <span>\r\n <span *ngIf=\"colDirection('spocContact')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('spocContact')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('downTime')\">Downtime <span>\r\n <span *ngIf=\"colDirection('downTime')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('downTime')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('status')\">Status <span>\r\n <span *ngIf=\"colDirection('status')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('status')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th (click)=\"onSort('statusDetail')\">Status Detail <span>\r\n <span *ngIf=\"colDirection('statusDetail')===-1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"colDirection('statusDetail')===1\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004\"\r\n stroke=\"#667085\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </span> </th>\r\n <th>Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <ng-container *ngFor=\"let store of storeList;let i=index;\">\r\n <tr>\r\n <!-- <td>\r\n <form class=\"form\">\r\n <div class=\"form-group\">\r\n <div class=\"checkbox-inline\">\r\n <label class=\"checkbox\">\r\n <input type=\"checkbox\" checked=\"checked\" name=\"Checkboxes1\">\r\n </label>\r\n </div>\r\n </div>\r\n </form>\r\n </td> -->\r\n <td class=\"cursor-pointer\" (click)=\"navigateToStore(store?.storeId);\">\r\n <div class=\"table-title\">\r\n <span class=\"txt-light-primary\">\r\n {{store?.storeName}}\r\n </span>\r\n </div>\r\n <div class=\"table-sub\">ID : {{store?.storeId}}\r\n <span class=\"my-1 mx-1\">\r\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg>\r\n {{store?.progress ? store?.progress : 20}}%\r\n <div class=\"h-5px w-100 bg-light mt-2\">\r\n <div class=\"bg-success rounded h-5px\" role=\"progressbar\"\r\n [ngStyle]=\"{ width: (store?.progress ? store?.progress : 20) + '%' }\"\r\n aria-valuemin=\"20\" aria-valuemax=\"100\"></div>\r\n </div>\r\n </span>\r\n </div>\r\n </td>\r\n <td class=\"w-200px\">\r\n @if (store?.city) {\r\n <div class=\"table-sub\">{{store?.city}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n @if (store?.country && store?.state) {\r\n <div class=\"table-sub\">{{store?.state}},{{store?.country}}</div>\r\n } @else {\r\n <div class=\"table-sub\">NA</div>\r\n }\r\n </td>\r\n <td>\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px symbol-circle\">\r\n <span class=\"symbol-label badge-light-primary text-symbol\">\r\n <span class=\"text-primary fs-4 badge badge-light-primary fw-normal\">\r\n {{store?.spocEmail.slice(0,2) | uppercase }}\r\n </span>\r\n </span>\r\n </div>\r\n <div class=\"ms-2\">\r\n <div class=\"table-title\">{{store?.spocEmail || 'NA'}}</div>\r\n <div class=\"table-sub\">{{store?.spocContact || 'NA'}}</div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"fw-semibold\">{{store?.downTime}}</td>\r\n <td><span class=\"badge badge-light-primary\">\r\n @if(store?.status=='onboareded') {\r\n Onboarded\r\n } @else if (store.status==='installationfailed') {\r\n Installation Failed\r\n } @else {\r\n {{store?.status | titlecase}}\r\n }\r\n </span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{store?.statusDetail || 'NA'}}</div>\r\n <!-- <div class=\"table-sub\">Pending from Client</div> -->\r\n </td>\r\n <td> \r\n <button *ngIf=\"store.status==='Live'\" type=\"button\" (click)=\"goToStore(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button> \r\n <!-- @if (store.status!=='Live') {\r\n <button type=\"button\" disabled=\"true\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>View</span>\r\n </button>\r\n } -->\r\n @if ((gs.userAccess | async)?.manage_stores_isEdit) {\r\n <button *ngIf=\"store.status==='onboareded'\" type=\"button\" (click)=\"goToEdgeApp(store)\" [disabled]=\"user.userType === 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Pair</span>\r\n </button>\r\n <button *ngIf=\"store.status==='paired'|| store.status==='installationfailed'\" type=\"button\"\r\n (click)=\"goToEdgeAppconfig(store)\" [disabled]=\"user.userType === 'tango'\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>Config</span>\r\n </button>\r\n <button *ngIf=\"store.status==='Infra Issue'\" type=\"button\" (click)=\"goToStoreInfra(store)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span>infra</span>\r\n </button>\r\n <span class=\"dropdown\">\r\n <button class=\"options-class\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M18.0001 18.8334C18.4603 18.8334 18.8334 18.4603 18.8334 18C18.8334 17.5398 18.4603 17.1667 18.0001 17.1667C17.5398 17.1667 17.1667 17.5398 17.1667 18C17.1667 18.4603 17.5398 18.8334 18.0001 18.8334Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 13C18.4603 13 18.8334 12.6269 18.8334 12.1667C18.8334 11.7065 18.4603 11.3334 18.0001 11.3334C17.5398 11.3334 17.1667 11.7065 17.1667 12.1667C17.1667 12.6269 17.5398 13 18.0001 13Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.0001 24.6667C18.4603 24.6667 18.8334 24.2936 18.8334 23.8334C18.8334 23.3731 18.4603 23 18.0001 23C17.5398 23 17.1667 23.3731 17.1667 23.8334C17.1667 24.2936 17.5398 24.6667 18.0001 24.6667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n <ul class=\"dropdown-menu\">\r\n <li (click)=\"navigateToStore(store?.storeId);\"><button class=\"dropdown-item\" type=\"button\">Edit\r\n Store</button></li>\r\n @if(store?.status != 'active') {\r\n <li><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store)\" type=\"button\">Deactivate</button></li>\r\n } @else {\r\n <li><button class=\"dropdown-item\" (click)=\"updateStoreStatus(store)\" type=\"button\">Activate</button></li>\r\n }\r\n </ul>\r\n </span>\r\n }\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n <lib-pagination [itemsPerPage]=\"pagination.limit\" [currentPage]=\"pagination.offset\"\r\n [totalItems]=\"pagination.totalCount\" [paginationSizes]=\"paginationSizes\"\r\n [pageSize]=\"paginationSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </ng-container>\r\n } @else if (loading && !noData) {\r\n <ng-container>\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n </ng-container>\r\n } @else if (noData && !loading) {\r\n <ng-container>\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"receivedData === 'groups'\">\r\n <lib-tango-manage-groups (dataEvent)=\"receiveGroupData($event)\"></lib-tango-manage-groups>\r\n <!-- <lib-group-details *ngIf=\"\"></lib-group-details> -->\r\n <!-- <router-outlet></router-outlet> -->\r\n</div>\r\n\r\n\r\n<!--begin::Row-->\r\n<div *ngIf=\"receivedData ==='Group Details Value'\" class=\"row gx-5 gx-xl-10\">\r\n <!--begin::Col-->\r\n <div class=\"col-xxl-12 col-md-12 col-xl-12 col-lg-12\">\r\n <lib-group-details (dataEvent)=\"receiveGroupData($event)\"></lib-group-details>\r\n </div>\r\n <!--end::Col-->\r\n</div>\r\n<!--end::Row-->", styles: [".text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.form-control{color:var(--Gray-500, #667085)!important;font-size:14.56px!important;font-weight:400!important;line-height:21.84px!important;border-radius:7.28px!important;border:.91px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 .91px 1.82px #1018280d!important}.illustcontent{color:var(--Gray-900, #101828);font-size:16px;font-weight:600}.nav-item .nav-link{color:var(--Gray-500, #667085);font-size:16px;font-weight:500}.activebtn{color:var(--Primary-700, #009BF3)!important;border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;font-size:16px!important;font-weight:500!important}.img-src{width:25%;height:50%}.options-class{border:none;background-color:transparent}.txt-light-primary{color:#009bf3!important}.progressbar-value{color:var(--gray-500, #667085);font-size:12px!important;font-weight:400!important}\n"] }]
1834
+ }], ctorParameters: () => [{ type: i1$1.PageInfoService }, { type: StoresService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i1$1.GlobalStateService }, { type: i4.Router }, { type: i3.ToastService }] });
1765
1835
 
1766
1836
  class AddStoresComponent {
1767
1837
  storeService;
@@ -1813,8 +1883,8 @@ class AddStoresComponent {
1813
1883
  // errMsgs.push(
1814
1884
  // this.validateField(data[i].CameraCount, "camera count", i)
1815
1885
  // );
1816
- errMsgs.push(this.validateField(data[i].Latitude, "latitude", i));
1817
- errMsgs.push(this.validateField(data[i].Longitude, "longitude", i));
1886
+ // errMsgs.push(this.validateField(data[i].Latitude, "latitude", i));
1887
+ // errMsgs.push(this.validateField(data[i].Longitude, "longitude", i));
1818
1888
  errMsgs = errMsgs.filter((x) => x != null);
1819
1889
  if (errMsgs.length > 0) {
1820
1890
  let errors = errMsgs.join("<br>");
@@ -1832,6 +1902,12 @@ class AddStoresComponent {
1832
1902
  }).then((result) => { });
1833
1903
  return;
1834
1904
  }
1905
+ if (!data[i].Latitude) {
1906
+ data[i].Latitude = '0';
1907
+ }
1908
+ if (!data[i].Longitude) {
1909
+ data[i].Longitude = '0';
1910
+ }
1835
1911
  const promise = this.storeService
1836
1912
  .getAddress(Number(data[i].Latitude), Number(data[i].Longitude))
1837
1913
  .then((placeData) => {
@@ -1842,30 +1918,32 @@ class AddStoresComponent {
1842
1918
  city: "",
1843
1919
  pincode: "",
1844
1920
  };
1845
- for (const component of placeData.address_components) {
1846
- const types = component.types;
1847
- if (types.includes("locality")) {
1848
- storeProfile.city = component.long_name;
1849
- }
1850
- else if (types.includes("administrative_area_level_1")) {
1851
- storeProfile.state = component.long_name;
1852
- }
1853
- else if (types.includes("country")) {
1854
- storeProfile.country = component.long_name;
1855
- }
1856
- else if (types.includes("postal_code")) {
1857
- storeProfile.pincode = component.long_name;
1858
- }
1859
- else if (types.includes("premise") ||
1860
- types.includes("sublocality_level_2") ||
1861
- types.includes("sublocality_level_1")) {
1862
- if (component.long_name) {
1863
- storeProfile.address += component.long_name + ",";
1921
+ if (placeData.address_components) {
1922
+ for (const component of placeData.address_components) {
1923
+ const types = component.types;
1924
+ if (types.includes("locality")) {
1925
+ storeProfile.city = component.long_name;
1926
+ }
1927
+ else if (types.includes("administrative_area_level_1")) {
1928
+ storeProfile.state = component.long_name;
1929
+ }
1930
+ else if (types.includes("country")) {
1931
+ storeProfile.country = component.long_name;
1932
+ }
1933
+ else if (types.includes("postal_code")) {
1934
+ storeProfile.pincode = component.long_name;
1935
+ }
1936
+ else if (types.includes("premise") ||
1937
+ types.includes("sublocality_level_2") ||
1938
+ types.includes("sublocality_level_1")) {
1939
+ if (component.long_name) {
1940
+ storeProfile.address += component.long_name + ",";
1941
+ }
1864
1942
  }
1865
1943
  }
1866
- }
1867
- if (storeProfile.address) {
1868
- storeProfile.address = storeProfile.address.slice(0, -1);
1944
+ if (storeProfile.address) {
1945
+ storeProfile.address = storeProfile.address.slice(0, -1);
1946
+ }
1869
1947
  }
1870
1948
  data[i]["storeProfile"] = storeProfile;
1871
1949
  processedArray.push({
@@ -2203,11 +2281,11 @@ class AddStoresFormComponent {
2203
2281
  this.timezones = moment.tz.names();
2204
2282
  }
2205
2283
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddStoresFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: StoresService }, { token: i3.ToastService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
2206
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddStoresFormComponent, selector: "lib-add-stores-form", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3 mb-6\">\r\n <div class=\"col-md-3 col-lg-3 col-xl-3 col-xxl-3\" id=\"left-container\">\r\n <div class=\"card card-flush h-100 mb-0\">\r\n <!--begin::Aside content-->\r\n <div class=\"card-body\">\r\n <div\r\n class=\"menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary\">\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'store_info' }\"\r\n (click)=\"settingvalue('store_info')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path stroke=\"currentColor\"\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Store Info</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'config' }\"\r\n (click)=\"settingvalue('config')\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1017_22270)\">\r\n <path\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1017_22270\">\r\n <rect width=\"24\" height=\"24\" fill=\"currentColor\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"menu-title fw-bold \">Store Configuration</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n\r\n <!--end::Menu item-->\r\n\r\n\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Draft-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'contact' }\"\r\n (click)=\"settingvalue('contact')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Contact Details</span>\r\n </span>\r\n <!--end::Draft-->\r\n </div>\r\n <!--end::Menu item-->\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Trash-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'review'}\"\r\n (click)=\"settingvalue('review')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6 1C5.20435 1 4.44129 1.31607 3.87868 1.87868C3.31607 2.44129 3 3.20435 3 4V20C3 20.7957 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H12H18C18.7957 23 19.5587 22.6839 20.1213 22.1213C20.6839 21.5587 21 20.7957 21 20V16.4208L19 18.4208V20C19 20.2652 18.8946 20.5196 18.7071 20.7071C18.5196 20.8946 18.2652 21 18 21H16.4208L15.3286 22.0922L12 23L12.5455 21H6C5.73478 21 5.48043 20.8946 5.29289 20.7071C5.10536 20.5196 5 20.2652 5 20V4C5 3.73478 5.10536 3.48043 5.29289 3.29289C5.48043 3.10536 5.73478 3 6 3H12V9C12 9.55228 12.4477 10 13 10H19V13.5792L21 11.5792V9C21 8.73478 20.8946 8.48043 20.7071 8.29289L13.7071 1.29289C13.5196 1.10536 13.2652 1 13 1H6ZM17.5858 8L14 4.41421V8H17.5858Z\"\r\n fill=\"currentColor\" />\r\n <path\r\n d=\"M20.0779 11.5014C20.2369 11.3424 20.4256 11.2163 20.6333 11.1303C20.8409 11.0443 21.0635 11 21.2883 11C21.5131 11 21.7357 11.0443 21.9434 11.1303C22.151 11.2163 22.3397 11.3424 22.4987 11.5014C22.6576 11.6603 22.7837 11.849 22.8698 12.0567C22.9558 12.2644 23.0001 12.487 23.0001 12.7117C23.0001 12.9365 22.9558 13.1591 22.8698 13.3668C22.7837 13.5745 22.6576 13.7632 22.4987 13.9221L15.3286 22.0923L12 23.0001L12.9078 19.6715L20.0779 11.5014Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Review & Submit</span>\r\n </span>\r\n <!--end::Trash-->\r\n </div>\r\n <!--end::Menu item-->\r\n\r\n\r\n </div>\r\n </div>\r\n <!--end::Menu-->\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-lg-9 col-xl-9 col-xxl-9\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-bottom-0\">\r\n <h1\r\n class=\"page-heading d-flex text-dark fw-bold fs-2 flex-column justify-content-center my-0 sub-head\">\r\n <span *ngIf=\"select === 'store_info'\">Enter Your Store Details</span>\r\n <span *ngIf=\"select === 'config'\">Enter Your Store Configuration</span>\r\n <span *ngIf=\"select === 'contact'\">Enter Primary SPOC details</span>\r\n <span *ngIf=\"select === 'review'\">Review & submit</span>\r\n </h1>\r\n <div [hidden]=\"select !== 'contact'\" class=\"card-toolbar\">\r\n <button (click)=\"addAltSpoc()\" class=\"btn btn-light-primary1 btn-sm\"><svg class=\"me-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"14\" viewBox=\"0 0 18 14\" fill=\"none\">\r\n <path\r\n d=\"M2.7 3.5C2.7 2.57174 3.07928 1.6815 3.75442 1.02513C4.42955 0.368749 5.34522 0 6.3 0C7.25478 0 8.17045 0.368749 8.84558 1.02513C9.52072 1.6815 9.9 2.57174 9.9 3.5C9.9 4.42826 9.52072 5.3185 8.84558 5.97487C8.17045 6.63125 7.25478 7 6.3 7C5.34522 7 4.42955 6.63125 3.75442 5.97487C3.07928 5.3185 2.7 4.42826 2.7 3.5ZM0 13.1879C0 10.4945 2.24437 8.3125 5.01469 8.3125H7.58531C10.3556 8.3125 12.6 10.4945 12.6 13.1879C12.6 13.6363 12.2259 14 11.7647 14H0.835312C0.374063 14 0 13.6363 0 13.1879ZM14.175 8.53125V6.78125H12.375C12.0009 6.78125 11.7 6.48867 11.7 6.125C11.7 5.76133 12.0009 5.46875 12.375 5.46875H14.175V3.71875C14.175 3.35508 14.4759 3.0625 14.85 3.0625C15.2241 3.0625 15.525 3.35508 15.525 3.71875V5.46875H17.325C17.6991 5.46875 18 5.76133 18 6.125C18 6.48867 17.6991 6.78125 17.325 6.78125H15.525V8.53125C15.525 8.89492 15.2241 9.1875 14.85 9.1875C14.4759 9.1875 14.175 8.89492 14.175 8.53125Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>Add Alternate SPOC</button>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-1\">\r\n <form [formGroup]=\"storeForm\">\r\n <!-- Store Info Start -->\r\n <div [hidden]=\"select !== 'store_info'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeName\" class=\"form-label\">Store Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeName')?.invalid && storeForm.get('storeName')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeName')?.touched && storeForm.get('storeName')?.hasError('required')\">\r\n Store Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeCode\" class=\"form-label\">Store Code / Ref Code (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeCode\" formControlName=\"storeCode\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"businessType\" class=\"form-label\">Business Type</label>\r\n <select class=\"form-select\" id=\"businessType\" formControlName=\"businessType\">\r\n <option value=\"COCO\">COCO</option>\r\n <option value=\"COFO\">COFO</option>\r\n <option value=\"FOFO\">FOFO</option>\r\n <option value=\"FOCO\">FOCO</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeType\" class=\"form-label\">Store Type</label>\r\n <select class=\"form-select\" id=\"storeType\" formControlName=\"storeType_type\">\r\n <option value=\"High Street\">High Street</option>\r\n <option value=\"Mall Store\">Mall Store</option>\r\n <option value=\"Kiosk\">Kiosk</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 mb-5\" *ngIf=\"storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label for=\"mallName\" class=\"form-label\">Enter Mall Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"mallName\" formControlName=\"storeType_name\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeType_name')?.invalid && storeForm.get('storeType_name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeType_name')?.touched && storeForm.get('storeType_name')?.hasError('required')\">\r\n Mall Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"address\" class=\"form-label\">Address Line</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\" #placesRef=\"ngx-places\" ngx-gp-autocomplete (onAddressChange)=\"handleAddressChange($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('address')?.invalid && storeForm.get('address')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('address')?.touched && storeForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"country\" class=\"form-label\">Country</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('country')?.invalid && storeForm.get('country')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('country')?.touched && storeForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"state\" class=\"form-label\">State</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('state')?.invalid && storeForm.get('state')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('state')?.touched && storeForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"city\" class=\"form-label\">City / Town</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('city')?.invalid && storeForm.get('city')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('city')?.touched && storeForm.get('city')?.hasError('required')\">\r\n City is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"pincode\" class=\"form-label\">Pin / Zip Code</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\" maxlength=\"6\" minlength=\"6\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('pincode')?.invalid && storeForm.get('pincode')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('pincode')?.touched && storeForm.get('pincode')?.hasError('required')\">\r\n Pincode is required.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\"\r\n (click)=\"goToConfiguration()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Info End -->\r\n\r\n <!-- Store Configuration Start -->\r\n <div [hidden]=\"select !== 'config'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"timeZone\" class=\"form-label\">Time Zone</label>\r\n <!-- <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"timeZone\" formControlName=\"timeZone\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('timeZone')?.invalid && storeForm.get('timeZone')?.touched}\"> -->\r\n <select class=\"form-select\" id=\"timeZone\" formControlName=\"timeZone\">\r\n <option *ngFor=\"let timezone of timezones\" [value]=\"timezone\">{{ timezone }}</option>\r\n </select>\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('timeZone')?.touched && storeForm.get('timeZone')?.hasError('required')\">\r\n Time Zone is required.\r\n </small>\r\n </div>\r\n <!-- <div class=\"col-md-6 mb-5\">\r\n <label for=\"noOfCameras\" class=\"form-label\">No of Cameras</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"noOfCameras\" formControlName=\"cameras\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('cameras')?.invalid && storeForm.get('cameras')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('cameras')?.touched && storeForm.get('cameras')?.hasError('required')\">\r\n No of Cameras is required.\r\n </small>\r\n </div> -->\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeOpenTime\" class=\"form-label\">Store Open Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeOpenTime\" formControlName=\"open\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('open')?.invalid && storeForm.get('open')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('open')?.touched && storeForm.get('open')?.hasError('required')\">\r\n Store Open Time is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeCloseTime\" class=\"form-label\">Store Close Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeCloseTime\" formControlName=\"close\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('close')?.invalid && storeForm.get('close')?.touched || storeForm.hasError('invalidTimeRange')}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('close')?.touched && storeForm.get('close')?.hasError('required')\">\r\n Store Close Time is required.\r\n </small>\r\n <small class=\"my-2\" *ngIf=\"storeForm.hasError('invalidTimeRange') && (storeForm.get('open')?.touched || storeForm.get('close')?.touched)\">\r\n Opening time must be before closing time.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row mt-20\">\r\n <div class=\"col-12 text-end mt-15\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToContact()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Configuration End -->\r\n\r\n <!-- Store Contact Start -->\r\n <div [hidden]=\"select !== 'contact'\">\r\n <div class=\"row\">\r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spocDetail of getspocDetailsControls(); let i = index\" [formGroupName]=\"i\">\r\n <div *ngIf=\"i!==0\" class=\"d-flex justify-content-between align-items-center my-6\">\r\n <ng-container >\r\n <span class=\"fw-bold fs-4\">Alternate SPOC {{i}}</span>\r\n <span (click)=\"delAltSpoc()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2250_30650)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M12.5 13.9998H14.1667M14.1667 13.9998H27.5M14.1667 13.9998V25.6665C14.1667 26.1085 14.3423 26.5325 14.6548 26.845C14.9674 27.1576 15.3913 27.3332 15.8333 27.3332H24.1667C24.6087 27.3332 25.0326 27.1576 25.3452 26.845C25.6577 26.5325 25.8333 26.1085 25.8333 25.6665V13.9998H14.1667ZM16.6667 13.9998V12.3332C16.6667 11.8911 16.8423 11.4672 17.1548 11.1547C17.4674 10.8421 17.8913 10.6665 18.3333 10.6665H21.6667C22.1087 10.6665 22.5326 10.8421 22.8452 11.1547C23.1577 11.4672 23.3333 11.8911 23.3333 12.3332V13.9998M18.3333 18.1665V23.1665M21.6667 18.1665V23.1665\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2250_30650\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2250_30650\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2250_30650\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactName\" class=\"form-label\">Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactName\" formControlName=\"name\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('name')?.invalid && spocDetail.get('name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"spocDetail.get('name')?.touched && spocDetail.get('name')?.hasError('required')\">\r\n Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactEmail\" class=\"form-label\">Email</label>\r\n <input autocomplete=\"off\" type=\"email\" class=\"form-control\" id=\"contactEmail\" formControlName=\"email\"\r\n pattern=\"^([a-zA-Z0-9_\\-\\.]+)@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-zA-Z]{2,3})$\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('email')?.invalid && spocDetail.get('email')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('email')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('required')\">\r\n Email is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('minlength')\">\r\n Email must be at least 3 characters long.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('maxlength')\">\r\n Email must be not more than 100 characters long.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactNumber\" class=\"form-label\">Contact Number</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactNumber\" minlength=\"10\" maxlength=\"13\"\r\n (keypress)=\"omit_special_char($event)\" formControlName=\"contact\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('contact')?.invalid && spocDetail.get('contact')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('contact')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('required')\">\r\n Contact is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('minlength')\">\r\n Contact must be at least 10 digits.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('maxlength')\">\r\n Contact must be not more than 13 digits.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"designation\" class=\"form-label\">Designation (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"designation\" formControlName=\"designation\">\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"col-md-12 mb-5\">\r\n <h1 class=\"sub-head\">Enter Store Connection Details</h1>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"anyDeskID\" class=\"form-label\">AnyDesk ID / TeamViewer ID (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"anyDeskID\"\r\n formControlName=\"storeConnectionId\">\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToReview()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Contact End -->\r\n\r\n <!-- Review & Submit Start -->\r\n <div [hidden]=\"select !== 'review'\">\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Info\r\n </div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeName')?.value ?\r\n storeForm.get('storeName')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Code</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('storeCode')?.value ?\r\n storeForm.get('storeCode')?.value: 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\"> \r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Business Type</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">\r\n {{storeForm.get('businessType')?.value ? storeForm.get('businessType')?.value :\r\n 'NA'}} </span>\r\n </div>\r\n </div>\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Type\r\n <!-- <i data-bs-toggle=\"tooltip\"\r\n title=\"Phone number must be active\" class=\"fas fa-exclamation-circle ms-1 fs-7\"></i> -->\r\n </label>\r\n <div class=\"col-lg-9 d-flex align-items-center\">\r\n <span\r\n class=\"fw-bolder fs-6 me-2 text-review-val\">{{storeForm.get('storeType_type')?.value\r\n ? storeForm.get('storeType_type')?.value : 'NA'}}</span>\r\n <!-- <span class=\"badge badge-success\">Verified</span> -->\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\"\r\n *ngIf=\"storeForm.get('storeType_type')?.value && storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\"> Mall Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeType_name')?.value\r\n ? storeForm.get('storeType_name')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Address</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">\r\n <ng-container>\r\n {{storeForm.get('address')?.value ? storeForm.get('address')?.value : 'NA'}}\r\n </ng-container>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row mb-10\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Allow Changes</label>\r\n <div class=\"col-lg-9\"><span class=\"fw-bold fs-6\">Yes</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Configuration</div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Time Zone</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('timeZone')?.value ?\r\n storeForm.get('timeZone')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">No of Cameras</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('cameras')?.value ?\r\n storeForm.get('cameras')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Open Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">{{storeForm.get('open')?.value\r\n ? storeForm.get('open')?.value : 'NA'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Close Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('close')?.value ?\r\n storeForm.get('close')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Contact\r\n Details</div>\r\n <div class=\"card-body row px-9 pt-3 pb-4\">\r\n <div class=\"table-responsive col-md-12 col-lg-12 col-xl-9 col-xxl-8\">\r\n <table class=\"table align-middle gy-6\">\r\n <tbody class=\"fs-6 fw-bold\"> \r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spoc of getspocDetailsControls();let i=index;\">\r\n <tr>\r\n <td>Spoc {{i+1}}</td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M15 15.75V14.25C15 13.4544 14.6839 12.6913 14.1213 12.1287C13.5587 11.5661 12.7956 11.25 12 11.25H6C5.20435 11.25 4.44129 11.5661 3.87868 12.1287C3.31607 12.6913 3 13.4544 3 14.25V15.75M12 5.25C12 6.90685 10.6569 8.25 9 8.25C7.34315 8.25 6 6.90685 6 5.25C6 3.59315 7.34315 2.25 9 2.25C10.6569 2.25 12 3.59315 12 5.25Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.name ?\r\n getspocDetailsValues(i)?.name : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80373)\">\r\n <path\r\n d=\"M12 6.00002V9.75002C12 10.3468 12.2371 10.9191 12.659 11.341C13.081 11.763 13.6533 12 14.25 12C14.8467 12 15.419 11.763 15.841 11.341C16.263 10.9191 16.5 10.3468 16.5 9.75002V9.00002C16.4999 7.30729 15.9272 5.66438 14.875 4.33842C13.8227 3.01246 12.3529 2.08144 10.7045 1.69675C9.05605 1.31205 7.32596 1.4963 5.79552 2.21955C4.26508 2.94279 3.02431 4.16249 2.27495 5.68032C1.5256 7.19814 1.31173 8.92483 1.66813 10.5796C2.02453 12.2344 2.93024 13.7199 4.23798 14.7947C5.54572 15.8695 7.17858 16.4703 8.87106 16.4994C10.5635 16.5285 12.2161 15.9842 13.56 14.955M12 9.00002C12 10.6569 10.6569 12 9.00001 12C7.34315 12 6.00001 10.6569 6.00001 9.00002C6.00001 7.34317 7.34315 6.00002 9.00001 6.00002C10.6569 6.00002 12 7.34317 12 9.00002Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80373\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.email ?\r\n getspocDetailsValues(i)?.email : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80376)\">\r\n <path\r\n d=\"M16.5001 12.6901V14.9401C16.5009 15.1489 16.4581 15.3557 16.3745 15.5471C16.2908 15.7385 16.168 15.9103 16.0141 16.0515C15.8602 16.1927 15.6785 16.3002 15.4806 16.3671C15.2828 16.434 15.0731 16.4589 14.8651 16.4401C12.5572 16.1893 10.3403 15.4007 8.39257 14.1376C6.58044 12.9861 5.04407 11.4497 3.89257 9.63757C2.62506 7.68098 1.83625 5.45332 1.59007 3.13507C1.57133 2.92767 1.59598 2.71864 1.66245 2.52129C1.72892 2.32394 1.83575 2.14259 1.97615 1.98879C2.11654 1.83499 2.28743 1.7121 2.47792 1.62796C2.6684 1.54382 2.87433 1.50027 3.08257 1.50007H5.33257C5.69655 1.49649 6.04942 1.62538 6.32539 1.86272C6.60137 2.10006 6.78163 2.42966 6.83257 2.79007C6.92754 3.51012 7.10366 4.21712 7.35757 4.89757C7.45848 5.16602 7.48032 5.45776 7.4205 5.73823C7.36069 6.01871 7.22172 6.27616 7.02007 6.48007L6.06757 7.43257C7.13524 9.31023 8.68991 10.8649 10.5676 11.9326L11.5201 10.9801C11.724 10.7784 11.9814 10.6395 12.2619 10.5796C12.5424 10.5198 12.8341 10.5417 13.1026 10.6426C13.783 10.8965 14.49 11.0726 15.2101 11.1676C15.5744 11.219 15.9071 11.4025 16.145 11.6832C16.3828 11.9639 16.5092 12.3223 16.5001 12.6901Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80376\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.contact ?\r\n getspocDetailsValues(i)?.contact : 'NA' }}</span></td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr>\r\n <td>AnyDesk ID\r\n <td>\r\n <span class=\"ms-2\">{{storeForm.get('storeConnectionId')?.value ?\r\n storeForm.get('storeConnectionId')?.value : 'NA' }}</span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"text-end\">\r\n <button type=\"button\" (click)=\"goToStoreInfo()\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\">Edit</button>\r\n <button type=\"button\" [disabled]=\"storeForm.invalid\" (click)=\"onSubmit()\"\r\n class=\"btn btn-primary\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Review & Submit End -->\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".kiwi{fill:#344054}.kiwi.active{fill:#009bf3}.menu-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px}.menu-state-bg .menu-item .menu-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:8px 16px}.menu-state-title-primary .menu-item .menu-link.active .menu-title{color:var(--Primary-700, #009BF3)!important}.sub-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:18px!important;font-style:normal;font-weight:500!important;line-height:28px}.text-muted-review{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.text-review-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px}.align-middle{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:20px}td{padding:0!important}.invalid-feedback,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}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast{border-left:4px solid #009EF7}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.spocArea{overflow-y:scroll;max-height:60vh;padding:0;margin:0}::ng-deep .spocArea::-webkit-scrollbar-thumb{-webkit-border-radius:10px!important;border-radius:10px!important;background:var(--gray-100, #eaeaea)!important;height:50px!important}::ng-deep .spocArea::-webkit-scrollbar{width:10px!important}::ng-deep .spocArea::-webkit-scrollbar-track{background:none!important;box-shadow:none!important}.sub-head{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.btn-primary{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;font-weight:600;line-height:24px}.btn-outline{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;font-weight:600!important;line-height:24px}.btn-light-primary1{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
2284
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AddStoresFormComponent, selector: "lib-add-stores-form", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], ngImport: i0, template: "<div class=\"row mt-3 mb-6\">\r\n <div class=\"col-md-3 col-lg-3 col-xl-3 col-xxl-3\" id=\"left-container\">\r\n <div class=\"card card-flush h-100 mb-0\">\r\n <!--begin::Aside content-->\r\n <div class=\"card-body\">\r\n <div\r\n class=\"menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary\">\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'store_info' }\"\r\n (click)=\"settingvalue('store_info')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path stroke=\"currentColor\"\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Store Info</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'config' }\"\r\n (click)=\"settingvalue('config')\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1017_22270)\">\r\n <path\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1017_22270\">\r\n <rect width=\"24\" height=\"24\" fill=\"currentColor\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"menu-title fw-bold \">Store Configuration</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n\r\n <!--end::Menu item-->\r\n\r\n\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Draft-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'contact' }\"\r\n (click)=\"settingvalue('contact')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Contact Details</span>\r\n </span>\r\n <!--end::Draft-->\r\n </div>\r\n <!--end::Menu item-->\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Trash-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'review'}\"\r\n (click)=\"settingvalue('review')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6 1C5.20435 1 4.44129 1.31607 3.87868 1.87868C3.31607 2.44129 3 3.20435 3 4V20C3 20.7957 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H12H18C18.7957 23 19.5587 22.6839 20.1213 22.1213C20.6839 21.5587 21 20.7957 21 20V16.4208L19 18.4208V20C19 20.2652 18.8946 20.5196 18.7071 20.7071C18.5196 20.8946 18.2652 21 18 21H16.4208L15.3286 22.0922L12 23L12.5455 21H6C5.73478 21 5.48043 20.8946 5.29289 20.7071C5.10536 20.5196 5 20.2652 5 20V4C5 3.73478 5.10536 3.48043 5.29289 3.29289C5.48043 3.10536 5.73478 3 6 3H12V9C12 9.55228 12.4477 10 13 10H19V13.5792L21 11.5792V9C21 8.73478 20.8946 8.48043 20.7071 8.29289L13.7071 1.29289C13.5196 1.10536 13.2652 1 13 1H6ZM17.5858 8L14 4.41421V8H17.5858Z\"\r\n fill=\"currentColor\" />\r\n <path\r\n d=\"M20.0779 11.5014C20.2369 11.3424 20.4256 11.2163 20.6333 11.1303C20.8409 11.0443 21.0635 11 21.2883 11C21.5131 11 21.7357 11.0443 21.9434 11.1303C22.151 11.2163 22.3397 11.3424 22.4987 11.5014C22.6576 11.6603 22.7837 11.849 22.8698 12.0567C22.9558 12.2644 23.0001 12.487 23.0001 12.7117C23.0001 12.9365 22.9558 13.1591 22.8698 13.3668C22.7837 13.5745 22.6576 13.7632 22.4987 13.9221L15.3286 22.0923L12 23.0001L12.9078 19.6715L20.0779 11.5014Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Review & Submit</span>\r\n </span>\r\n <!--end::Trash-->\r\n </div>\r\n <!--end::Menu item-->\r\n\r\n\r\n </div>\r\n </div>\r\n <!--end::Menu-->\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-lg-9 col-xl-9 col-xxl-9\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-bottom-0\">\r\n <h1\r\n class=\"page-heading d-flex text-dark fw-bold fs-2 flex-column justify-content-center my-0 sub-head\">\r\n <span *ngIf=\"select === 'store_info'\">Enter Your Store Details</span>\r\n <span *ngIf=\"select === 'config'\">Enter Your Store Configuration</span>\r\n <span *ngIf=\"select === 'contact'\">Enter Primary SPOC details</span>\r\n <span *ngIf=\"select === 'review'\">Review & submit</span>\r\n </h1>\r\n <div [hidden]=\"select !== 'contact'\" class=\"card-toolbar\">\r\n <button (click)=\"addAltSpoc()\" class=\"btn btn-light-primary1 btn-sm\"><svg class=\"me-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"14\" viewBox=\"0 0 18 14\" fill=\"none\">\r\n <path\r\n d=\"M2.7 3.5C2.7 2.57174 3.07928 1.6815 3.75442 1.02513C4.42955 0.368749 5.34522 0 6.3 0C7.25478 0 8.17045 0.368749 8.84558 1.02513C9.52072 1.6815 9.9 2.57174 9.9 3.5C9.9 4.42826 9.52072 5.3185 8.84558 5.97487C8.17045 6.63125 7.25478 7 6.3 7C5.34522 7 4.42955 6.63125 3.75442 5.97487C3.07928 5.3185 2.7 4.42826 2.7 3.5ZM0 13.1879C0 10.4945 2.24437 8.3125 5.01469 8.3125H7.58531C10.3556 8.3125 12.6 10.4945 12.6 13.1879C12.6 13.6363 12.2259 14 11.7647 14H0.835312C0.374063 14 0 13.6363 0 13.1879ZM14.175 8.53125V6.78125H12.375C12.0009 6.78125 11.7 6.48867 11.7 6.125C11.7 5.76133 12.0009 5.46875 12.375 5.46875H14.175V3.71875C14.175 3.35508 14.4759 3.0625 14.85 3.0625C15.2241 3.0625 15.525 3.35508 15.525 3.71875V5.46875H17.325C17.6991 5.46875 18 5.76133 18 6.125C18 6.48867 17.6991 6.78125 17.325 6.78125H15.525V8.53125C15.525 8.89492 15.2241 9.1875 14.85 9.1875C14.4759 9.1875 14.175 8.89492 14.175 8.53125Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>Add Alternate SPOC</button>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-1\">\r\n <form [formGroup]=\"storeForm\">\r\n <!-- Store Info Start -->\r\n <div [hidden]=\"select !== 'store_info'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeName\" class=\"form-label\">Store Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeName')?.invalid && storeForm.get('storeName')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeName')?.touched && storeForm.get('storeName')?.hasError('required')\">\r\n Store Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeCode\" class=\"form-label\">Store Code / Ref Code (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeCode\" formControlName=\"storeCode\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"businessType\" class=\"form-label\">Business Type</label>\r\n <select class=\"form-select\" id=\"businessType\" formControlName=\"businessType\">\r\n <option value=\"COCO\">COCO</option>\r\n <option value=\"COFO\">COFO</option>\r\n <option value=\"FOFO\">FOFO</option>\r\n <option value=\"FOCO\">FOCO</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeType\" class=\"form-label\">Store Type</label>\r\n <select class=\"form-select\" id=\"storeType\" formControlName=\"storeType_type\">\r\n <option value=\"High Street\">High Street</option>\r\n <option value=\"Mall Store\">Mall Store</option>\r\n <option value=\"Kiosk\">Kiosk</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 mb-5\" *ngIf=\"storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label for=\"mallName\" class=\"form-label\">Enter Mall Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"mallName\" formControlName=\"storeType_name\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeType_name')?.invalid && storeForm.get('storeType_name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeType_name')?.touched && storeForm.get('storeType_name')?.hasError('required')\">\r\n Mall Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"address\" class=\"form-label\">Address Line</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\" #placesRef=\"ngx-places\" ngx-gp-autocomplete (onAddressChange)=\"handleAddressChange($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('address')?.invalid && storeForm.get('address')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('address')?.touched && storeForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"country\" class=\"form-label\">Country</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('country')?.invalid && storeForm.get('country')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('country')?.touched && storeForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"state\" class=\"form-label\">State</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('state')?.invalid && storeForm.get('state')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('state')?.touched && storeForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"city\" class=\"form-label\">City / Town</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('city')?.invalid && storeForm.get('city')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('city')?.touched && storeForm.get('city')?.hasError('required')\">\r\n City is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"pincode\" class=\"form-label\">Pin / Zip Code</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\" maxlength=\"6\" minlength=\"6\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('pincode')?.invalid && storeForm.get('pincode')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('pincode')?.touched && storeForm.get('pincode')?.hasError('required')\">\r\n Pincode is required.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\"\r\n (click)=\"goToConfiguration()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Info End -->\r\n\r\n <!-- Store Configuration Start -->\r\n <div [hidden]=\"select !== 'config'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"timeZone\" class=\"form-label\">Time Zone</label>\r\n <!-- <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"timeZone\" formControlName=\"timeZone\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('timeZone')?.invalid && storeForm.get('timeZone')?.touched}\"> -->\r\n <select class=\"form-select\" id=\"timeZone\" formControlName=\"timeZone\">\r\n <option *ngFor=\"let timezone of timezones\" [value]=\"timezone\">{{ timezone }}</option>\r\n </select>\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('timeZone')?.touched && storeForm.get('timeZone')?.hasError('required')\">\r\n Time Zone is required.\r\n </small>\r\n </div>\r\n <!-- <div class=\"col-md-6 mb-5\">\r\n <label for=\"noOfCameras\" class=\"form-label\">No of Cameras</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"noOfCameras\" formControlName=\"cameras\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('cameras')?.invalid && storeForm.get('cameras')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('cameras')?.touched && storeForm.get('cameras')?.hasError('required')\">\r\n No of Cameras is required.\r\n </small>\r\n </div> -->\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeOpenTime\" class=\"form-label\">Store Open Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeOpenTime\" formControlName=\"open\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('open')?.invalid && storeForm.get('open')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('open')?.touched && storeForm.get('open')?.hasError('required')\">\r\n Store Open Time is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeCloseTime\" class=\"form-label\">Store Close Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeCloseTime\" formControlName=\"close\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('close')?.invalid && storeForm.get('close')?.touched || storeForm.hasError('invalidTimeRange')}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('close')?.touched && storeForm.get('close')?.hasError('required')\">\r\n Store Close Time is required.\r\n </small>\r\n <small class=\"my-2\" *ngIf=\"storeForm.hasError('invalidTimeRange') && (storeForm.get('open')?.touched || storeForm.get('close')?.touched)\">\r\n Opening time must be before closing time.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row mt-20\">\r\n <div class=\"col-12 text-end mt-15\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToContact()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Configuration End -->\r\n\r\n <!-- Store Contact Start -->\r\n <div [hidden]=\"select !== 'contact'\">\r\n <div class=\"row\">\r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spocDetail of getspocDetailsControls(); let i = index\" [formGroupName]=\"i\">\r\n <div *ngIf=\"i!==0\" class=\"d-flex justify-content-between align-items-center my-6\">\r\n <ng-container >\r\n <span class=\"fw-bold fs-4\">Alternate SPOC {{i}}</span>\r\n <span (click)=\"delAltSpoc()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2250_30650)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M12.5 13.9998H14.1667M14.1667 13.9998H27.5M14.1667 13.9998V25.6665C14.1667 26.1085 14.3423 26.5325 14.6548 26.845C14.9674 27.1576 15.3913 27.3332 15.8333 27.3332H24.1667C24.6087 27.3332 25.0326 27.1576 25.3452 26.845C25.6577 26.5325 25.8333 26.1085 25.8333 25.6665V13.9998H14.1667ZM16.6667 13.9998V12.3332C16.6667 11.8911 16.8423 11.4672 17.1548 11.1547C17.4674 10.8421 17.8913 10.6665 18.3333 10.6665H21.6667C22.1087 10.6665 22.5326 10.8421 22.8452 11.1547C23.1577 11.4672 23.3333 11.8911 23.3333 12.3332V13.9998M18.3333 18.1665V23.1665M21.6667 18.1665V23.1665\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2250_30650\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2250_30650\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2250_30650\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactName\" class=\"form-label\">Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactName\" formControlName=\"name\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('name')?.invalid && spocDetail.get('name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"spocDetail.get('name')?.touched && spocDetail.get('name')?.hasError('required')\">\r\n Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactEmail\" class=\"form-label\">Email</label>\r\n <input autocomplete=\"off\" type=\"email\" class=\"form-control\" id=\"contactEmail\" formControlName=\"email\"\r\n pattern=\"^([a-zA-Z0-9_\\-\\.]+)@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-zA-Z]{2,3})$\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('email')?.invalid && spocDetail.get('email')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('email')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('required')\">\r\n Email is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('minlength')\">\r\n Email must be at least 3 characters long.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('maxlength')\">\r\n Email must be not more than 100 characters long.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactNumber\" class=\"form-label\">Contact Number</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactNumber\" minlength=\"10\" maxlength=\"13\"\r\n (keypress)=\"omit_special_char($event)\" formControlName=\"contact\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('contact')?.invalid && spocDetail.get('contact')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('contact')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('required')\">\r\n Contact is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('minlength')\">\r\n Contact must be at least 10 digits.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('maxlength')\">\r\n Contact must be not more than 13 digits.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"designation\" class=\"form-label\">Designation (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"designation\" formControlName=\"designation\">\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"col-md-12 mb-5\">\r\n <h1 class=\"sub-head\">Enter Store Connection Details</h1>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"anyDeskID\" class=\"form-label\">AnyDesk ID / TeamViewer ID (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"anyDeskID\"\r\n formControlName=\"storeConnectionId\">\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToReview()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Contact End -->\r\n\r\n <!-- Review & Submit Start -->\r\n <div [hidden]=\"select !== 'review'\">\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Info\r\n </div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeName')?.value ?\r\n storeForm.get('storeName')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Code</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('storeCode')?.value ?\r\n storeForm.get('storeCode')?.value: 'NA'}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Business Type</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">\r\n {{storeForm.get('businessType')?.value ? storeForm.get('businessType')?.value :\r\n 'NA'}} </span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Type\r\n <!-- <i data-bs-toggle=\"tooltip\"\r\n title=\"Phone number must be active\" class=\"fas fa-exclamation-circle ms-1 fs-7\"></i> -->\r\n </label>\r\n <div class=\"col-lg-9 d-flex align-items-center\">\r\n <span\r\n class=\"fw-bolder fs-6 me-2 text-review-val\">{{storeForm.get('storeType_type')?.value\r\n ? storeForm.get('storeType_type')?.value : 'NA'}}</span>\r\n <!-- <span class=\"badge badge-success\">Verified</span> -->\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\"\r\n *ngIf=\"storeForm.get('storeType_type')?.value && storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\"> Mall Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeType_name')?.value\r\n ? storeForm.get('storeType_name')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Address</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">\r\n <ng-container>\r\n {{storeForm.get('address')?.value ? storeForm.get('address')?.value : 'NA'}}\r\n </ng-container>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row mb-10\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Allow Changes</label>\r\n <div class=\"col-lg-9\"><span class=\"fw-bold fs-6\">Yes</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Configuration</div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Time Zone</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('timeZone')?.value ?\r\n storeForm.get('timeZone')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">No of Cameras</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('cameras')?.value ?\r\n storeForm.get('cameras')?.value : 'NA'}}</span>\r\n </div>\r\n </div> -->\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Open Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">{{storeForm.get('open')?.value\r\n ? storeForm.get('open')?.value : 'NA'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Close Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('close')?.value ?\r\n storeForm.get('close')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Contact\r\n Details</div>\r\n <div class=\"card-body row px-9 pt-3 pb-4\">\r\n <div class=\"table-responsive col-md-12 col-lg-12 col-xl-9 col-xxl-8\">\r\n <table class=\"table align-middle gy-6\">\r\n <tbody class=\"fs-6 fw-bold\"> \r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spoc of getspocDetailsControls();let i=index;\">\r\n <tr>\r\n <td>Spoc {{i+1}}</td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M15 15.75V14.25C15 13.4544 14.6839 12.6913 14.1213 12.1287C13.5587 11.5661 12.7956 11.25 12 11.25H6C5.20435 11.25 4.44129 11.5661 3.87868 12.1287C3.31607 12.6913 3 13.4544 3 14.25V15.75M12 5.25C12 6.90685 10.6569 8.25 9 8.25C7.34315 8.25 6 6.90685 6 5.25C6 3.59315 7.34315 2.25 9 2.25C10.6569 2.25 12 3.59315 12 5.25Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.name ?\r\n getspocDetailsValues(i)?.name : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80373)\">\r\n <path\r\n d=\"M12 6.00002V9.75002C12 10.3468 12.2371 10.9191 12.659 11.341C13.081 11.763 13.6533 12 14.25 12C14.8467 12 15.419 11.763 15.841 11.341C16.263 10.9191 16.5 10.3468 16.5 9.75002V9.00002C16.4999 7.30729 15.9272 5.66438 14.875 4.33842C13.8227 3.01246 12.3529 2.08144 10.7045 1.69675C9.05605 1.31205 7.32596 1.4963 5.79552 2.21955C4.26508 2.94279 3.02431 4.16249 2.27495 5.68032C1.5256 7.19814 1.31173 8.92483 1.66813 10.5796C2.02453 12.2344 2.93024 13.7199 4.23798 14.7947C5.54572 15.8695 7.17858 16.4703 8.87106 16.4994C10.5635 16.5285 12.2161 15.9842 13.56 14.955M12 9.00002C12 10.6569 10.6569 12 9.00001 12C7.34315 12 6.00001 10.6569 6.00001 9.00002C6.00001 7.34317 7.34315 6.00002 9.00001 6.00002C10.6569 6.00002 12 7.34317 12 9.00002Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80373\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.email ?\r\n getspocDetailsValues(i)?.email : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80376)\">\r\n <path\r\n d=\"M16.5001 12.6901V14.9401C16.5009 15.1489 16.4581 15.3557 16.3745 15.5471C16.2908 15.7385 16.168 15.9103 16.0141 16.0515C15.8602 16.1927 15.6785 16.3002 15.4806 16.3671C15.2828 16.434 15.0731 16.4589 14.8651 16.4401C12.5572 16.1893 10.3403 15.4007 8.39257 14.1376C6.58044 12.9861 5.04407 11.4497 3.89257 9.63757C2.62506 7.68098 1.83625 5.45332 1.59007 3.13507C1.57133 2.92767 1.59598 2.71864 1.66245 2.52129C1.72892 2.32394 1.83575 2.14259 1.97615 1.98879C2.11654 1.83499 2.28743 1.7121 2.47792 1.62796C2.6684 1.54382 2.87433 1.50027 3.08257 1.50007H5.33257C5.69655 1.49649 6.04942 1.62538 6.32539 1.86272C6.60137 2.10006 6.78163 2.42966 6.83257 2.79007C6.92754 3.51012 7.10366 4.21712 7.35757 4.89757C7.45848 5.16602 7.48032 5.45776 7.4205 5.73823C7.36069 6.01871 7.22172 6.27616 7.02007 6.48007L6.06757 7.43257C7.13524 9.31023 8.68991 10.8649 10.5676 11.9326L11.5201 10.9801C11.724 10.7784 11.9814 10.6395 12.2619 10.5796C12.5424 10.5198 12.8341 10.5417 13.1026 10.6426C13.783 10.8965 14.49 11.0726 15.2101 11.1676C15.5744 11.219 15.9071 11.4025 16.145 11.6832C16.3828 11.9639 16.5092 12.3223 16.5001 12.6901Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80376\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.contact ?\r\n getspocDetailsValues(i)?.contact : 'NA' }}</span></td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr>\r\n <td>AnyDesk ID\r\n <td>\r\n <span class=\"ms-2\">{{storeForm.get('storeConnectionId')?.value ?\r\n storeForm.get('storeConnectionId')?.value : 'NA' }}</span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"text-end\">\r\n <button type=\"button\" (click)=\"goToStoreInfo()\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\">Edit</button>\r\n <button type=\"button\" [disabled]=\"storeForm.invalid\" (click)=\"onSubmit()\"\r\n class=\"btn btn-primary\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Review & Submit End -->\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".kiwi{fill:#344054}.kiwi.active{fill:#009bf3}.menu-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px}.menu-state-bg .menu-item .menu-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:8px 16px}.menu-state-title-primary .menu-item .menu-link.active .menu-title{color:var(--Primary-700, #009BF3)!important}.sub-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:18px!important;font-style:normal;font-weight:500!important;line-height:28px}.text-muted-review{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.text-review-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px}.align-middle{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:20px}td{padding:0!important}.invalid-feedback,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}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast{border-left:4px solid #009EF7}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.spocArea{overflow-y:scroll;max-height:60vh;padding:0;margin:0}::ng-deep .spocArea::-webkit-scrollbar-thumb{-webkit-border-radius:10px!important;border-radius:10px!important;background:var(--gray-100, #eaeaea)!important;height:50px!important}::ng-deep .spocArea::-webkit-scrollbar{width:10px!important}::ng-deep .spocArea::-webkit-scrollbar-track{background:none!important;box-shadow:none!important}.sub-head{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.btn-primary{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;font-weight:600;line-height:24px}.btn-outline{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;font-weight:600!important;line-height:24px}.btn-light-primary1{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i6$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
2207
2285
  }
2208
2286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AddStoresFormComponent, decorators: [{
2209
2287
  type: Component,
2210
- args: [{ selector: "lib-add-stores-form", template: "<div class=\"row mt-3 mb-6\">\r\n <div class=\"col-md-3 col-lg-3 col-xl-3 col-xxl-3\" id=\"left-container\">\r\n <div class=\"card card-flush h-100 mb-0\">\r\n <!--begin::Aside content-->\r\n <div class=\"card-body\">\r\n <div\r\n class=\"menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary\">\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'store_info' }\"\r\n (click)=\"settingvalue('store_info')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path stroke=\"currentColor\"\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Store Info</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'config' }\"\r\n (click)=\"settingvalue('config')\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1017_22270)\">\r\n <path\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1017_22270\">\r\n <rect width=\"24\" height=\"24\" fill=\"currentColor\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"menu-title fw-bold \">Store Configuration</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n\r\n <!--end::Menu item-->\r\n\r\n\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Draft-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'contact' }\"\r\n (click)=\"settingvalue('contact')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Contact Details</span>\r\n </span>\r\n <!--end::Draft-->\r\n </div>\r\n <!--end::Menu item-->\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Trash-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'review'}\"\r\n (click)=\"settingvalue('review')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6 1C5.20435 1 4.44129 1.31607 3.87868 1.87868C3.31607 2.44129 3 3.20435 3 4V20C3 20.7957 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H12H18C18.7957 23 19.5587 22.6839 20.1213 22.1213C20.6839 21.5587 21 20.7957 21 20V16.4208L19 18.4208V20C19 20.2652 18.8946 20.5196 18.7071 20.7071C18.5196 20.8946 18.2652 21 18 21H16.4208L15.3286 22.0922L12 23L12.5455 21H6C5.73478 21 5.48043 20.8946 5.29289 20.7071C5.10536 20.5196 5 20.2652 5 20V4C5 3.73478 5.10536 3.48043 5.29289 3.29289C5.48043 3.10536 5.73478 3 6 3H12V9C12 9.55228 12.4477 10 13 10H19V13.5792L21 11.5792V9C21 8.73478 20.8946 8.48043 20.7071 8.29289L13.7071 1.29289C13.5196 1.10536 13.2652 1 13 1H6ZM17.5858 8L14 4.41421V8H17.5858Z\"\r\n fill=\"currentColor\" />\r\n <path\r\n d=\"M20.0779 11.5014C20.2369 11.3424 20.4256 11.2163 20.6333 11.1303C20.8409 11.0443 21.0635 11 21.2883 11C21.5131 11 21.7357 11.0443 21.9434 11.1303C22.151 11.2163 22.3397 11.3424 22.4987 11.5014C22.6576 11.6603 22.7837 11.849 22.8698 12.0567C22.9558 12.2644 23.0001 12.487 23.0001 12.7117C23.0001 12.9365 22.9558 13.1591 22.8698 13.3668C22.7837 13.5745 22.6576 13.7632 22.4987 13.9221L15.3286 22.0923L12 23.0001L12.9078 19.6715L20.0779 11.5014Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Review & Submit</span>\r\n </span>\r\n <!--end::Trash-->\r\n </div>\r\n <!--end::Menu item-->\r\n\r\n\r\n </div>\r\n </div>\r\n <!--end::Menu-->\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-lg-9 col-xl-9 col-xxl-9\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-bottom-0\">\r\n <h1\r\n class=\"page-heading d-flex text-dark fw-bold fs-2 flex-column justify-content-center my-0 sub-head\">\r\n <span *ngIf=\"select === 'store_info'\">Enter Your Store Details</span>\r\n <span *ngIf=\"select === 'config'\">Enter Your Store Configuration</span>\r\n <span *ngIf=\"select === 'contact'\">Enter Primary SPOC details</span>\r\n <span *ngIf=\"select === 'review'\">Review & submit</span>\r\n </h1>\r\n <div [hidden]=\"select !== 'contact'\" class=\"card-toolbar\">\r\n <button (click)=\"addAltSpoc()\" class=\"btn btn-light-primary1 btn-sm\"><svg class=\"me-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"14\" viewBox=\"0 0 18 14\" fill=\"none\">\r\n <path\r\n d=\"M2.7 3.5C2.7 2.57174 3.07928 1.6815 3.75442 1.02513C4.42955 0.368749 5.34522 0 6.3 0C7.25478 0 8.17045 0.368749 8.84558 1.02513C9.52072 1.6815 9.9 2.57174 9.9 3.5C9.9 4.42826 9.52072 5.3185 8.84558 5.97487C8.17045 6.63125 7.25478 7 6.3 7C5.34522 7 4.42955 6.63125 3.75442 5.97487C3.07928 5.3185 2.7 4.42826 2.7 3.5ZM0 13.1879C0 10.4945 2.24437 8.3125 5.01469 8.3125H7.58531C10.3556 8.3125 12.6 10.4945 12.6 13.1879C12.6 13.6363 12.2259 14 11.7647 14H0.835312C0.374063 14 0 13.6363 0 13.1879ZM14.175 8.53125V6.78125H12.375C12.0009 6.78125 11.7 6.48867 11.7 6.125C11.7 5.76133 12.0009 5.46875 12.375 5.46875H14.175V3.71875C14.175 3.35508 14.4759 3.0625 14.85 3.0625C15.2241 3.0625 15.525 3.35508 15.525 3.71875V5.46875H17.325C17.6991 5.46875 18 5.76133 18 6.125C18 6.48867 17.6991 6.78125 17.325 6.78125H15.525V8.53125C15.525 8.89492 15.2241 9.1875 14.85 9.1875C14.4759 9.1875 14.175 8.89492 14.175 8.53125Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>Add Alternate SPOC</button>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-1\">\r\n <form [formGroup]=\"storeForm\">\r\n <!-- Store Info Start -->\r\n <div [hidden]=\"select !== 'store_info'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeName\" class=\"form-label\">Store Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeName')?.invalid && storeForm.get('storeName')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeName')?.touched && storeForm.get('storeName')?.hasError('required')\">\r\n Store Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeCode\" class=\"form-label\">Store Code / Ref Code (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeCode\" formControlName=\"storeCode\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"businessType\" class=\"form-label\">Business Type</label>\r\n <select class=\"form-select\" id=\"businessType\" formControlName=\"businessType\">\r\n <option value=\"COCO\">COCO</option>\r\n <option value=\"COFO\">COFO</option>\r\n <option value=\"FOFO\">FOFO</option>\r\n <option value=\"FOCO\">FOCO</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeType\" class=\"form-label\">Store Type</label>\r\n <select class=\"form-select\" id=\"storeType\" formControlName=\"storeType_type\">\r\n <option value=\"High Street\">High Street</option>\r\n <option value=\"Mall Store\">Mall Store</option>\r\n <option value=\"Kiosk\">Kiosk</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 mb-5\" *ngIf=\"storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label for=\"mallName\" class=\"form-label\">Enter Mall Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"mallName\" formControlName=\"storeType_name\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeType_name')?.invalid && storeForm.get('storeType_name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeType_name')?.touched && storeForm.get('storeType_name')?.hasError('required')\">\r\n Mall Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"address\" class=\"form-label\">Address Line</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\" #placesRef=\"ngx-places\" ngx-gp-autocomplete (onAddressChange)=\"handleAddressChange($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('address')?.invalid && storeForm.get('address')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('address')?.touched && storeForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"country\" class=\"form-label\">Country</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('country')?.invalid && storeForm.get('country')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('country')?.touched && storeForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"state\" class=\"form-label\">State</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('state')?.invalid && storeForm.get('state')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('state')?.touched && storeForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"city\" class=\"form-label\">City / Town</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('city')?.invalid && storeForm.get('city')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('city')?.touched && storeForm.get('city')?.hasError('required')\">\r\n City is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"pincode\" class=\"form-label\">Pin / Zip Code</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\" maxlength=\"6\" minlength=\"6\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('pincode')?.invalid && storeForm.get('pincode')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('pincode')?.touched && storeForm.get('pincode')?.hasError('required')\">\r\n Pincode is required.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\"\r\n (click)=\"goToConfiguration()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Info End -->\r\n\r\n <!-- Store Configuration Start -->\r\n <div [hidden]=\"select !== 'config'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"timeZone\" class=\"form-label\">Time Zone</label>\r\n <!-- <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"timeZone\" formControlName=\"timeZone\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('timeZone')?.invalid && storeForm.get('timeZone')?.touched}\"> -->\r\n <select class=\"form-select\" id=\"timeZone\" formControlName=\"timeZone\">\r\n <option *ngFor=\"let timezone of timezones\" [value]=\"timezone\">{{ timezone }}</option>\r\n </select>\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('timeZone')?.touched && storeForm.get('timeZone')?.hasError('required')\">\r\n Time Zone is required.\r\n </small>\r\n </div>\r\n <!-- <div class=\"col-md-6 mb-5\">\r\n <label for=\"noOfCameras\" class=\"form-label\">No of Cameras</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"noOfCameras\" formControlName=\"cameras\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('cameras')?.invalid && storeForm.get('cameras')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('cameras')?.touched && storeForm.get('cameras')?.hasError('required')\">\r\n No of Cameras is required.\r\n </small>\r\n </div> -->\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeOpenTime\" class=\"form-label\">Store Open Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeOpenTime\" formControlName=\"open\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('open')?.invalid && storeForm.get('open')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('open')?.touched && storeForm.get('open')?.hasError('required')\">\r\n Store Open Time is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeCloseTime\" class=\"form-label\">Store Close Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeCloseTime\" formControlName=\"close\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('close')?.invalid && storeForm.get('close')?.touched || storeForm.hasError('invalidTimeRange')}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('close')?.touched && storeForm.get('close')?.hasError('required')\">\r\n Store Close Time is required.\r\n </small>\r\n <small class=\"my-2\" *ngIf=\"storeForm.hasError('invalidTimeRange') && (storeForm.get('open')?.touched || storeForm.get('close')?.touched)\">\r\n Opening time must be before closing time.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row mt-20\">\r\n <div class=\"col-12 text-end mt-15\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToContact()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Configuration End -->\r\n\r\n <!-- Store Contact Start -->\r\n <div [hidden]=\"select !== 'contact'\">\r\n <div class=\"row\">\r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spocDetail of getspocDetailsControls(); let i = index\" [formGroupName]=\"i\">\r\n <div *ngIf=\"i!==0\" class=\"d-flex justify-content-between align-items-center my-6\">\r\n <ng-container >\r\n <span class=\"fw-bold fs-4\">Alternate SPOC {{i}}</span>\r\n <span (click)=\"delAltSpoc()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2250_30650)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M12.5 13.9998H14.1667M14.1667 13.9998H27.5M14.1667 13.9998V25.6665C14.1667 26.1085 14.3423 26.5325 14.6548 26.845C14.9674 27.1576 15.3913 27.3332 15.8333 27.3332H24.1667C24.6087 27.3332 25.0326 27.1576 25.3452 26.845C25.6577 26.5325 25.8333 26.1085 25.8333 25.6665V13.9998H14.1667ZM16.6667 13.9998V12.3332C16.6667 11.8911 16.8423 11.4672 17.1548 11.1547C17.4674 10.8421 17.8913 10.6665 18.3333 10.6665H21.6667C22.1087 10.6665 22.5326 10.8421 22.8452 11.1547C23.1577 11.4672 23.3333 11.8911 23.3333 12.3332V13.9998M18.3333 18.1665V23.1665M21.6667 18.1665V23.1665\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2250_30650\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2250_30650\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2250_30650\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactName\" class=\"form-label\">Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactName\" formControlName=\"name\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('name')?.invalid && spocDetail.get('name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"spocDetail.get('name')?.touched && spocDetail.get('name')?.hasError('required')\">\r\n Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactEmail\" class=\"form-label\">Email</label>\r\n <input autocomplete=\"off\" type=\"email\" class=\"form-control\" id=\"contactEmail\" formControlName=\"email\"\r\n pattern=\"^([a-zA-Z0-9_\\-\\.]+)@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-zA-Z]{2,3})$\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('email')?.invalid && spocDetail.get('email')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('email')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('required')\">\r\n Email is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('minlength')\">\r\n Email must be at least 3 characters long.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('maxlength')\">\r\n Email must be not more than 100 characters long.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactNumber\" class=\"form-label\">Contact Number</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactNumber\" minlength=\"10\" maxlength=\"13\"\r\n (keypress)=\"omit_special_char($event)\" formControlName=\"contact\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('contact')?.invalid && spocDetail.get('contact')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('contact')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('required')\">\r\n Contact is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('minlength')\">\r\n Contact must be at least 10 digits.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('maxlength')\">\r\n Contact must be not more than 13 digits.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"designation\" class=\"form-label\">Designation (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"designation\" formControlName=\"designation\">\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"col-md-12 mb-5\">\r\n <h1 class=\"sub-head\">Enter Store Connection Details</h1>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"anyDeskID\" class=\"form-label\">AnyDesk ID / TeamViewer ID (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"anyDeskID\"\r\n formControlName=\"storeConnectionId\">\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToReview()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Contact End -->\r\n\r\n <!-- Review & Submit Start -->\r\n <div [hidden]=\"select !== 'review'\">\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Info\r\n </div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeName')?.value ?\r\n storeForm.get('storeName')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Code</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('storeCode')?.value ?\r\n storeForm.get('storeCode')?.value: 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\"> \r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Business Type</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">\r\n {{storeForm.get('businessType')?.value ? storeForm.get('businessType')?.value :\r\n 'NA'}} </span>\r\n </div>\r\n </div>\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Type\r\n <!-- <i data-bs-toggle=\"tooltip\"\r\n title=\"Phone number must be active\" class=\"fas fa-exclamation-circle ms-1 fs-7\"></i> -->\r\n </label>\r\n <div class=\"col-lg-9 d-flex align-items-center\">\r\n <span\r\n class=\"fw-bolder fs-6 me-2 text-review-val\">{{storeForm.get('storeType_type')?.value\r\n ? storeForm.get('storeType_type')?.value : 'NA'}}</span>\r\n <!-- <span class=\"badge badge-success\">Verified</span> -->\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\"\r\n *ngIf=\"storeForm.get('storeType_type')?.value && storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\"> Mall Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeType_name')?.value\r\n ? storeForm.get('storeType_name')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Address</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">\r\n <ng-container>\r\n {{storeForm.get('address')?.value ? storeForm.get('address')?.value : 'NA'}}\r\n </ng-container>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row mb-10\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Allow Changes</label>\r\n <div class=\"col-lg-9\"><span class=\"fw-bold fs-6\">Yes</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Configuration</div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Time Zone</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('timeZone')?.value ?\r\n storeForm.get('timeZone')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">No of Cameras</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('cameras')?.value ?\r\n storeForm.get('cameras')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Open Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">{{storeForm.get('open')?.value\r\n ? storeForm.get('open')?.value : 'NA'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Close Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('close')?.value ?\r\n storeForm.get('close')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Contact\r\n Details</div>\r\n <div class=\"card-body row px-9 pt-3 pb-4\">\r\n <div class=\"table-responsive col-md-12 col-lg-12 col-xl-9 col-xxl-8\">\r\n <table class=\"table align-middle gy-6\">\r\n <tbody class=\"fs-6 fw-bold\"> \r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spoc of getspocDetailsControls();let i=index;\">\r\n <tr>\r\n <td>Spoc {{i+1}}</td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M15 15.75V14.25C15 13.4544 14.6839 12.6913 14.1213 12.1287C13.5587 11.5661 12.7956 11.25 12 11.25H6C5.20435 11.25 4.44129 11.5661 3.87868 12.1287C3.31607 12.6913 3 13.4544 3 14.25V15.75M12 5.25C12 6.90685 10.6569 8.25 9 8.25C7.34315 8.25 6 6.90685 6 5.25C6 3.59315 7.34315 2.25 9 2.25C10.6569 2.25 12 3.59315 12 5.25Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.name ?\r\n getspocDetailsValues(i)?.name : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80373)\">\r\n <path\r\n d=\"M12 6.00002V9.75002C12 10.3468 12.2371 10.9191 12.659 11.341C13.081 11.763 13.6533 12 14.25 12C14.8467 12 15.419 11.763 15.841 11.341C16.263 10.9191 16.5 10.3468 16.5 9.75002V9.00002C16.4999 7.30729 15.9272 5.66438 14.875 4.33842C13.8227 3.01246 12.3529 2.08144 10.7045 1.69675C9.05605 1.31205 7.32596 1.4963 5.79552 2.21955C4.26508 2.94279 3.02431 4.16249 2.27495 5.68032C1.5256 7.19814 1.31173 8.92483 1.66813 10.5796C2.02453 12.2344 2.93024 13.7199 4.23798 14.7947C5.54572 15.8695 7.17858 16.4703 8.87106 16.4994C10.5635 16.5285 12.2161 15.9842 13.56 14.955M12 9.00002C12 10.6569 10.6569 12 9.00001 12C7.34315 12 6.00001 10.6569 6.00001 9.00002C6.00001 7.34317 7.34315 6.00002 9.00001 6.00002C10.6569 6.00002 12 7.34317 12 9.00002Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80373\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.email ?\r\n getspocDetailsValues(i)?.email : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80376)\">\r\n <path\r\n d=\"M16.5001 12.6901V14.9401C16.5009 15.1489 16.4581 15.3557 16.3745 15.5471C16.2908 15.7385 16.168 15.9103 16.0141 16.0515C15.8602 16.1927 15.6785 16.3002 15.4806 16.3671C15.2828 16.434 15.0731 16.4589 14.8651 16.4401C12.5572 16.1893 10.3403 15.4007 8.39257 14.1376C6.58044 12.9861 5.04407 11.4497 3.89257 9.63757C2.62506 7.68098 1.83625 5.45332 1.59007 3.13507C1.57133 2.92767 1.59598 2.71864 1.66245 2.52129C1.72892 2.32394 1.83575 2.14259 1.97615 1.98879C2.11654 1.83499 2.28743 1.7121 2.47792 1.62796C2.6684 1.54382 2.87433 1.50027 3.08257 1.50007H5.33257C5.69655 1.49649 6.04942 1.62538 6.32539 1.86272C6.60137 2.10006 6.78163 2.42966 6.83257 2.79007C6.92754 3.51012 7.10366 4.21712 7.35757 4.89757C7.45848 5.16602 7.48032 5.45776 7.4205 5.73823C7.36069 6.01871 7.22172 6.27616 7.02007 6.48007L6.06757 7.43257C7.13524 9.31023 8.68991 10.8649 10.5676 11.9326L11.5201 10.9801C11.724 10.7784 11.9814 10.6395 12.2619 10.5796C12.5424 10.5198 12.8341 10.5417 13.1026 10.6426C13.783 10.8965 14.49 11.0726 15.2101 11.1676C15.5744 11.219 15.9071 11.4025 16.145 11.6832C16.3828 11.9639 16.5092 12.3223 16.5001 12.6901Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80376\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.contact ?\r\n getspocDetailsValues(i)?.contact : 'NA' }}</span></td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr>\r\n <td>AnyDesk ID\r\n <td>\r\n <span class=\"ms-2\">{{storeForm.get('storeConnectionId')?.value ?\r\n storeForm.get('storeConnectionId')?.value : 'NA' }}</span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"text-end\">\r\n <button type=\"button\" (click)=\"goToStoreInfo()\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\">Edit</button>\r\n <button type=\"button\" [disabled]=\"storeForm.invalid\" (click)=\"onSubmit()\"\r\n class=\"btn btn-primary\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Review & Submit End -->\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".kiwi{fill:#344054}.kiwi.active{fill:#009bf3}.menu-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px}.menu-state-bg .menu-item .menu-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:8px 16px}.menu-state-title-primary .menu-item .menu-link.active .menu-title{color:var(--Primary-700, #009BF3)!important}.sub-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:18px!important;font-style:normal;font-weight:500!important;line-height:28px}.text-muted-review{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.text-review-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px}.align-middle{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:20px}td{padding:0!important}.invalid-feedback,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}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast{border-left:4px solid #009EF7}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.spocArea{overflow-y:scroll;max-height:60vh;padding:0;margin:0}::ng-deep .spocArea::-webkit-scrollbar-thumb{-webkit-border-radius:10px!important;border-radius:10px!important;background:var(--gray-100, #eaeaea)!important;height:50px!important}::ng-deep .spocArea::-webkit-scrollbar{width:10px!important}::ng-deep .spocArea::-webkit-scrollbar-track{background:none!important;box-shadow:none!important}.sub-head{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.btn-primary{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;font-weight:600;line-height:24px}.btn-outline{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;font-weight:600!important;line-height:24px}.btn-light-primary1{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px}\n"] }]
2288
+ args: [{ selector: "lib-add-stores-form", template: "<div class=\"row mt-3 mb-6\">\r\n <div class=\"col-md-3 col-lg-3 col-xl-3 col-xxl-3\" id=\"left-container\">\r\n <div class=\"card card-flush h-100 mb-0\">\r\n <!--begin::Aside content-->\r\n <div class=\"card-body\">\r\n <div\r\n class=\"menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary\">\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'store_info' }\"\r\n (click)=\"settingvalue('store_info')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path stroke=\"currentColor\"\r\n d=\"M3.08995 6.88369L3.02401 6.98669C2.30358 8.25557 3.06101 9.87945 4.46464 10.0662C4.58627 10.0811 4.70112 10.0892 4.8145 10.0892C5.55255 10.0892 6.20523 9.77229 6.65953 9.27917L7.21286 8.67854L7.76432 9.28089C8.21367 9.77171 8.8652 10.0892 9.60776 10.0892C10.3471 10.0892 11.0022 9.77137 11.4512 9.28089L12.0044 8.67665L12.5576 9.28089C13.0066 9.77137 13.6617 10.0892 14.401 10.0892C15.1404 10.0892 15.7954 9.77137 16.2445 9.28089L16.7977 8.67665L17.3508 9.28089C17.7999 9.77137 18.4549 10.0892 19.1943 10.0892C19.3041 10.0892 19.4223 10.0811 19.5433 10.0663C20.9772 9.87168 21.7355 8.16387 20.9155 6.88419C20.9154 6.88413 20.9154 6.88407 20.9154 6.88402L18.8056 3.59429L18.8056 3.59429L18.8046 3.59282C18.7582 3.52002 18.6649 3.46423 18.5584 3.46423H5.44307C5.3365 3.46423 5.24326 3.52002 5.19681 3.59282L5.19619 3.59379L3.08995 6.88369ZM4.81818 12.7499C4.71644 12.7499 4.616 12.7468 4.5169 12.741V16.6428V18.9642C4.5169 19.8211 5.22663 20.5357 6.11942 20.5357H17.882C18.7748 20.5357 19.4845 19.8211 19.4845 18.9642V16.6428V12.7415C19.3874 12.747 19.2893 12.7499 19.1906 12.7499C19.0022 12.7499 18.8157 12.7398 18.632 12.7202V16.6428V17.3928H17.882H6.11942H5.36942V16.6428V12.721C5.18866 12.74 5.00472 12.7499 4.81818 12.7499Z\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Store Info</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Inbox-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'config' }\"\r\n (click)=\"settingvalue('config')\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_1017_22270)\">\r\n <path\r\n d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1017_22270\">\r\n <rect width=\"24\" height=\"24\" fill=\"currentColor\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"menu-title fw-bold \">Store Configuration</span>\r\n </span>\r\n <!--end::Inbox-->\r\n </div>\r\n\r\n <!--end::Menu item-->\r\n\r\n\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Draft-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'contact' }\"\r\n (click)=\"settingvalue('contact')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13M16 3.13C16.8604 3.3503 17.623 3.8507 18.1676 4.55231C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89317 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88M13 7C13 9.20914 11.2091 11 9 11C6.79086 11 5 9.20914 5 7C5 4.79086 6.79086 3 9 3C11.2091 3 13 4.79086 13 7Z\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Contact Details</span>\r\n </span>\r\n <!--end::Draft-->\r\n </div>\r\n <!--end::Menu item-->\r\n <!--begin::Menu item-->\r\n <div class=\"menu-item my-3\">\r\n <!--begin::Trash-->\r\n <span class=\"menu-link\" [ngClass]=\"{ 'active': select === 'review'}\"\r\n (click)=\"settingvalue('review')\">\r\n <span class=\"menu-icon\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M6 1C5.20435 1 4.44129 1.31607 3.87868 1.87868C3.31607 2.44129 3 3.20435 3 4V20C3 20.7957 3.31607 21.5587 3.87868 22.1213C4.44129 22.6839 5.20435 23 6 23H12H18C18.7957 23 19.5587 22.6839 20.1213 22.1213C20.6839 21.5587 21 20.7957 21 20V16.4208L19 18.4208V20C19 20.2652 18.8946 20.5196 18.7071 20.7071C18.5196 20.8946 18.2652 21 18 21H16.4208L15.3286 22.0922L12 23L12.5455 21H6C5.73478 21 5.48043 20.8946 5.29289 20.7071C5.10536 20.5196 5 20.2652 5 20V4C5 3.73478 5.10536 3.48043 5.29289 3.29289C5.48043 3.10536 5.73478 3 6 3H12V9C12 9.55228 12.4477 10 13 10H19V13.5792L21 11.5792V9C21 8.73478 20.8946 8.48043 20.7071 8.29289L13.7071 1.29289C13.5196 1.10536 13.2652 1 13 1H6ZM17.5858 8L14 4.41421V8H17.5858Z\"\r\n fill=\"currentColor\" />\r\n <path\r\n d=\"M20.0779 11.5014C20.2369 11.3424 20.4256 11.2163 20.6333 11.1303C20.8409 11.0443 21.0635 11 21.2883 11C21.5131 11 21.7357 11.0443 21.9434 11.1303C22.151 11.2163 22.3397 11.3424 22.4987 11.5014C22.6576 11.6603 22.7837 11.849 22.8698 12.0567C22.9558 12.2644 23.0001 12.487 23.0001 12.7117C23.0001 12.9365 22.9558 13.1591 22.8698 13.3668C22.7837 13.5745 22.6576 13.7632 22.4987 13.9221L15.3286 22.0923L12 23.0001L12.9078 19.6715L20.0779 11.5014Z\"\r\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <span class=\"menu-title fw-bold \">Review & Submit</span>\r\n </span>\r\n <!--end::Trash-->\r\n </div>\r\n <!--end::Menu item-->\r\n\r\n\r\n </div>\r\n </div>\r\n <!--end::Menu-->\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-lg-9 col-xl-9 col-xxl-9\">\r\n <div class=\"card\">\r\n <div class=\"card-header border-bottom-0\">\r\n <h1\r\n class=\"page-heading d-flex text-dark fw-bold fs-2 flex-column justify-content-center my-0 sub-head\">\r\n <span *ngIf=\"select === 'store_info'\">Enter Your Store Details</span>\r\n <span *ngIf=\"select === 'config'\">Enter Your Store Configuration</span>\r\n <span *ngIf=\"select === 'contact'\">Enter Primary SPOC details</span>\r\n <span *ngIf=\"select === 'review'\">Review & submit</span>\r\n </h1>\r\n <div [hidden]=\"select !== 'contact'\" class=\"card-toolbar\">\r\n <button (click)=\"addAltSpoc()\" class=\"btn btn-light-primary1 btn-sm\"><svg class=\"me-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"14\" viewBox=\"0 0 18 14\" fill=\"none\">\r\n <path\r\n d=\"M2.7 3.5C2.7 2.57174 3.07928 1.6815 3.75442 1.02513C4.42955 0.368749 5.34522 0 6.3 0C7.25478 0 8.17045 0.368749 8.84558 1.02513C9.52072 1.6815 9.9 2.57174 9.9 3.5C9.9 4.42826 9.52072 5.3185 8.84558 5.97487C8.17045 6.63125 7.25478 7 6.3 7C5.34522 7 4.42955 6.63125 3.75442 5.97487C3.07928 5.3185 2.7 4.42826 2.7 3.5ZM0 13.1879C0 10.4945 2.24437 8.3125 5.01469 8.3125H7.58531C10.3556 8.3125 12.6 10.4945 12.6 13.1879C12.6 13.6363 12.2259 14 11.7647 14H0.835312C0.374063 14 0 13.6363 0 13.1879ZM14.175 8.53125V6.78125H12.375C12.0009 6.78125 11.7 6.48867 11.7 6.125C11.7 5.76133 12.0009 5.46875 12.375 5.46875H14.175V3.71875C14.175 3.35508 14.4759 3.0625 14.85 3.0625C15.2241 3.0625 15.525 3.35508 15.525 3.71875V5.46875H17.325C17.6991 5.46875 18 5.76133 18 6.125C18 6.48867 17.6991 6.78125 17.325 6.78125H15.525V8.53125C15.525 8.89492 15.2241 9.1875 14.85 9.1875C14.4759 9.1875 14.175 8.89492 14.175 8.53125Z\"\r\n fill=\"#00A3FF\" />\r\n </svg>Add Alternate SPOC</button>\r\n </div>\r\n </div>\r\n <div class=\"card-body pt-1\">\r\n <form [formGroup]=\"storeForm\">\r\n <!-- Store Info Start -->\r\n <div [hidden]=\"select !== 'store_info'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeName\" class=\"form-label\">Store Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeName\" formControlName=\"storeName\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeName')?.invalid && storeForm.get('storeName')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeName')?.touched && storeForm.get('storeName')?.hasError('required')\">\r\n Store Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeCode\" class=\"form-label\">Store Code / Ref Code (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"storeCode\" formControlName=\"storeCode\">\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"businessType\" class=\"form-label\">Business Type</label>\r\n <select class=\"form-select\" id=\"businessType\" formControlName=\"businessType\">\r\n <option value=\"COCO\">COCO</option>\r\n <option value=\"COFO\">COFO</option>\r\n <option value=\"FOFO\">FOFO</option>\r\n <option value=\"FOCO\">FOCO</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 col-lg-6 mb-5\">\r\n <label for=\"storeType\" class=\"form-label\">Store Type</label>\r\n <select class=\"form-select\" id=\"storeType\" formControlName=\"storeType_type\">\r\n <option value=\"High Street\">High Street</option>\r\n <option value=\"Mall Store\">Mall Store</option>\r\n <option value=\"Kiosk\">Kiosk</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-12 mb-5\" *ngIf=\"storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label for=\"mallName\" class=\"form-label\">Enter Mall Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"mallName\" formControlName=\"storeType_name\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('storeType_name')?.invalid && storeForm.get('storeType_name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('storeType_name')?.touched && storeForm.get('storeType_name')?.hasError('required')\">\r\n Mall Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"address\" class=\"form-label\">Address Line</label>\r\n <input type=\"text\" class=\"form-control\" id=\"address\" formControlName=\"address\" #placesRef=\"ngx-places\" ngx-gp-autocomplete (onAddressChange)=\"handleAddressChange($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('address')?.invalid && storeForm.get('address')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('address')?.touched && storeForm.get('address')?.hasError('required')\">\r\n Address is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"country\" class=\"form-label\">Country</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"country\" formControlName=\"country\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('country')?.invalid && storeForm.get('country')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('country')?.touched && storeForm.get('country')?.hasError('required')\">\r\n Country is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"state\" class=\"form-label\">State</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"state\" formControlName=\"state\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('state')?.invalid && storeForm.get('state')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('state')?.touched && storeForm.get('state')?.hasError('required')\">\r\n State is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"city\" class=\"form-label\">City / Town</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"city\" formControlName=\"city\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('city')?.invalid && storeForm.get('city')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('city')?.touched && storeForm.get('city')?.hasError('required')\">\r\n City is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"pincode\" class=\"form-label\">Pin / Zip Code</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"pincode\" formControlName=\"pincode\" maxlength=\"6\" minlength=\"6\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('pincode')?.invalid && storeForm.get('pincode')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('pincode')?.touched && storeForm.get('pincode')?.hasError('required')\">\r\n Pincode is required.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\"\r\n (click)=\"goToConfiguration()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Info End -->\r\n\r\n <!-- Store Configuration Start -->\r\n <div [hidden]=\"select !== 'config'\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"timeZone\" class=\"form-label\">Time Zone</label>\r\n <!-- <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"timeZone\" formControlName=\"timeZone\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('timeZone')?.invalid && storeForm.get('timeZone')?.touched}\"> -->\r\n <select class=\"form-select\" id=\"timeZone\" formControlName=\"timeZone\">\r\n <option *ngFor=\"let timezone of timezones\" [value]=\"timezone\">{{ timezone }}</option>\r\n </select>\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('timeZone')?.touched && storeForm.get('timeZone')?.hasError('required')\">\r\n Time Zone is required.\r\n </small>\r\n </div>\r\n <!-- <div class=\"col-md-6 mb-5\">\r\n <label for=\"noOfCameras\" class=\"form-label\">No of Cameras</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"noOfCameras\" formControlName=\"cameras\" (keypress)=\"omit_special_char($event)\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('cameras')?.invalid && storeForm.get('cameras')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('cameras')?.touched && storeForm.get('cameras')?.hasError('required')\">\r\n No of Cameras is required.\r\n </small>\r\n </div> -->\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeOpenTime\" class=\"form-label\">Store Open Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeOpenTime\" formControlName=\"open\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('open')?.invalid && storeForm.get('open')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('open')?.touched && storeForm.get('open')?.hasError('required')\">\r\n Store Open Time is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"storeCloseTime\" class=\"form-label\">Store Close Time</label>\r\n <input autocomplete=\"off\" type=\"time\" class=\"form-control\" id=\"storeCloseTime\" formControlName=\"close\"\r\n [ngClass]=\"{ 'is-invalid':storeForm.get('close')?.invalid && storeForm.get('close')?.touched || storeForm.hasError('invalidTimeRange')}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"storeForm.get('close')?.touched && storeForm.get('close')?.hasError('required')\">\r\n Store Close Time is required.\r\n </small>\r\n <small class=\"my-2\" *ngIf=\"storeForm.hasError('invalidTimeRange') && (storeForm.get('open')?.touched || storeForm.get('close')?.touched)\">\r\n Opening time must be before closing time.\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row mt-20\">\r\n <div class=\"col-12 text-end mt-15\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToContact()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Configuration End -->\r\n\r\n <!-- Store Contact Start -->\r\n <div [hidden]=\"select !== 'contact'\">\r\n <div class=\"row\">\r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spocDetail of getspocDetailsControls(); let i = index\" [formGroupName]=\"i\">\r\n <div *ngIf=\"i!==0\" class=\"d-flex justify-content-between align-items-center my-6\">\r\n <ng-container >\r\n <span class=\"fw-bold fs-4\">Alternate SPOC {{i}}</span>\r\n <span (click)=\"delAltSpoc()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2250_30650)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M12.5 13.9998H14.1667M14.1667 13.9998H27.5M14.1667 13.9998V25.6665C14.1667 26.1085 14.3423 26.5325 14.6548 26.845C14.9674 27.1576 15.3913 27.3332 15.8333 27.3332H24.1667C24.6087 27.3332 25.0326 27.1576 25.3452 26.845C25.6577 26.5325 25.8333 26.1085 25.8333 25.6665V13.9998H14.1667ZM16.6667 13.9998V12.3332C16.6667 11.8911 16.8423 11.4672 17.1548 11.1547C17.4674 10.8421 17.8913 10.6665 18.3333 10.6665H21.6667C22.1087 10.6665 22.5326 10.8421 22.8452 11.1547C23.1577 11.4672 23.3333 11.8911 23.3333 12.3332V13.9998M18.3333 18.1665V23.1665M21.6667 18.1665V23.1665\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2250_30650\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2250_30650\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2250_30650\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactName\" class=\"form-label\">Name</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactName\" formControlName=\"name\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('name')?.invalid && spocDetail.get('name')?.touched}\">\r\n <small class=\"invalid-feedback\"\r\n *ngIf=\"spocDetail.get('name')?.touched && spocDetail.get('name')?.hasError('required')\">\r\n Name is required.\r\n </small>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactEmail\" class=\"form-label\">Email</label>\r\n <input autocomplete=\"off\" type=\"email\" class=\"form-control\" id=\"contactEmail\" formControlName=\"email\"\r\n pattern=\"^([a-zA-Z0-9_\\-\\.]+)@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-zA-Z]{2,3})$\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('email')?.invalid && spocDetail.get('email')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('email')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('required')\">\r\n Email is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('minlength')\">\r\n Email must be at least 3 characters long.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('email')?.hasError('maxlength')\">\r\n Email must be not more than 100 characters long.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"contactNumber\" class=\"form-label\">Contact Number</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"contactNumber\" minlength=\"10\" maxlength=\"13\"\r\n (keypress)=\"omit_special_char($event)\" formControlName=\"contact\"\r\n [ngClass]=\"{ 'is-invalid':spocDetail.get('contact')?.invalid && spocDetail.get('contact')?.touched}\">\r\n <ng-container *ngIf=\"spocDetail.get('contact')?.touched\">\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('required')\">\r\n Contact is required.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('minlength')\">\r\n Contact must be at least 10 digits.\r\n </small>\r\n <small class=\"invalid-feedback\" *ngIf=\"spocDetail.get('contact')?.hasError('maxlength')\">\r\n Contact must be not more than 13 digits.\r\n </small>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-md-6 mb-5\">\r\n <label for=\"designation\" class=\"form-label\">Designation (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"designation\" formControlName=\"designation\">\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <div class=\"col-md-12 mb-5\">\r\n <h1 class=\"sub-head\">Enter Store Connection Details</h1>\r\n </div>\r\n <div class=\"col-md-12 mb-5\">\r\n <label for=\"anyDeskID\" class=\"form-label\">AnyDesk ID / TeamViewer ID (optional)</label>\r\n <input autocomplete=\"off\" type=\"text\" class=\"form-control\" id=\"anyDeskID\"\r\n formControlName=\"storeConnectionId\">\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-12 text-end\">\r\n <button type=\"button\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\" (click)=\"navigateToAddStore()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"goToReview()\">Next</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Store Contact End -->\r\n\r\n <!-- Review & Submit Start -->\r\n <div [hidden]=\"select !== 'review'\">\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Info\r\n </div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeName')?.value ?\r\n storeForm.get('storeName')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Code</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('storeCode')?.value ?\r\n storeForm.get('storeCode')?.value: 'NA'}}</span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Business Type</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">\r\n {{storeForm.get('businessType')?.value ? storeForm.get('businessType')?.value :\r\n 'NA'}} </span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Type\r\n <!-- <i data-bs-toggle=\"tooltip\"\r\n title=\"Phone number must be active\" class=\"fas fa-exclamation-circle ms-1 fs-7\"></i> -->\r\n </label>\r\n <div class=\"col-lg-9 d-flex align-items-center\">\r\n <span\r\n class=\"fw-bolder fs-6 me-2 text-review-val\">{{storeForm.get('storeType_type')?.value\r\n ? storeForm.get('storeType_type')?.value : 'NA'}}</span>\r\n <!-- <span class=\"badge badge-success\">Verified</span> -->\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\"\r\n *ngIf=\"storeForm.get('storeType_type')?.value && storeForm.get('storeType_type')?.value === 'Mall Store'\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\"> Mall Name</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('storeType_name')?.value\r\n ? storeForm.get('storeType_name')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Address</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">\r\n <ng-container>\r\n {{storeForm.get('address')?.value ? storeForm.get('address')?.value : 'NA'}}\r\n </ng-container>\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row mb-10\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Allow Changes</label>\r\n <div class=\"col-lg-9\"><span class=\"fw-bold fs-6\">Yes</span></div>\r\n </div> -->\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Store\r\n Configuration</div>\r\n <div class=\"card-body p-9\">\r\n\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Time Zone</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('timeZone')?.value ?\r\n storeForm.get('timeZone')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n <!-- <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">No of Cameras</label>\r\n <div class=\"col-lg-9 fv-row\"><span\r\n class=\"fw-bold fs-6 text-review-val\">{{storeForm.get('cameras')?.value ?\r\n storeForm.get('cameras')?.value : 'NA'}}</span>\r\n </div>\r\n </div> -->\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Open Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bold fs-6 text-review-val text-hover-primary\">{{storeForm.get('open')?.value\r\n ? storeForm.get('open')?.value : 'NA'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"row mb-7\">\r\n <label class=\"col-lg-3 fw-bold text-muted-review\">Store Close Time</label>\r\n <div class=\"col-lg-9\"><span\r\n class=\"fw-bolder fs-6 text-review-val\">{{storeForm.get('close')?.value ?\r\n storeForm.get('close')?.value : 'NA'}}</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"fs-4 fw-bold text-hover-primary sub-title text-gray-600 m-0 cursor-pointer\">Contact\r\n Details</div>\r\n <div class=\"card-body row px-9 pt-3 pb-4\">\r\n <div class=\"table-responsive col-md-12 col-lg-12 col-xl-9 col-xxl-8\">\r\n <table class=\"table align-middle gy-6\">\r\n <tbody class=\"fs-6 fw-bold\"> \r\n <ng-container formArrayName=\"spocDetails\">\r\n <ng-container *ngFor=\"let spoc of getspocDetailsControls();let i=index;\">\r\n <tr>\r\n <td>Spoc {{i+1}}</td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path\r\n d=\"M15 15.75V14.25C15 13.4544 14.6839 12.6913 14.1213 12.1287C13.5587 11.5661 12.7956 11.25 12 11.25H6C5.20435 11.25 4.44129 11.5661 3.87868 12.1287C3.31607 12.6913 3 13.4544 3 14.25V15.75M12 5.25C12 6.90685 10.6569 8.25 9 8.25C7.34315 8.25 6 6.90685 6 5.25C6 3.59315 7.34315 2.25 9 2.25C10.6569 2.25 12 3.59315 12 5.25Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.name ?\r\n getspocDetailsValues(i)?.name : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80373)\">\r\n <path\r\n d=\"M12 6.00002V9.75002C12 10.3468 12.2371 10.9191 12.659 11.341C13.081 11.763 13.6533 12 14.25 12C14.8467 12 15.419 11.763 15.841 11.341C16.263 10.9191 16.5 10.3468 16.5 9.75002V9.00002C16.4999 7.30729 15.9272 5.66438 14.875 4.33842C13.8227 3.01246 12.3529 2.08144 10.7045 1.69675C9.05605 1.31205 7.32596 1.4963 5.79552 2.21955C4.26508 2.94279 3.02431 4.16249 2.27495 5.68032C1.5256 7.19814 1.31173 8.92483 1.66813 10.5796C2.02453 12.2344 2.93024 13.7199 4.23798 14.7947C5.54572 15.8695 7.17858 16.4703 8.87106 16.4994C10.5635 16.5285 12.2161 15.9842 13.56 14.955M12 9.00002C12 10.6569 10.6569 12 9.00001 12C7.34315 12 6.00001 10.6569 6.00001 9.00002C6.00001 7.34317 7.34315 6.00002 9.00001 6.00002C10.6569 6.00002 12 7.34317 12 9.00002Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80373\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.email ?\r\n getspocDetailsValues(i)?.email : 'NA' }}</span></td>\r\n <td><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1_80376)\">\r\n <path\r\n d=\"M16.5001 12.6901V14.9401C16.5009 15.1489 16.4581 15.3557 16.3745 15.5471C16.2908 15.7385 16.168 15.9103 16.0141 16.0515C15.8602 16.1927 15.6785 16.3002 15.4806 16.3671C15.2828 16.434 15.0731 16.4589 14.8651 16.4401C12.5572 16.1893 10.3403 15.4007 8.39257 14.1376C6.58044 12.9861 5.04407 11.4497 3.89257 9.63757C2.62506 7.68098 1.83625 5.45332 1.59007 3.13507C1.57133 2.92767 1.59598 2.71864 1.66245 2.52129C1.72892 2.32394 1.83575 2.14259 1.97615 1.98879C2.11654 1.83499 2.28743 1.7121 2.47792 1.62796C2.6684 1.54382 2.87433 1.50027 3.08257 1.50007H5.33257C5.69655 1.49649 6.04942 1.62538 6.32539 1.86272C6.60137 2.10006 6.78163 2.42966 6.83257 2.79007C6.92754 3.51012 7.10366 4.21712 7.35757 4.89757C7.45848 5.16602 7.48032 5.45776 7.4205 5.73823C7.36069 6.01871 7.22172 6.27616 7.02007 6.48007L6.06757 7.43257C7.13524 9.31023 8.68991 10.8649 10.5676 11.9326L11.5201 10.9801C11.724 10.7784 11.9814 10.6395 12.2619 10.5796C12.5424 10.5198 12.8341 10.5417 13.1026 10.6426C13.783 10.8965 14.49 11.0726 15.2101 11.1676C15.5744 11.219 15.9071 11.4025 16.145 11.6832C16.3828 11.9639 16.5092 12.3223 16.5001 12.6901Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1_80376\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">{{getspocDetailsValues(i)?.contact ?\r\n getspocDetailsValues(i)?.contact : 'NA' }}</span></td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n <tr>\r\n <td>AnyDesk ID\r\n <td>\r\n <span class=\"ms-2\">{{storeForm.get('storeConnectionId')?.value ?\r\n storeForm.get('storeConnectionId')?.value : 'NA' }}</span>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"text-end\">\r\n <button type=\"button\" (click)=\"goToStoreInfo()\"\r\n class=\"btn btn-default mx-3 btn-outline btn-outline-default rounded-3\">Edit</button>\r\n <button type=\"button\" [disabled]=\"storeForm.invalid\" (click)=\"onSubmit()\"\r\n class=\"btn btn-primary\">Submit</button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Review & Submit End -->\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".kiwi{fill:#344054}.kiwi.active{fill:#009bf3}.menu-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:16px!important;font-weight:500!important;line-height:24px}.menu-state-bg .menu-item .menu-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:8px 16px}.menu-state-title-primary .menu-item .menu-link.active .menu-title{color:var(--Primary-700, #009BF3)!important}.sub-title{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:18px!important;font-style:normal;font-weight:500!important;line-height:28px}.text-muted-review{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.text-review-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px}.align-middle{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:500!important;line-height:20px}td{padding:0!important}.invalid-feedback,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}::ng-deep .swal2-popup.swal2-toast .swal2-icon{grid-column:1;grid-row:1/99;align-self:center;min-width:2em;height:0em;margin:0 .5em 0 0}::ng-deep .listitem{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.5rem 1rem;background-color:#f3f6f9;margin-top:.75rem;border-radius:.42rem}::ng-deep .toasttitile{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}::ng-deep .list{overflow-y:auto}::ng-deep .listitemlabel{font-size:13px!important;font-weight:600;font-family:Inter;color:#7e8299}::ng-deep .swal2-container{padding:.4em!important}::ng-deep .swal2-icon{border:1px solid white!important}::ng-deep body.swal2-toast-shown .swal2-container{width:500px!important}::ng-deep .swal2-popup.swal2-toast{border-left:4px solid #009EF7}::ng-deep .swal2-popup.swal2-toast .swal2-title{margin:9px 5px auto!important}::ng-deep .label{color:#3f4254;font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:140%}.spocArea{overflow-y:scroll;max-height:60vh;padding:0;margin:0}::ng-deep .spocArea::-webkit-scrollbar-thumb{-webkit-border-radius:10px!important;border-radius:10px!important;background:var(--gray-100, #eaeaea)!important;height:50px!important}::ng-deep .spocArea::-webkit-scrollbar{width:10px!important}::ng-deep .spocArea::-webkit-scrollbar-track{background:none!important;box-shadow:none!important}.sub-head{color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:28px}.form-label{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.btn-primary{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;font-weight:600;line-height:24px}.btn-outline{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;font-weight:600!important;line-height:24px}.btn-light-primary1{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF)!important;background:var(--Primary-50, #EAF8FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:600!important;line-height:20px}\n"] }]
2211
2289
  }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: StoresService }, { type: i3.ToastService }, { type: i4.Router }], propDecorators: { placesRef: [{
2212
2290
  type: ViewChild,
2213
2291
  args: ["ngxPlaces"]