tango-app-ui-analyse-zone 3.7.1-beta.4-demo1 → 3.7.1-beta.5

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 (12) hide show
  1. package/esm2022/lib/components/overallcards/overallcards.component.mjs +28 -9
  2. package/esm2022/lib/components/segmentation/segmentation.component.mjs +46 -19
  3. package/esm2022/lib/components/services/zone.service.mjs +11 -1
  4. package/esm2022/lib/components/zone-concentration/zone-concentration.component.mjs +4 -3
  5. package/esm2022/lib/components/zone-v2/customer-journey/customer-journey.component.mjs +6 -7
  6. package/esm2022/lib/components/zone-v2/store-heatmap/store-heatmap.component.mjs +4 -3
  7. package/fesm2022/tango-app-ui-analyse-zone.mjs +778 -722
  8. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  9. package/lib/components/segmentation/segmentation.component.d.ts +2 -0
  10. package/lib/components/services/zone.service.d.ts +4 -0
  11. package/lib/components/zone-v2/customer-journey/customer-journey.component.d.ts +2 -2
  12. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Component, Input, ElementRef, ViewChild, EventEmitter, Output, forwardRef, HostListener, NgModule } from '@angular/core';
3
- import { BehaviorSubject, takeUntil, Subject, throwError, debounceTime, skip as skip$1 } from 'rxjs';
3
+ import { BehaviorSubject, takeUntil, Subject, throwError, debounceTime, startWith as startWith$1, skip as skip$1 } from 'rxjs';
4
4
  import * as i2 from 'tango-app-ui-global';
5
5
  import * as FileSaver from 'file-saver';
6
6
  import * as XLSX from 'xlsx';
@@ -9,7 +9,7 @@ import * as i6 from '@angular/common';
9
9
  import { CommonModule } from '@angular/common';
10
10
  import * as am5 from '@amcharts/amcharts5';
11
11
  import * as am5percent from '@amcharts/amcharts5/percent';
12
- import { takeUntil as takeUntil$1, skip, debounceTime as debounceTime$1 } from 'rxjs/operators';
12
+ import { takeUntil as takeUntil$1, startWith, skip, debounceTime as debounceTime$1 } from 'rxjs/operators';
13
13
  import * as i3 from 'tango-app-ui-shared';
14
14
  import { CommonSharedModule } from 'tango-app-ui-shared';
15
15
  import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
@@ -153,6 +153,16 @@ class ZoneService {
153
153
  handleError(error) {
154
154
  return throwError(() => new Error("Something bad happened; please try again later"));
155
155
  }
156
+ zoneNameSubject = new BehaviorSubject(null);
157
+ setData(zoneName) {
158
+ this.zoneNameSubject.next(zoneName);
159
+ }
160
+ getData() {
161
+ return this.zoneNameSubject.value; // current value
162
+ }
163
+ getData$() {
164
+ return this.zoneNameSubject.asObservable(); // stream to subscribe
165
+ }
156
166
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, deps: [{ token: i1.HttpClient }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
157
167
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneService, providedIn: 'root' });
158
168
  }
@@ -191,20 +201,39 @@ class OverallcardsComponent {
191
201
  .pipe(takeUntil$1(this.destroy$), debounceTime(300))
192
202
  .subscribe((data) => {
193
203
  this.headerData = data;
194
- this.getCardData();
204
+ // --- ZoneService.getData$() subscription ---
205
+ this.ZoneService.getData$()
206
+ .pipe(startWith(null), // 👈 fallback seed emission
207
+ skip(1), // skip service's initial seed (keep fallback)
208
+ takeUntil$1(this.destroy$))
209
+ .subscribe((res) => {
210
+ if (res) {
211
+ this.zoneName = res;
212
+ this.getCardData();
213
+ }
214
+ else {
215
+ // fallback if no emission
216
+ this.getCardData();
217
+ }
218
+ });
219
+ // --- Client data from localStorage ---
195
220
  setTimeout(() => {
196
221
  const clientData = JSON.parse(localStorage.getItem("client-details") || "{}");
197
222
  this.clientData = clientData;
198
223
  }, 100);
199
224
  this.changeDetector.detectChanges();
200
- // Check if ZoneService is defined and subscribe only once
225
+ // --- Zone segmentation subscription ---
201
226
  if (this.ZoneService?.zoneSegmentation) {
202
227
  this.ZoneService.zoneSegmentation
203
- .pipe(skip(1), takeUntil$1(this.destroy$)) // Skip the initial emission
228
+ .pipe(startWith(null), // 👈 fallback
229
+ skip(1), // skip BehaviorSubject initial emission
230
+ takeUntil$1(this.destroy$))
204
231
  .subscribe((zoneData) => {
205
- this.zoneName = zoneData;
206
- this.getZoneSegmentation();
207
- this.getCardData();
232
+ if (zoneData) {
233
+ this.zoneName = zoneData;
234
+ this.getZoneSegmentation();
235
+ this.getCardData();
236
+ }
208
237
  });
209
238
  }
210
239
  });
@@ -284,7 +313,7 @@ class OverallcardsComponent {
284
313
  storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
285
314
  // storeId: ["11-253", "11-511","11-1176"],
286
315
  clientId: this.headerData.client,
287
- zoneName: this.zoneName
316
+ zoneName: this.zoneName ? this.zoneName : 'Overall Store',
288
317
  };
289
318
  this.ZoneService.getCardData(requestData).pipe(takeUntil$1(this.destroy$)).subscribe((response) => {
290
319
  this.cardDataLoading = false;
@@ -1079,6 +1108,7 @@ class ZoneConcentrationComponent {
1079
1108
  this.zoneConcentrationData = response.data.zoneConcentrationData;
1080
1109
  // this.zoneName = response.data.zoneConcentrationData[0].zoneName;
1081
1110
  this.zoneName = this.zoneConcentrationData.length ? this.zoneConcentrationData[0].zoneName : '';
1111
+ this.ZoneService.setData(this.zoneName);
1082
1112
  this.zonesummaryLoading = false;
1083
1113
  this.zonesummaryNoData = false;
1084
1114
  this.heatmapLoading = false;
@@ -1347,11 +1377,11 @@ class ZoneConcentrationComponent {
1347
1377
  }
1348
1378
  }
1349
1379
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneConcentrationComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: ZoneService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1350
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneConcentrationComponent, selector: "lib-zone-concentration", providers: [NgbCarouselConfig], viewQueries: [{ propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header ps-3 pe-1\">\r\n <h3 class=\"card-title align-items-start flex-column ms-1\">\r\n <span class=\"headtext\">Concentration Summary <span\r\n ngbTooltip=\"Summary of overall zones at the store\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></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\"\r\n 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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-2\" [disabled]=\"!zoneConcentrationData.length\">\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=\"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\" 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 </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap <span\r\n ngbTooltip=\"Density heatmap\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 mb-6\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone === 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone === 2 || periodzone === 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\" (slide)=\"onSlideChange($event)\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <button *ngIf=\"image?.downtime != null\" class=\"minsbadge position-absolute top-0 end-0 m-3 me-18\">\r\n <span class=\"minsbadgeprimary mt-2 mb-2 \">{{image.downtime}} mins<span class=\"ms-1\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 10\" fill=\"none\">\r\n <path d=\"M7.14063 0.000488281C7.79785 0.000488281 8.42578 0.135108 8.99902 0.379231C9.59375 0.632395 10.1289 1.0041 10.5771 1.46523C11.0244 1.92534 11.3857 2.47588 11.6318 3.0897C11.8691 3.67941 12 4.32538 12 5.00049C12 5.6766 11.8691 6.32257 11.6318 6.91228C11.3857 7.5241 11.0244 8.07463 10.5762 8.53575C10.1289 8.99587 9.59375 9.36758 8.99707 9.62074C8.42383 9.86487 7.7959 9.99949 7.13965 9.99949C6.48242 9.99949 5.85449 9.86487 5.28125 9.62074C4.68652 9.36758 4.15137 8.99587 3.7041 8.53575L3.70312 8.53475C3.25488 8.07363 2.89453 7.52309 2.64844 6.91228C2.57227 6.72241 2.50684 6.52751 2.45312 6.32759C2.55469 6.33764 2.6582 6.34266 2.7627 6.34266C2.96094 6.34266 3.1543 6.32458 3.34277 6.28942C3.37402 6.38586 3.4082 6.4813 3.44531 6.57473C3.64746 7.07704 3.94434 7.52912 4.31348 7.90887C4.68262 8.28862 5.12305 8.59402 5.61035 8.80198C6.08008 9.0019 6.59668 9.11341 7.13965 9.11341C7.68262 9.11341 8.19824 9.0029 8.66895 8.80198C9.15723 8.59402 9.59668 8.28862 9.96582 7.90887C10.335 7.52912 10.6318 7.07604 10.834 6.57473C11.0283 6.09151 11.1367 5.56006 11.1367 5.00149C11.1367 4.44292 11.0293 3.91248 10.834 3.42826C10.6318 2.92595 10.335 2.47387 9.96582 2.09412C9.59668 1.71437 9.15625 1.40897 8.66895 1.20101C8.19922 1.00109 7.68262 0.889578 7.13965 0.889578C6.59668 0.889578 6.08106 1.00009 5.61035 1.20101C5.56836 1.21909 5.52637 1.23818 5.48535 1.25727C5.3252 0.998077 5.13184 0.762996 4.91016 0.559058C5.03125 0.494762 5.15527 0.435489 5.28125 0.38124C5.85645 0.135108 6.4834 0.000488281 7.14063 0.000488281ZM6.58301 2.62355C6.58301 2.50099 6.63184 2.39048 6.70898 2.31011C6.78711 2.22974 6.89453 2.18052 7.01367 2.18052C7.13281 2.18052 7.24023 2.22974 7.31836 2.31011C7.39648 2.39048 7.44434 2.50099 7.44434 2.62355V4.95629L9.13867 5.99004C9.24023 6.05233 9.30859 6.15178 9.33594 6.26129C9.36328 6.37079 9.35059 6.49135 9.29004 6.59583V6.59683C9.22949 6.70131 9.13281 6.77164 9.02637 6.79977C8.91992 6.8279 8.80273 6.81484 8.70117 6.75255H8.7002L6.80469 5.59623C6.73926 5.55906 6.68555 5.50481 6.64648 5.44051C6.60645 5.3732 6.58301 5.29384 6.58301 5.20945V2.62355Z\" fill=\"#009BF3\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.63477 0.265717C4.08984 0.265717 5.26953 1.4793 5.26953 2.97618C5.26953 4.47307 4.08984 5.68665 2.63477 5.68665C1.17969 5.68665 0 4.47307 0 2.97618C0 1.4793 1.17969 0.265717 2.63477 0.265717ZM2.63477 4.53033L4.04883 2.73206H3.1709V1.77566H2.09863V2.73206H1.2207L2.63477 4.53033Z\" fill=\"#F04438\"/>\r\n </svg></span></span>\r\n </button>\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n 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 />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div></div>\r\n <div></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Trolley\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.trolleyRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Basket\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.basketRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;width:200px;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.minsbadge{border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d;display:flex;align-items:center;gap:4px;z-index:1;font-size:12px}.minsbadgeprimary{padding:4px 15px;justify-content:center;align-items:center;gap:4px;border-radius:16px!important;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
1380
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneConcentrationComponent, selector: "lib-zone-concentration", providers: [NgbCarouselConfig], viewQueries: [{ propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header ps-3 pe-1\">\r\n <h3 class=\"card-title align-items-start flex-column ms-1\">\r\n <span class=\"headtext\">Concentration Summary <span\r\n ngbTooltip=\"Summary of overall zones at the store\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></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\"\r\n 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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-2\" [disabled]=\"!zoneConcentrationData.length\">\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=\"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\" 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 </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap <span\r\n ngbTooltip=\"Density heatmap\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 mb-6\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone === 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone === 2 || periodzone === 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\" (slide)=\"onSlideChange($event)\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <button *ngIf=\"image?.downtime !== null\" class=\"minsbadge position-absolute top-0 end-0 m-3 me-18\">\r\n <span class=\"minsbadgeprimary mt-2 mb-2 \">{{image.downtime}} mins<span class=\"ms-1\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 10\" fill=\"none\">\r\n <path d=\"M7.14063 0.000488281C7.79785 0.000488281 8.42578 0.135108 8.99902 0.379231C9.59375 0.632395 10.1289 1.0041 10.5771 1.46523C11.0244 1.92534 11.3857 2.47588 11.6318 3.0897C11.8691 3.67941 12 4.32538 12 5.00049C12 5.6766 11.8691 6.32257 11.6318 6.91228C11.3857 7.5241 11.0244 8.07463 10.5762 8.53575C10.1289 8.99587 9.59375 9.36758 8.99707 9.62074C8.42383 9.86487 7.7959 9.99949 7.13965 9.99949C6.48242 9.99949 5.85449 9.86487 5.28125 9.62074C4.68652 9.36758 4.15137 8.99587 3.7041 8.53575L3.70312 8.53475C3.25488 8.07363 2.89453 7.52309 2.64844 6.91228C2.57227 6.72241 2.50684 6.52751 2.45312 6.32759C2.55469 6.33764 2.6582 6.34266 2.7627 6.34266C2.96094 6.34266 3.1543 6.32458 3.34277 6.28942C3.37402 6.38586 3.4082 6.4813 3.44531 6.57473C3.64746 7.07704 3.94434 7.52912 4.31348 7.90887C4.68262 8.28862 5.12305 8.59402 5.61035 8.80198C6.08008 9.0019 6.59668 9.11341 7.13965 9.11341C7.68262 9.11341 8.19824 9.0029 8.66895 8.80198C9.15723 8.59402 9.59668 8.28862 9.96582 7.90887C10.335 7.52912 10.6318 7.07604 10.834 6.57473C11.0283 6.09151 11.1367 5.56006 11.1367 5.00149C11.1367 4.44292 11.0293 3.91248 10.834 3.42826C10.6318 2.92595 10.335 2.47387 9.96582 2.09412C9.59668 1.71437 9.15625 1.40897 8.66895 1.20101C8.19922 1.00109 7.68262 0.889578 7.13965 0.889578C6.59668 0.889578 6.08106 1.00009 5.61035 1.20101C5.56836 1.21909 5.52637 1.23818 5.48535 1.25727C5.3252 0.998077 5.13184 0.762996 4.91016 0.559058C5.03125 0.494762 5.15527 0.435489 5.28125 0.38124C5.85645 0.135108 6.4834 0.000488281 7.14063 0.000488281ZM6.58301 2.62355C6.58301 2.50099 6.63184 2.39048 6.70898 2.31011C6.78711 2.22974 6.89453 2.18052 7.01367 2.18052C7.13281 2.18052 7.24023 2.22974 7.31836 2.31011C7.39648 2.39048 7.44434 2.50099 7.44434 2.62355V4.95629L9.13867 5.99004C9.24023 6.05233 9.30859 6.15178 9.33594 6.26129C9.36328 6.37079 9.35059 6.49135 9.29004 6.59583V6.59683C9.22949 6.70131 9.13281 6.77164 9.02637 6.79977C8.91992 6.8279 8.80273 6.81484 8.70117 6.75255H8.7002L6.80469 5.59623C6.73926 5.55906 6.68555 5.50481 6.64648 5.44051C6.60645 5.3732 6.58301 5.29384 6.58301 5.20945V2.62355Z\" fill=\"#009BF3\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.63477 0.265717C4.08984 0.265717 5.26953 1.4793 5.26953 2.97618C5.26953 4.47307 4.08984 5.68665 2.63477 5.68665C1.17969 5.68665 0 4.47307 0 2.97618C0 1.4793 1.17969 0.265717 2.63477 0.265717ZM2.63477 4.53033L4.04883 2.73206H3.1709V1.77566H2.09863V2.73206H1.2207L2.63477 4.53033Z\" fill=\"#F04438\"/>\r\n </svg></span></span>\r\n </button>\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n 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 />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div></div>\r\n <div></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Trolley\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.trolleyRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Basket\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.basketRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;width:200px;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.minsbadge{border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d;display:flex;align-items:center;gap:4px;z-index:1;font-size:12px}.minsbadgeprimary{padding:4px 15px;justify-content:center;align-items:center;gap:4px;border-radius:16px!important;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
1351
1381
  }
1352
1382
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneConcentrationComponent, decorators: [{
1353
1383
  type: Component,
1354
- args: [{ selector: 'lib-zone-concentration', providers: [NgbCarouselConfig], template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header ps-3 pe-1\">\r\n <h3 class=\"card-title align-items-start flex-column ms-1\">\r\n <span class=\"headtext\">Concentration Summary <span\r\n ngbTooltip=\"Summary of overall zones at the store\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></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\"\r\n 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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-2\" [disabled]=\"!zoneConcentrationData.length\">\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=\"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\" 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 </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap <span\r\n ngbTooltip=\"Density heatmap\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 mb-6\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone === 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone === 2 || periodzone === 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\" (slide)=\"onSlideChange($event)\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <button *ngIf=\"image?.downtime != null\" class=\"minsbadge position-absolute top-0 end-0 m-3 me-18\">\r\n <span class=\"minsbadgeprimary mt-2 mb-2 \">{{image.downtime}} mins<span class=\"ms-1\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 10\" fill=\"none\">\r\n <path d=\"M7.14063 0.000488281C7.79785 0.000488281 8.42578 0.135108 8.99902 0.379231C9.59375 0.632395 10.1289 1.0041 10.5771 1.46523C11.0244 1.92534 11.3857 2.47588 11.6318 3.0897C11.8691 3.67941 12 4.32538 12 5.00049C12 5.6766 11.8691 6.32257 11.6318 6.91228C11.3857 7.5241 11.0244 8.07463 10.5762 8.53575C10.1289 8.99587 9.59375 9.36758 8.99707 9.62074C8.42383 9.86487 7.7959 9.99949 7.13965 9.99949C6.48242 9.99949 5.85449 9.86487 5.28125 9.62074C4.68652 9.36758 4.15137 8.99587 3.7041 8.53575L3.70312 8.53475C3.25488 8.07363 2.89453 7.52309 2.64844 6.91228C2.57227 6.72241 2.50684 6.52751 2.45312 6.32759C2.55469 6.33764 2.6582 6.34266 2.7627 6.34266C2.96094 6.34266 3.1543 6.32458 3.34277 6.28942C3.37402 6.38586 3.4082 6.4813 3.44531 6.57473C3.64746 7.07704 3.94434 7.52912 4.31348 7.90887C4.68262 8.28862 5.12305 8.59402 5.61035 8.80198C6.08008 9.0019 6.59668 9.11341 7.13965 9.11341C7.68262 9.11341 8.19824 9.0029 8.66895 8.80198C9.15723 8.59402 9.59668 8.28862 9.96582 7.90887C10.335 7.52912 10.6318 7.07604 10.834 6.57473C11.0283 6.09151 11.1367 5.56006 11.1367 5.00149C11.1367 4.44292 11.0293 3.91248 10.834 3.42826C10.6318 2.92595 10.335 2.47387 9.96582 2.09412C9.59668 1.71437 9.15625 1.40897 8.66895 1.20101C8.19922 1.00109 7.68262 0.889578 7.13965 0.889578C6.59668 0.889578 6.08106 1.00009 5.61035 1.20101C5.56836 1.21909 5.52637 1.23818 5.48535 1.25727C5.3252 0.998077 5.13184 0.762996 4.91016 0.559058C5.03125 0.494762 5.15527 0.435489 5.28125 0.38124C5.85645 0.135108 6.4834 0.000488281 7.14063 0.000488281ZM6.58301 2.62355C6.58301 2.50099 6.63184 2.39048 6.70898 2.31011C6.78711 2.22974 6.89453 2.18052 7.01367 2.18052C7.13281 2.18052 7.24023 2.22974 7.31836 2.31011C7.39648 2.39048 7.44434 2.50099 7.44434 2.62355V4.95629L9.13867 5.99004C9.24023 6.05233 9.30859 6.15178 9.33594 6.26129C9.36328 6.37079 9.35059 6.49135 9.29004 6.59583V6.59683C9.22949 6.70131 9.13281 6.77164 9.02637 6.79977C8.91992 6.8279 8.80273 6.81484 8.70117 6.75255H8.7002L6.80469 5.59623C6.73926 5.55906 6.68555 5.50481 6.64648 5.44051C6.60645 5.3732 6.58301 5.29384 6.58301 5.20945V2.62355Z\" fill=\"#009BF3\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.63477 0.265717C4.08984 0.265717 5.26953 1.4793 5.26953 2.97618C5.26953 4.47307 4.08984 5.68665 2.63477 5.68665C1.17969 5.68665 0 4.47307 0 2.97618C0 1.4793 1.17969 0.265717 2.63477 0.265717ZM2.63477 4.53033L4.04883 2.73206H3.1709V1.77566H2.09863V2.73206H1.2207L2.63477 4.53033Z\" fill=\"#F04438\"/>\r\n </svg></span></span>\r\n </button>\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n 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 />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div></div>\r\n <div></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Trolley\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.trolleyRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Basket\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.basketRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;width:200px;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.minsbadge{border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d;display:flex;align-items:center;gap:4px;z-index:1;font-size:12px}.minsbadgeprimary{padding:4px 15px;justify-content:center;align-items:center;gap:4px;border-radius:16px!important;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}\n"] }]
1384
+ args: [{ selector: 'lib-zone-concentration', providers: [NgbCarouselConfig], template: "<div class=\"card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-5 right-border my-2\">\r\n <div class=\"h-100\">\r\n <div class=\"card-header ps-3 pe-1\">\r\n <h3 class=\"card-title align-items-start flex-column ms-1\">\r\n <span class=\"headtext\">Concentration Summary <span\r\n ngbTooltip=\"Summary of overall zones at the store\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></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\"\r\n 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\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\" class=\"form-control ps-10 invoicesearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader ms-2\" [disabled]=\"!zoneConcentrationData.length\">\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=\"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\" 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 </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n \r\n <div class=\"table-container m-4\">\r\n <table class=\"table bottom-border\">\r\n <thead class=\"fixed-header\">\r\n <tr>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Footfall <br>(Actuals)\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n \r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Dwell Time <br>(Average)\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th>\r\n <div class=\"conc cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Concentration\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table-responsive\">\r\n <tr *ngFor=\"let zone of zoneConcentrationData\">\r\n <td>\r\n <div class=\"table-title-primary overallstore mb-2\">\r\n <span\r\n class=\"text-capitalize cursor-pointer\"><a (click)=\"onZoneClick(zone.zoneName)\">{{ zone.zoneName || '--' }}</a>\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.footfallCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ zone.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n {{ zone.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody> \r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Concentration Summary</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-7\">\r\n <div class=\"card-header border-0 p-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ zoneName || '' }} Concentration Heatmap <span\r\n ngbTooltip=\"Density heatmap\"\r\n placement=\"top\" triggers=\"mouseenter:mouseleave\"\r\n tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_3512_32868)\">\r\n <path d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\" stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_3512_32868\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg></span></span>\r\n </h3>\r\n\r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\"\r\n (click)=\"selectPlan('daily')\"\r\n [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\"\r\n (click)=\"selectPlan('weekly')\" [disabled]=\"disableWeek\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\"\r\n (click)=\"selectPlan('monthly')\" [disabled]=\"disableMonth\">\r\n Month\r\n </button>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-8 mb-6\">\r\n \r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone === 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"(periodzone === 2 || periodzone === 3) && !customOption\"\r\n \r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n \r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\" (slide)=\"onSlideChange($event)\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreData?.ImageURLs)\" [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <button *ngIf=\"image?.downtime !== null\" class=\"minsbadge position-absolute top-0 end-0 m-3 me-18\">\r\n <span class=\"minsbadgeprimary mt-2 mb-2 \">{{image.downtime}} mins<span class=\"ms-1\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 12 10\" fill=\"none\">\r\n <path d=\"M7.14063 0.000488281C7.79785 0.000488281 8.42578 0.135108 8.99902 0.379231C9.59375 0.632395 10.1289 1.0041 10.5771 1.46523C11.0244 1.92534 11.3857 2.47588 11.6318 3.0897C11.8691 3.67941 12 4.32538 12 5.00049C12 5.6766 11.8691 6.32257 11.6318 6.91228C11.3857 7.5241 11.0244 8.07463 10.5762 8.53575C10.1289 8.99587 9.59375 9.36758 8.99707 9.62074C8.42383 9.86487 7.7959 9.99949 7.13965 9.99949C6.48242 9.99949 5.85449 9.86487 5.28125 9.62074C4.68652 9.36758 4.15137 8.99587 3.7041 8.53575L3.70312 8.53475C3.25488 8.07363 2.89453 7.52309 2.64844 6.91228C2.57227 6.72241 2.50684 6.52751 2.45312 6.32759C2.55469 6.33764 2.6582 6.34266 2.7627 6.34266C2.96094 6.34266 3.1543 6.32458 3.34277 6.28942C3.37402 6.38586 3.4082 6.4813 3.44531 6.57473C3.64746 7.07704 3.94434 7.52912 4.31348 7.90887C4.68262 8.28862 5.12305 8.59402 5.61035 8.80198C6.08008 9.0019 6.59668 9.11341 7.13965 9.11341C7.68262 9.11341 8.19824 9.0029 8.66895 8.80198C9.15723 8.59402 9.59668 8.28862 9.96582 7.90887C10.335 7.52912 10.6318 7.07604 10.834 6.57473C11.0283 6.09151 11.1367 5.56006 11.1367 5.00149C11.1367 4.44292 11.0293 3.91248 10.834 3.42826C10.6318 2.92595 10.335 2.47387 9.96582 2.09412C9.59668 1.71437 9.15625 1.40897 8.66895 1.20101C8.19922 1.00109 7.68262 0.889578 7.13965 0.889578C6.59668 0.889578 6.08106 1.00009 5.61035 1.20101C5.56836 1.21909 5.52637 1.23818 5.48535 1.25727C5.3252 0.998077 5.13184 0.762996 4.91016 0.559058C5.03125 0.494762 5.15527 0.435489 5.28125 0.38124C5.85645 0.135108 6.4834 0.000488281 7.14063 0.000488281ZM6.58301 2.62355C6.58301 2.50099 6.63184 2.39048 6.70898 2.31011C6.78711 2.22974 6.89453 2.18052 7.01367 2.18052C7.13281 2.18052 7.24023 2.22974 7.31836 2.31011C7.39648 2.39048 7.44434 2.50099 7.44434 2.62355V4.95629L9.13867 5.99004C9.24023 6.05233 9.30859 6.15178 9.33594 6.26129C9.36328 6.37079 9.35059 6.49135 9.29004 6.59583V6.59683C9.22949 6.70131 9.13281 6.77164 9.02637 6.79977C8.91992 6.8279 8.80273 6.81484 8.70117 6.75255H8.7002L6.80469 5.59623C6.73926 5.55906 6.68555 5.50481 6.64648 5.44051C6.60645 5.3732 6.58301 5.29384 6.58301 5.20945V2.62355Z\" fill=\"#009BF3\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.63477 0.265717C4.08984 0.265717 5.26953 1.4793 5.26953 2.97618C5.26953 4.47307 4.08984 5.68665 2.63477 5.68665C1.17969 5.68665 0 4.47307 0 2.97618C0 1.4793 1.17969 0.265717 2.63477 0.265717ZM2.63477 4.53033L4.04883 2.73206H3.1709V1.77566H2.09863V2.73206H1.2207L2.63477 4.53033Z\" fill=\"#F04438\"/>\r\n </svg></span></span>\r\n </button>\r\n <a [href]=\"image.URL\" download><svg\r\n id=\"download-icon\"\r\n width=\"44\"\r\n height=\"44\"\r\n viewBox=\"0 0 44 44\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\"\r\n >\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\"\r\n stroke-width=\"1.67\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_3822_19479\"\r\n x=\"0\"\r\n y=\"0\"\r\n width=\"44\"\r\n height=\"44\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\"\r\n >\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\"\r\n result=\"hardAlpha\"\r\n />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix\r\n 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 />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-4\">\r\n <div class=\"body me-4\">\r\n <div class=\"pt-10 m-6\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Total Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{overallStoreData?.totalFootfall?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Concentration %\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <span class=\"table-title\">{{ roundof(overallStoreData?.concentrationRate) || '0' }} %</span> -->\r\n <span class=\"table-title\">{{ overallStoreData?.concentrationRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Bounced Footfall\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.bouncedCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div></div>\r\n <div></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client !== '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Engagers\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.engagersCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"borderdashed my-4\"></div>\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Avg. Dwell Time\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.avgDwellTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }} mins\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Age Range\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.ageRange?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Male Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.maleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"storeIdarray[0] !=='459-2' && storeIdarray[0] !=='459-4'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Female Rate\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.femaleRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Trolley\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.trolleyRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n <!-- <div *ngIf=\"headerData?.client == '459'\" class=\"borderdashed my-4\"></div>\r\n <div *ngIf=\"headerData?.client == '459'\" class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">\r\n Basket\r\n </div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">\r\n {{ overallStoreData?.basketRate?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}%\r\n </span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;width:200px;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.exportwidth{width:40%}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:70px!important;align-items:center;gap:12px;align-self:stretch}table tr{vertical-align:middle}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-4%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:350px}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:10%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.minsbadge{border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d;display:flex;align-items:center;gap:4px;z-index:1;font-size:12px}.minsbadgeprimary{padding:4px 15px;justify-content:center;align-items:center;gap:4px;border-radius:16px!important;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}\n"] }]
1355
1385
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }], propDecorators: { dateList: [{
1356
1386
  type: ViewChild,
1357
1387
  args: ['dateList', { read: ElementRef }]
@@ -1389,27 +1419,54 @@ class SegmentationComponent {
1389
1419
  .pipe(takeUntil(this.destroy$), debounceTime(300))
1390
1420
  .subscribe((data) => {
1391
1421
  this.headerData = data;
1392
- if (this.headerData?.client === '430') {
1393
- this.getCardData1();
1394
- this.getCardData3();
1395
- this.getCardData();
1396
- this.getCardData4();
1397
- this.getCardData5();
1398
- if (this.ZoneService?.zoneSegmentation) {
1399
- this.ZoneService.zoneSegmentation
1400
- .pipe(skip$1(1), takeUntil(this.destroy$)) // Skip the initial emission
1401
- .subscribe((zoneData) => {
1402
- this.zoneName = zoneData;
1403
- this.getCardData4();
1404
- this.getCardData5();
1422
+ switch (this.headerData?.client) {
1423
+ case '430':
1424
+ // First source: getData$
1425
+ this.ZoneService.getData$()
1426
+ .pipe(startWith$1(null), // 👈 fallback seed emission
1427
+ skip$1(1), // skip service's initial seed (keep fallback)
1428
+ takeUntil(this.destroy$))
1429
+ .subscribe((res) => {
1430
+ if (res) {
1431
+ this.zoneName = res;
1432
+ this.loadClient430Data();
1433
+ }
1434
+ else {
1435
+ this.loadClient430Data();
1436
+ }
1405
1437
  });
1406
- }
1407
- }
1408
- else if (this.headerData?.client === '463') {
1409
- this.getCardData();
1438
+ // Second source: zoneSegmentation
1439
+ if (this.ZoneService?.zoneSegmentation) {
1440
+ this.ZoneService.zoneSegmentation
1441
+ .pipe(skip$1(1), takeUntil(this.destroy$))
1442
+ .subscribe((zoneData) => {
1443
+ this.zoneName = zoneData;
1444
+ this.getCardData4();
1445
+ this.getCardData5();
1446
+ });
1447
+ }
1448
+ break;
1449
+ case '463':
1450
+ this.loadClient463Data();
1451
+ break;
1452
+ default:
1453
+ // handle other clients if needed
1454
+ break;
1410
1455
  }
1411
1456
  });
1412
1457
  }
1458
+ // Helper for client=430
1459
+ loadClient430Data() {
1460
+ this.getCardData1();
1461
+ this.getCardData3();
1462
+ this.getCardData();
1463
+ this.getCardData4();
1464
+ this.getCardData5();
1465
+ }
1466
+ // Helper for client=463
1467
+ loadClient463Data() {
1468
+ this.getCardData();
1469
+ }
1413
1470
  root;
1414
1471
  ngOnDestroy() {
1415
1472
  if (this.root) {
@@ -2472,214 +2529,582 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2472
2529
  type: Input
2473
2530
  }] } });
2474
2531
 
2475
- class StoreHeatmapComponent {
2476
- zone;
2477
- modalService;
2478
- fb;
2532
+ class ImageDirectoryViewComponent {
2479
2533
  Zonev2Service;
2480
- changeDetector;
2481
- toast;
2482
- gs;
2483
- elementRef;
2484
- route;
2485
- carousel;
2486
- destroy$ = new Subject();
2487
- selectedTab = '';
2534
+ cd;
2535
+ Imagedata;
2536
+ processType;
2537
+ footfallDate;
2538
+ storeName;
2539
+ storeId;
2488
2540
  headerData;
2489
- dayjs = dayjs;
2490
- disableDay = false;
2491
- disableWeek = false;
2492
- disableMonth = false;
2493
- type = 'daily';
2494
- heatmapLoading = true;
2495
- heatmapNoData = false;
2496
- zoneName = '';
2497
- selectedDate = '';
2498
- overallStoreData = {};
2499
- overallStoreconcentrationData = {};
2500
- // zoneConcentrationData: any[] = [];
2501
- availableZones = [];
2502
- overallStoreConcentrationDates = [];
2503
- periodzone = 1;
2504
- customOption = false;
2505
- searchInput = "";
2506
- sortColumName = '';
2507
- sortBy = 1;
2508
- sortDirection = -1;
2509
- genderAnalysis = [];
2510
- ageAnalysis = [];
2511
- cardDataLoading = true;
2512
- cardNoData = false;
2513
- genderroot;
2514
- arcroot;
2515
- currentZone; // Declare as 'any' or use a specific type if known
2516
- otherZone;
2517
- arcDiagram;
2518
- currentSlideIndex = 0;
2519
- customArrow = false;
2520
- trajectoryNoData = false;
2521
- trajectoryLoading = true;
2522
- trajectoryRateNoData = false;
2523
- trajectoryRateLoading = true;
2524
- cardcustomArrow = false;
2525
- currentSlide = 0;
2526
- dateList;
2527
- zoneNameList;
2528
- constructor(zone, modalService, fb, Zonev2Service, changeDetector, toast, gs, elementRef, route) {
2529
- this.zone = zone;
2530
- this.modalService = modalService;
2531
- this.fb = fb;
2541
+ imageArray;
2542
+ folderName;
2543
+ Images;
2544
+ itemsPerPage = 10;
2545
+ currentPage = 1;
2546
+ totalItems = 1;
2547
+ paginationSizes = [1];
2548
+ pageSize = 1;
2549
+ dataSubscrptionValue = [];
2550
+ statusValues;
2551
+ filteredData;
2552
+ objData;
2553
+ storeArrayValue;
2554
+ constructor(Zonev2Service, cd) {
2532
2555
  this.Zonev2Service = Zonev2Service;
2533
- this.changeDetector = changeDetector;
2534
- this.toast = toast;
2535
- this.gs = gs;
2536
- this.elementRef = elementRef;
2537
- this.route = route;
2556
+ this.cd = cd;
2538
2557
  }
2539
2558
  ngOnInit() {
2540
- this.gs.dataRangeValue
2541
- .pipe(takeUntil(this.destroy$), debounceTime(300))
2542
- .subscribe((data) => {
2543
- this.headerData = data;
2544
- let sDate = this.dayjs(this.headerData.date.startDate);
2545
- let eDate = this.dayjs(this.headerData.date.endDate);
2546
- this.customArrow = false;
2547
- this.cardcustomArrow = false;
2548
- this.type = 'daily';
2549
- // if(eDate.diff(sDate,'day') < 6) {
2550
- // this.disableWeek = true;
2551
- // this.disableMonth = true;
2552
- // // this.type = 'daily';
2553
- // }
2554
- // else if(eDate.diff(sDate,'day') < 27) {
2555
- // this.disableMonth = true;
2556
- // this.disableDay = false;
2557
- // this.disableWeek = false;
2558
- // // this.type = 'weekly';
2559
- // }
2560
- // else {
2561
- // this.disableDay = false;
2562
- // this.disableWeek = false;
2563
- // this.disableMonth = false;
2564
- // // this.type = 'monthly';
2565
- // }
2566
- this.route.queryParams.subscribe(params => {
2567
- this.zoneName = params['zoneName'];
2568
- if (this.zoneName) {
2569
- this.changeTab(this.zoneName);
2570
- }
2571
- });
2572
- this.getAvailableZoneNames();
2573
- // this.getTrajectoryAnalysis();
2574
- // this.getOverallStoreConcentrationData();
2575
- // this.getOverallStoreHeatmapDates();
2576
- });
2559
+ this.Images = this.Imagedata?.images?.entryTimeImage;
2560
+ this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
2561
+ this.totalItems = this.filteredData[0].count;
2562
+ this.getStoreActive();
2577
2563
  }
2564
+ destroy$ = new Subject();
2578
2565
  ngOnDestroy() {
2579
- if (this.genderroot) {
2580
- this.genderroot.dispose();
2581
- }
2582
- if (this.arcroot) {
2583
- this.arcroot.dispose();
2584
- }
2585
2566
  this.destroy$.next(true);
2586
2567
  this.destroy$.complete();
2587
2568
  }
2588
- changeTab(tabName) {
2589
- this.selectedTab = tabName;
2590
- this.zoneName = tabName;
2591
- this.getOverallStoreHeatmapDates();
2592
- this.getTrajectoryAnalysis();
2593
- this.getTrajectoryRateAnalysis();
2594
- this.getAnalaysisSummary();
2595
- this.changeDetector.detectChanges();
2596
- }
2597
- getAvailableZoneNames() {
2598
- // this.cardcustomArrow = false;
2599
- this.heatmapLoading = true;
2600
- this.heatmapNoData = true;
2601
- this.cardDataLoading = true;
2602
- this.overallStoreData = [];
2603
- const requestData = {
2604
- fromDate: this.headerData.date.startDate,
2605
- toDate: this.headerData.date.endDate,
2606
- storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2607
- clientId: this.headerData.client,
2569
+ getStoreActive() {
2570
+ let obj = {
2571
+ "clientId": this.headerData.client,
2572
+ "storeId": this.storeId
2608
2573
  };
2609
- this.Zonev2Service.getAvailableZoneNames(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
2610
- if (response?.code === 200 && response?.status === "success") {
2611
- this.availableZones = response.data.availableZoneData;
2612
- if (this.availableZones.length) {
2613
- this.selectedTab = this.availableZones[0].zoneName;
2614
- this.zoneName = this.selectedTab;
2615
- // this.changeTab(this.selectedTab);
2574
+ this.Zonev2Service
2575
+ .getStoresActive(obj)
2576
+ .pipe(takeUntil(this.destroy$))
2577
+ ?.subscribe({
2578
+ next: (res) => {
2579
+ if (res && res.code === 200) {
2580
+ this.dataSubscrptionValue = res.data.storeSubscription.product;
2616
2581
  }
2617
- // this.zoneName = response.data.zoneConcentrationData[0].zoneName;
2618
- // this.zoneName = this.availableZones.length ? this.availableZones[0].zoneName : '';
2619
- this.heatmapLoading = false;
2620
- this.heatmapNoData = false;
2621
- this.getOverallStoreHeatmapDates();
2622
- this.getTrajectoryAnalysis();
2623
- this.getTrajectoryRateAnalysis();
2624
- this.getAnalaysisSummary();
2625
- }
2626
- else {
2627
- // this.zonesummaryLoading = false;
2628
- // this.zonesummaryNoData = true;
2629
- this.heatmapLoading = false;
2630
- this.heatmapNoData = true;
2631
- this.availableZones = [];
2632
- this.overallStoreConcentrationDates = [];
2633
- this.overallStoreconcentrationData = [];
2634
- this.cardNoData = true;
2635
- this.cardDataLoading = false;
2636
- // this.overallStoreData = []
2637
- this.zoneName = "";
2638
- this.changeDetector.detectChanges();
2639
2582
  }
2640
- }, error => {
2641
- this.availableZones = [];
2642
- this.zoneName = "";
2643
- // this.headerData.date.startDate = null;
2644
- // this.headerData.date.endDate = null;
2645
- this.changeDetector.detectChanges();
2646
2583
  });
2647
2584
  }
2648
- getOverallStoreConcentrationData() {
2649
- this.heatmapLoading = true;
2650
- this.heatmapNoData = true;
2651
- // this.cardDataLoading = true;
2652
- const requestData = {
2653
- fromDate: this.headerData.date.startDate,
2654
- toDate: this.headerData.date.endDate,
2655
- storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
2656
- // storeId: ["11-1176"],
2657
- clientId: this.headerData.client,
2658
- zoneName: this.zoneName,
2659
- dateType: this.type,
2660
- zoneDate: this.selectedDate
2661
- };
2662
- this.Zonev2Service.getOverallStoreConcentrationData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
2663
- this.heatmapLoading = false;
2664
- if (response?.code === 200 && response?.status === "success") {
2665
- // this.overallStoreData = response.data.overallStoreConcentrationDatas;
2666
- this.overallStoreconcentrationData = response.data.overallStoreConcentrationDatas;
2667
- this.heatmapNoData = false;
2668
- setTimeout(() => {
2669
- let prevElement = document.querySelector('.carousel-control-prev');
2670
- prevElement?.setAttribute('style', 'display:none');
2671
- }, 200);
2672
- }
2673
- else {
2674
- this.overallStoreconcentrationData = [];
2675
- // this.zoneConcentrationData = []
2676
- // this.availableZones = [];
2677
- this.heatmapLoading = false;
2678
- this.heatmapNoData = true;
2679
- this.cardDataLoading = false;
2680
- this.cardNoData = true;
2681
- }
2682
- // this.getAnalaysisSummary()
2585
+ imageData(type) {
2586
+ if (type === 'entry') {
2587
+ this.Images = this.Imagedata?.images?.entryTimeImage;
2588
+ }
2589
+ else if (type === 'exit') {
2590
+ this.Images = this.Imagedata?.images?.exitTimeImage;
2591
+ }
2592
+ else if (type === 'staff') {
2593
+ this.Images = this.Imagedata?.images?.staffEngagementImage;
2594
+ }
2595
+ }
2596
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2597
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryViewComponent, selector: "lib-image-directory-view", inputs: { Imagedata: "Imagedata", processType: "processType", footfallDate: "footfallDate", storeName: "storeName", storeId: "storeId", headerData: "headerData", imageArray: "imageArray", folderName: "folderName" }, ngImport: i0, template: "<div class=\"row h-550px scroll w-100\"></div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8 col-xxl-8\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-md-7\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- Display footfall count or '--' if not available -->\r\n <span class=\"card-label header\">{{storeName | titlecase}} - {{footfallDate | date:'dd MMM, yyyy'}}</span>\r\n </h3>\r\n </div>\r\n <!-- Switch toggle -->\r\n <div class=\"col-md-5 text-end\">\r\n <span class=\"custId\">Customer ID</span>\r\n <span class=\"badge badge-light-primary mx-2\">{{Imagedata?.tempId}}</span>\r\n <span class=\"badge badge-light-danger\">{{processType | titlecase}} </span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row contain\">\r\n <div class=\"col-12 mb-5\">\r\n <img class=\"cursor-pointer\" class=\"img-src\" [src]=\"Images\"\r\n (error)=\"Images = null\" alt=\"\">\r\n <div *ngIf=\"!Images\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\" d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"row slider\">\r\n\r\n <ng-container>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.entryTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.entryTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.entryTimeImage\r\n }\">\r\n <div>Entry Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.entryTimeImage\"\r\n (error)=\"Imagedata?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageData('entry')\">\r\n <div *ngIf=\"!Imagedata?.images?.entryTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.staffEngagementImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.staffEngagementImage,\r\n 'border-gray': Images !== Imagedata?.images?.staffEngagementImage\r\n }\">\r\n <div>Staff Engagement</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.staffEngagementImage\"\r\n (error)=\"Imagedata?.images.staffEngagementImage = null\" alt=\"\" (click)=\"imageData('staff')\">\r\n <div *ngIf=\"!Imagedata?.images?.staffEngagementImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 \" *ngIf=\"Imagedata?.images?.exitTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.exitTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.exitTimeImage\r\n }\">\r\n <div>Exit Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.exitTimeImage\"\r\n (error)=\"Imagedata?.images.exitTimeImage = null\" alt=\"\" (click)=\"imageData('exit')\">\r\n <div *ngIf=\"!Imagedata?.images?.exitTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <span (click)=\"next()\" class=\"next\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\"\r\n fill=\"none\">\r\n <path d=\"M1 11L6 6L1 1\" stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </span> -->\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination> -->\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4\">\r\n <div *ngIf=\"dataSubscrptionValue.tangoTraffic\" class=\"row\">\r\n <div class=\"col-12 mb-5 cam-details-header px-0\">Time Spent</div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Entry Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Exit Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n <!-- <div class=\"py-2 img-doc-time\">Avg Dwell Time</div> -->\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.entryTime ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.exitTime ?? '--'}}</div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.totalTimeSpent ?? '--'}}</div>\r\n <!-- <div class=\"py-2 img-doc-value\">20 Mins</div> -->\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <hr />\r\n\r\n <div *ngIf=\"!dataSubscrptionValue.tangoZone\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Zone\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Identify hotspots and optimize your merchandise with Tango Zone's store heatmap analytics\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/zone-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"row\">\r\n <span class=\"zone-header\">Zones Visited</span>\r\n <ng-container class=\"h-200px scroll\">\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n </ng-container>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"last-visit\">Last Visited Zone</span>\r\n </div>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"badge badge-light-primary mx-2\"> John Jacobs</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"mt-5 col-lg-12\">\r\n <button class=\"btn btn-light-primary1 w-100 px-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4713_25)\">\r\n <path d=\"M19.6673 5.83341L13.834 10.0001L19.6673 14.1667V5.83341Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M12.1673 4.16675H3.00065C2.08018 4.16675 1.33398 4.91294 1.33398 5.83341V14.1667C1.33398 15.0872 2.08018 15.8334 3.00065 15.8334H12.1673C13.0878 15.8334 13.834 15.0872 13.834 14.1667V5.83341C13.834 4.91294 13.0878 4.16675 12.1673 4.16675Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4713_25\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">View Trajectory</span></button>\r\n </div>\r\n <hr />\r\n <div *ngIf=\"!dataSubscrptionValue.tangoTrax\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Trax\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Create AI-driven checklists to streamline your processes and boost compliance with Tango Trax.\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/trax-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"dataSubscrptionValue.tangoTrax\" class=\"row\">\r\n <div class=\"zone-header my-3 ps-3\">Staff Engagement</div>\r\n\r\n <div class=\"row ps-3 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Time taken to assist <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n\r\n <div class=\"py-2 img-doc-time\">Time spent with staff</div>\r\n\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeTakenToAssist ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeSpentWithStaff ?? '--'}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <hr /> -->\r\n", styles: [":host{padding:24px}.tabset{display:flex;border-bottom:1px solid #EAECF0;width:100%}.tabset .tab{padding:12px;color:#667085;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.tabset .selected{background:#eaf8ff;border-bottom:2px solid #009BF3}.active-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#12b76a}.inactive-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#f04438}.camera-number{color:#344054;font-size:14px;font-weight:600;line-height:20px}.camera-name-chip{padding:2px 8px;border-radius:16px;background:#eaf8ff;color:#009bf3;font-size:12px;font-weight:500;line-height:18px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cam-details-header{color:#101828;font-size:18px;font-weight:600;line-height:28px}img{width:100%;border-radius:8px}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.no-preview-sm{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px}.no-preview-sm .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-sm .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.no-preview-md{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 7px}.no-preview-md .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-md .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.slider{position:relative}.slider .previous{position:absolute;top:30%;left:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.slider .next{position:absolute;top:30%;right:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.angle-change-header{color:#000;font-size:16px;font-weight:500;line-height:24px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.img-src{border-radius:12px;border:1px solid var(--Gray-400, #98A2B3);background:var(--Gray-50, #F9FAFB);width:100%;height:311px}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);padding:0 4px}.border-gray-active{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-50, #EAF8FF);padding:0 4px}.zone-header{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.last-visit{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.btn-light-primary1{color:var(--White, #FFF)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize;border-radius:4px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important}.card-label{font-size:18px!important}.productCard{border-radius:12px;background:var(--Gray-50, #F9FAFB)}.product-title{color:var(--Gray-800, #1D2939);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.left-card-count-title{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-style:normal;font-weight:400;line-height:18px}.explore-btn{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.custId{color:var(--Gray-900, #101828);font-size:12px;font-style:normal;font-weight:600;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
2598
+ }
2599
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
2600
+ type: Component,
2601
+ args: [{ selector: 'lib-image-directory-view', template: "<div class=\"row h-550px scroll w-100\"></div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8 col-xxl-8\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-md-7\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- Display footfall count or '--' if not available -->\r\n <span class=\"card-label header\">{{storeName | titlecase}} - {{footfallDate | date:'dd MMM, yyyy'}}</span>\r\n </h3>\r\n </div>\r\n <!-- Switch toggle -->\r\n <div class=\"col-md-5 text-end\">\r\n <span class=\"custId\">Customer ID</span>\r\n <span class=\"badge badge-light-primary mx-2\">{{Imagedata?.tempId}}</span>\r\n <span class=\"badge badge-light-danger\">{{processType | titlecase}} </span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row contain\">\r\n <div class=\"col-12 mb-5\">\r\n <img class=\"cursor-pointer\" class=\"img-src\" [src]=\"Images\"\r\n (error)=\"Images = null\" alt=\"\">\r\n <div *ngIf=\"!Images\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\" d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"row slider\">\r\n\r\n <ng-container>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.entryTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.entryTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.entryTimeImage\r\n }\">\r\n <div>Entry Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.entryTimeImage\"\r\n (error)=\"Imagedata?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageData('entry')\">\r\n <div *ngIf=\"!Imagedata?.images?.entryTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.staffEngagementImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.staffEngagementImage,\r\n 'border-gray': Images !== Imagedata?.images?.staffEngagementImage\r\n }\">\r\n <div>Staff Engagement</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.staffEngagementImage\"\r\n (error)=\"Imagedata?.images.staffEngagementImage = null\" alt=\"\" (click)=\"imageData('staff')\">\r\n <div *ngIf=\"!Imagedata?.images?.staffEngagementImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 \" *ngIf=\"Imagedata?.images?.exitTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.exitTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.exitTimeImage\r\n }\">\r\n <div>Exit Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.exitTimeImage\"\r\n (error)=\"Imagedata?.images.exitTimeImage = null\" alt=\"\" (click)=\"imageData('exit')\">\r\n <div *ngIf=\"!Imagedata?.images?.exitTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <span (click)=\"next()\" class=\"next\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\"\r\n fill=\"none\">\r\n <path d=\"M1 11L6 6L1 1\" stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </span> -->\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination> -->\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4\">\r\n <div *ngIf=\"dataSubscrptionValue.tangoTraffic\" class=\"row\">\r\n <div class=\"col-12 mb-5 cam-details-header px-0\">Time Spent</div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Entry Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Exit Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n <!-- <div class=\"py-2 img-doc-time\">Avg Dwell Time</div> -->\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.entryTime ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.exitTime ?? '--'}}</div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.totalTimeSpent ?? '--'}}</div>\r\n <!-- <div class=\"py-2 img-doc-value\">20 Mins</div> -->\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <hr />\r\n\r\n <div *ngIf=\"!dataSubscrptionValue.tangoZone\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Zone\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Identify hotspots and optimize your merchandise with Tango Zone's store heatmap analytics\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/zone-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"row\">\r\n <span class=\"zone-header\">Zones Visited</span>\r\n <ng-container class=\"h-200px scroll\">\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n </ng-container>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"last-visit\">Last Visited Zone</span>\r\n </div>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"badge badge-light-primary mx-2\"> John Jacobs</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"mt-5 col-lg-12\">\r\n <button class=\"btn btn-light-primary1 w-100 px-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4713_25)\">\r\n <path d=\"M19.6673 5.83341L13.834 10.0001L19.6673 14.1667V5.83341Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M12.1673 4.16675H3.00065C2.08018 4.16675 1.33398 4.91294 1.33398 5.83341V14.1667C1.33398 15.0872 2.08018 15.8334 3.00065 15.8334H12.1673C13.0878 15.8334 13.834 15.0872 13.834 14.1667V5.83341C13.834 4.91294 13.0878 4.16675 12.1673 4.16675Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4713_25\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">View Trajectory</span></button>\r\n </div>\r\n <hr />\r\n <div *ngIf=\"!dataSubscrptionValue.tangoTrax\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Trax\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Create AI-driven checklists to streamline your processes and boost compliance with Tango Trax.\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/trax-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"dataSubscrptionValue.tangoTrax\" class=\"row\">\r\n <div class=\"zone-header my-3 ps-3\">Staff Engagement</div>\r\n\r\n <div class=\"row ps-3 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Time taken to assist <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n\r\n <div class=\"py-2 img-doc-time\">Time spent with staff</div>\r\n\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeTakenToAssist ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeSpentWithStaff ?? '--'}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <hr /> -->\r\n", styles: [":host{padding:24px}.tabset{display:flex;border-bottom:1px solid #EAECF0;width:100%}.tabset .tab{padding:12px;color:#667085;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.tabset .selected{background:#eaf8ff;border-bottom:2px solid #009BF3}.active-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#12b76a}.inactive-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#f04438}.camera-number{color:#344054;font-size:14px;font-weight:600;line-height:20px}.camera-name-chip{padding:2px 8px;border-radius:16px;background:#eaf8ff;color:#009bf3;font-size:12px;font-weight:500;line-height:18px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cam-details-header{color:#101828;font-size:18px;font-weight:600;line-height:28px}img{width:100%;border-radius:8px}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.no-preview-sm{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px}.no-preview-sm .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-sm .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.no-preview-md{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 7px}.no-preview-md .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-md .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.slider{position:relative}.slider .previous{position:absolute;top:30%;left:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.slider .next{position:absolute;top:30%;right:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.angle-change-header{color:#000;font-size:16px;font-weight:500;line-height:24px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.img-src{border-radius:12px;border:1px solid var(--Gray-400, #98A2B3);background:var(--Gray-50, #F9FAFB);width:100%;height:311px}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);padding:0 4px}.border-gray-active{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-50, #EAF8FF);padding:0 4px}.zone-header{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.last-visit{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.btn-light-primary1{color:var(--White, #FFF)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize;border-radius:4px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important}.card-label{font-size:18px!important}.productCard{border-radius:12px;background:var(--Gray-50, #F9FAFB)}.product-title{color:var(--Gray-800, #1D2939);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.left-card-count-title{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-style:normal;font-weight:400;line-height:18px}.explore-btn{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.custId{color:var(--Gray-900, #101828);font-size:12px;font-style:normal;font-weight:600;line-height:18px}\n"] }]
2602
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
2603
+ type: Input
2604
+ }], processType: [{
2605
+ type: Input
2606
+ }], footfallDate: [{
2607
+ type: Input
2608
+ }], storeName: [{
2609
+ type: Input
2610
+ }], storeId: [{
2611
+ type: Input
2612
+ }], headerData: [{
2613
+ type: Input
2614
+ }], imageArray: [{
2615
+ type: Input
2616
+ }], folderName: [{
2617
+ type: Input
2618
+ }] } });
2619
+
2620
+ const SELECT_CONTROL_VALUE_ACCESSOR = {
2621
+ provide: NG_VALUE_ACCESSOR,
2622
+ useExisting: forwardRef(() => ReactiveSelectComponent),
2623
+ multi: true,
2624
+ };
2625
+ class ReactiveSelectComponent {
2626
+ onTouched;
2627
+ onChanged;
2628
+ isDisabled;
2629
+ idField;
2630
+ nameField;
2631
+ label;
2632
+ data;
2633
+ isOpened = false;
2634
+ selected = null;
2635
+ selectedId;
2636
+ writeValue(val) {
2637
+ this.selectedId = val;
2638
+ this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
2639
+ }
2640
+ registerOnChange(fn) {
2641
+ this.onChanged = fn;
2642
+ }
2643
+ registerOnTouched(fn) {
2644
+ this.onTouched = fn;
2645
+ }
2646
+ setDisabledState(isDisabled) {
2647
+ this.isDisabled = isDisabled;
2648
+ }
2649
+ onSelect(item) {
2650
+ this.onTouched();
2651
+ this.selected = item;
2652
+ this.selectedId = item?.[this.idField];
2653
+ this.isOpened = false;
2654
+ this.onChanged(this.selectedId);
2655
+ this.onSelectionChange(item);
2656
+ }
2657
+ onSelectionChange(item) {
2658
+ this.valueChange.emit(item?.[this.idField]);
2659
+ }
2660
+ onClick(event) {
2661
+ if (!this.isDisabled) {
2662
+ const targetElement = event.target;
2663
+ if (!this.isComponentClicked(targetElement)) {
2664
+ this.isOpened = false;
2665
+ }
2666
+ }
2667
+ }
2668
+ isComponentClicked(targetElement) {
2669
+ const parentElement = targetElement.parentElement;
2670
+ if (parentElement) {
2671
+ const clickedOnComponent = parentElement.classList.contains('custom-select');
2672
+ if (clickedOnComponent) {
2673
+ return true;
2674
+ }
2675
+ else {
2676
+ return this.isComponentClicked(parentElement);
2677
+ }
2678
+ }
2679
+ return false;
2680
+ }
2681
+ valueChange = new EventEmitter();
2682
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2683
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select w-200px\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label w-100\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"isOpened = !isOpened;\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect w-100\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2 w-100\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 w-100\">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#f9fafb!important}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;cursor:default;white-space:nowrap}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.custom-select.items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#eaf8ff!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"] }] });
2684
+ }
2685
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
2686
+ type: Component,
2687
+ args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select w-200px\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label w-100\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"isOpened = !isOpened;\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect w-100\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2 w-100\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 w-100\">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#f9fafb!important}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;cursor:default;white-space:nowrap}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.custom-select.items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#eaf8ff!important}\n"] }]
2688
+ }], propDecorators: { idField: [{
2689
+ type: Input
2690
+ }], nameField: [{
2691
+ type: Input
2692
+ }], label: [{
2693
+ type: Input
2694
+ }], data: [{
2695
+ type: Input
2696
+ }], onClick: [{
2697
+ type: HostListener,
2698
+ args: ['document:click', ['$event']]
2699
+ }], valueChange: [{
2700
+ type: Output
2701
+ }] } });
2702
+
2703
+ class ImageDirectoryComponent {
2704
+ Zonev2Service;
2705
+ gs;
2706
+ cd;
2707
+ modalService;
2708
+ fb;
2709
+ selectIndex = 0;
2710
+ selectedTime;
2711
+ objData;
2712
+ objectsArray;
2713
+ imagesArrayData;
2714
+ processType = "footfall";
2715
+ headerData;
2716
+ folderView = true;
2717
+ dayjs = dayjs;
2718
+ dateArray;
2719
+ form;
2720
+ noData = false;
2721
+ loading = true;
2722
+ storeArrayValue;
2723
+ storeIdarray;
2724
+ constructor(Zonev2Service, gs, cd, modalService, fb) {
2725
+ this.Zonev2Service = Zonev2Service;
2726
+ this.gs = gs;
2727
+ this.cd = cd;
2728
+ this.modalService = modalService;
2729
+ this.fb = fb;
2730
+ this.form = this.fb.group({
2731
+ selectValue: new FormControl('') // Initialize as FormControl
2732
+ });
2733
+ }
2734
+ ngOnInit() {
2735
+ this.gs.dataRangeValue
2736
+ .pipe(takeUntil(this.destroy$), debounceTime$1(300))
2737
+ .subscribe((data) => {
2738
+ if (data !== null || data?.client !== null) {
2739
+ this.headerData = data;
2740
+ this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
2741
+ this.objData = {
2742
+ storeId: data.stores
2743
+ .filter((store) => store.checked)
2744
+ .map((store) => store.storeId),
2745
+ clientId: data.client,
2746
+ processType: this.processType,
2747
+ footfallDate: this.headerData.date.endDate,
2748
+ };
2749
+ const initialValue = this.getInitialValue();
2750
+ const selectControl = this.form.get('selectValue');
2751
+ if (selectControl) {
2752
+ selectControl.setValue(initialValue);
2753
+ }
2754
+ this.backToFootfall();
2755
+ this.displayDateRange();
2756
+ }
2757
+ });
2758
+ }
2759
+ destroy$ = new Subject();
2760
+ ngOnDestroy() {
2761
+ this.destroy$.next(true);
2762
+ this.destroy$.complete();
2763
+ }
2764
+ getImageFolder() {
2765
+ delete this.objData.folderName;
2766
+ this.Zonev2Service
2767
+ .getFootfallDirectoryFolders(this.objData)
2768
+ .pipe(takeUntil(this.destroy$))
2769
+ ?.subscribe({
2770
+ next: (res) => {
2771
+ if (res && res.code === 200) {
2772
+ this.objectsArray = res?.data.footfallData;
2773
+ this.selectedTime = this.objectsArray[0].folderName;
2774
+ this.objData.folderName = this.selectedTime;
2775
+ this.getImageView();
2776
+ this.cd.detectChanges();
2777
+ }
2778
+ else {
2779
+ this.loading = false;
2780
+ this.noData = true;
2781
+ }
2782
+ },
2783
+ error: (err) => {
2784
+ this.cd.detectChanges();
2785
+ },
2786
+ complete: () => { },
2787
+ });
2788
+ }
2789
+ getImageView() {
2790
+ this.loading = true;
2791
+ this.noData = false;
2792
+ this.Zonev2Service
2793
+ .getFootfallDirectory(this.objData)
2794
+ .pipe(takeUntil(this.destroy$))
2795
+ ?.subscribe({
2796
+ next: (res) => {
2797
+ if (res && res.code === 200) {
2798
+ if (!res?.data.footfallData.length) {
2799
+ this.loading = false;
2800
+ this.noData = true;
2801
+ }
2802
+ else {
2803
+ this.imagesArrayData = res?.data.footfallData;
2804
+ this.storeArrayValue = res?.data.storeName;
2805
+ this.loading = false;
2806
+ this.noData = false;
2807
+ this.cd.detectChanges();
2808
+ }
2809
+ }
2810
+ else {
2811
+ this.loading = false;
2812
+ this.noData = true;
2813
+ }
2814
+ },
2815
+ error: (err) => {
2816
+ this.cd.detectChanges();
2817
+ },
2818
+ complete: () => { },
2819
+ });
2820
+ }
2821
+ getimages(index, obj) {
2822
+ this.selectIndex = index;
2823
+ (this.objData.footfallDate = obj), (this.folderView = false);
2824
+ this.getImageFolder();
2825
+ }
2826
+ backToFootfall() {
2827
+ this.selectIndex = 0;
2828
+ this.folderView = true;
2829
+ }
2830
+ selectedTimes(val) {
2831
+ this.selectedTime = val;
2832
+ this.objData.folderName = val;
2833
+ this.folderView = false;
2834
+ this.selectedTime = val;
2835
+ this.getImageView();
2836
+ }
2837
+ imageView(obj, footfallDate) {
2838
+ const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
2839
+ centered: true,
2840
+ size: "xl",
2841
+ scrollable: true,
2842
+ });
2843
+ modalRef.componentInstance.Imagedata = obj;
2844
+ modalRef.componentInstance.processType = this.objData.processType;
2845
+ modalRef.componentInstance.footfallDate = footfallDate;
2846
+ modalRef.componentInstance.storeName = this.storeArrayValue;
2847
+ modalRef.componentInstance.storeId = this.storeIdarray;
2848
+ modalRef.componentInstance.headerData = this.headerData;
2849
+ modalRef.componentInstance.imageArray = this.objectsArray;
2850
+ modalRef.componentInstance.folderName = this.objData.folderName;
2851
+ modalRef.result.then((result) => { });
2852
+ }
2853
+ getDateRangeArray(fromDate, toDate) {
2854
+ const start = new Date(fromDate); // Convert string to Date object
2855
+ const end = new Date(toDate); // Convert string to Date object
2856
+ const dateArray = [];
2857
+ // Check if the dates are valid
2858
+ if (isNaN(start.getTime()) || isNaN(end.getTime())) {
2859
+ return dateArray;
2860
+ }
2861
+ // Loop from start date to end date
2862
+ let currentDate = start;
2863
+ while (currentDate <= end) {
2864
+ dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
2865
+ currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
2866
+ }
2867
+ return dateArray;
2868
+ }
2869
+ // Method to display or log the date range array
2870
+ displayDateRange() {
2871
+ const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
2872
+ this.dateArray = dates;
2873
+ }
2874
+ datasets = [
2875
+ { value: 'footfall', label: 'Footfall' },
2876
+ { value: 'bounced', label: 'Bounced Footfall' },
2877
+ { value: 'engager', label: 'Engagers' },
2878
+ { value: 'missedOpportunity', label: 'Missed Opportunity' },
2879
+ { value: 'conversion', label: 'Conversion' }
2880
+ ];
2881
+ getInitialValue() {
2882
+ // For example, selecting the second item in the dataset
2883
+ return this.datasets[0].value; // Change as needed
2884
+ }
2885
+ onValueChange(selectedId) {
2886
+ this.objData.processType = selectedId,
2887
+ this.getImageFolder();
2888
+ }
2889
+ get selectControl() {
2890
+ return this.form.get('selectValue');
2891
+ }
2892
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, deps: [{ token: Zonev2Service }, { token: i2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
2893
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryComponent, selector: "lib-image-directory", ngImport: i0, template: " <div class=\"card-header border-0 px-0\">\r\n <div class=\"col-md-12\">\r\n <div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#EAF8FF\" stroke-width=\"6\" />\r\n <path d=\"M23.8333 14.6666L15.5 24.6666H23L22.1667 31.3333L30.5 21.3333H23L23.8333 14.6666Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one ms-2\">\r\n <ng-container>Examine individual footfall in gallery view with optimal sample images for detailed analysis.</ng-container>\r\n <!-- <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container> -->\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z\"\r\n fill=\"black\" />\r\n </svg> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"folderView\" class=\"p-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-1 mt-5 text-center\" *ngFor=\"let obj of dateArray;let i = index\">\r\n <div (click)=\"getimages(i,obj)\">\r\n <div *ngIf=\"i === selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.154297\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#33B5FF\" />\r\n <path\r\n d=\"M39.8216 36.1667C39.8216 36.7855 39.5758 37.379 39.1382 37.8166C38.7006 38.2542 38.1071 38.5 37.4883 38.5H18.8216C18.2028 38.5 17.6093 38.2542 17.1717 37.8166C16.7341 37.379 16.4883 36.7855 16.4883 36.1667V19.8333C16.4883 19.2145 16.7341 18.621 17.1717 18.1834C17.6093 17.7458 18.2028 17.5 18.8216 17.5H24.6549L26.9883 21H37.4883C38.1071 21 38.7006 21.2458 39.1382 21.6834C39.5758 22.121 39.8216 22.7145 39.8216 23.3333V36.1667Z\"\r\n stroke=\"white\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n <div *ngIf=\"i !== selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.462891\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M40.1302 36.1667C40.1302 36.7855 39.8844 37.379 39.4468 37.8166C39.0092 38.2542 38.4157 38.5 37.7969 38.5H19.1302C18.5114 38.5 17.9179 38.2542 17.4803 37.8166C17.0427 37.379 16.7969 36.7855 16.7969 36.1667V19.8333C16.7969 19.2145 17.0427 18.621 17.4803 18.1834C17.9179 17.7458 18.5114 17.5 19.1302 17.5H24.9635L27.2969 21H37.7969C38.4157 21 39.0092 21.2458 39.4468 21.6834C39.8844 22.121 40.1302 22.7145 40.1302 23.3333V36.1667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n <div *ngIf=\"!folderView\" class=\"p1\">\r\n <div class=\"row\">\r\n <div class=\"d-flex flex-shrink-0 mt-3 justify-content-between align-items-center\">\r\n <span class=\"cursor-pointer\" (click)=\"backToFootfall()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2585_7036)\">\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 d=\"M25.8327 19H14.166M14.166 19L19.9993 24.8334M14.166 19L19.9993 13.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2585_7036\" 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\"\r\n result=\"effect1_dropShadow_2585_7036\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2585_7036\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-auto text-end\">\r\n <form [formGroup]=\"form\">\r\n <lib-reactive-select \r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100 text-start\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 p-0 w-100 overflow-x\">\r\n <div class=\"col text-nowrap\" *ngFor=\"let obj of objectsArray\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\">\r\n <a (click)=\"selectedTimes(obj.folderName)\"\r\n [ngClass]=\"selectedTime === obj?.folderName ? 'active' : ''\" class=\"nav-link cursor-pointer no-border mx-3 mb-2\">\r\n {{obj?.folderName}}<span class=\"mx-2 \" [ngClass]=\"selectedTime === obj?.folderName ? 'badge-num-primary' :'badge-num-muted'\">{{obj?.count?obj?.count:0}}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" 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 <div *ngIf=\"noData\" 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-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this image directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row p-3 img-traffic contain\" *ngIf=\"!noData && !loading\">\r\n <div class=\"col-md-3 border-gray mx-2 p-2 mt-5\" *ngFor=\"let obj of imagesArrayData\">\r\n <img *ngIf=\"obj.images.entryTimeImage\" class=\"img-src cursor-pointer\" [src]=\"obj.images.entryTimeImage\" (error)=\"obj?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageView(obj,objData.footfallDate)\">\r\n <div *ngIf=\"!obj.images.entryTimeImage\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n <div class=\"py-2 img-doc-directory\">{{obj.tempId}} <span class=\"badge badge-light-success ms-2\">{{selectControl.value | titlecase}}</span></div>\r\n <div class=\"py-2 img-doc-time\">Entry Time</div>\r\n <div class=\"py-2 img-doc-time\">Exit Time</div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n </div>\r\n <div class=\"col-md-4 text-end\" >\r\n <div class=\"py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1841_143300)\">\r\n <path d=\"M14.1986 5.33333V14H2.19857V5.33333M6.86523 8H9.5319M0.865234 2H15.5319V5.33333H0.865234V2Z\" stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1841_143300\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.199219)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.entryTime}} </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.exitTime}}</div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.totalTimeSpent}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n", styles: [".switch-form-card{padding:8px 16px;border-radius:4px;border-left:3px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.img-src{width:100%;height:210px;border-radius:.625rem}.img-traffic .col-md-3{width:24%!important}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.img-doc-directory{color:var(--Gray-900, #101828)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline}.img-doc-time{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.img-doc-value{color:var(--Gray-600, #475467);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.overflow-x{overflow-x:auto}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:41px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.img-nodata{width:25%;height:15%}.nodata-title{font-size:14px!important;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
2894
+ }
2895
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
2896
+ type: Component,
2897
+ args: [{ selector: 'lib-image-directory', template: " <div class=\"card-header border-0 px-0\">\r\n <div class=\"col-md-12\">\r\n <div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#EAF8FF\" stroke-width=\"6\" />\r\n <path d=\"M23.8333 14.6666L15.5 24.6666H23L22.1667 31.3333L30.5 21.3333H23L23.8333 14.6666Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one ms-2\">\r\n <ng-container>Examine individual footfall in gallery view with optimal sample images for detailed analysis.</ng-container>\r\n <!-- <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container> -->\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z\"\r\n fill=\"black\" />\r\n </svg> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"folderView\" class=\"p-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-1 mt-5 text-center\" *ngFor=\"let obj of dateArray;let i = index\">\r\n <div (click)=\"getimages(i,obj)\">\r\n <div *ngIf=\"i === selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.154297\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#33B5FF\" />\r\n <path\r\n d=\"M39.8216 36.1667C39.8216 36.7855 39.5758 37.379 39.1382 37.8166C38.7006 38.2542 38.1071 38.5 37.4883 38.5H18.8216C18.2028 38.5 17.6093 38.2542 17.1717 37.8166C16.7341 37.379 16.4883 36.7855 16.4883 36.1667V19.8333C16.4883 19.2145 16.7341 18.621 17.1717 18.1834C17.6093 17.7458 18.2028 17.5 18.8216 17.5H24.6549L26.9883 21H37.4883C38.1071 21 38.7006 21.2458 39.1382 21.6834C39.5758 22.121 39.8216 22.7145 39.8216 23.3333V36.1667Z\"\r\n stroke=\"white\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n <div *ngIf=\"i !== selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.462891\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M40.1302 36.1667C40.1302 36.7855 39.8844 37.379 39.4468 37.8166C39.0092 38.2542 38.4157 38.5 37.7969 38.5H19.1302C18.5114 38.5 17.9179 38.2542 17.4803 37.8166C17.0427 37.379 16.7969 36.7855 16.7969 36.1667V19.8333C16.7969 19.2145 17.0427 18.621 17.4803 18.1834C17.9179 17.7458 18.5114 17.5 19.1302 17.5H24.9635L27.2969 21H37.7969C38.4157 21 39.0092 21.2458 39.4468 21.6834C39.8844 22.121 40.1302 22.7145 40.1302 23.3333V36.1667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n <div *ngIf=\"!folderView\" class=\"p1\">\r\n <div class=\"row\">\r\n <div class=\"d-flex flex-shrink-0 mt-3 justify-content-between align-items-center\">\r\n <span class=\"cursor-pointer\" (click)=\"backToFootfall()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2585_7036)\">\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 d=\"M25.8327 19H14.166M14.166 19L19.9993 24.8334M14.166 19L19.9993 13.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2585_7036\" 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\"\r\n result=\"effect1_dropShadow_2585_7036\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2585_7036\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-auto text-end\">\r\n <form [formGroup]=\"form\">\r\n <lib-reactive-select \r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100 text-start\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 p-0 w-100 overflow-x\">\r\n <div class=\"col text-nowrap\" *ngFor=\"let obj of objectsArray\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\">\r\n <a (click)=\"selectedTimes(obj.folderName)\"\r\n [ngClass]=\"selectedTime === obj?.folderName ? 'active' : ''\" class=\"nav-link cursor-pointer no-border mx-3 mb-2\">\r\n {{obj?.folderName}}<span class=\"mx-2 \" [ngClass]=\"selectedTime === obj?.folderName ? 'badge-num-primary' :'badge-num-muted'\">{{obj?.count?obj?.count:0}}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" 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 <div *ngIf=\"noData\" 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-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this image directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row p-3 img-traffic contain\" *ngIf=\"!noData && !loading\">\r\n <div class=\"col-md-3 border-gray mx-2 p-2 mt-5\" *ngFor=\"let obj of imagesArrayData\">\r\n <img *ngIf=\"obj.images.entryTimeImage\" class=\"img-src cursor-pointer\" [src]=\"obj.images.entryTimeImage\" (error)=\"obj?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageView(obj,objData.footfallDate)\">\r\n <div *ngIf=\"!obj.images.entryTimeImage\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n <div class=\"py-2 img-doc-directory\">{{obj.tempId}} <span class=\"badge badge-light-success ms-2\">{{selectControl.value | titlecase}}</span></div>\r\n <div class=\"py-2 img-doc-time\">Entry Time</div>\r\n <div class=\"py-2 img-doc-time\">Exit Time</div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n </div>\r\n <div class=\"col-md-4 text-end\" >\r\n <div class=\"py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1841_143300)\">\r\n <path d=\"M14.1986 5.33333V14H2.19857V5.33333M6.86523 8H9.5319M0.865234 2H15.5319V5.33333H0.865234V2Z\" stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1841_143300\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.199219)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.entryTime}} </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.exitTime}}</div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.totalTimeSpent}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n", styles: [".switch-form-card{padding:8px 16px;border-radius:4px;border-left:3px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.img-src{width:100%;height:210px;border-radius:.625rem}.img-traffic .col-md-3{width:24%!important}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.img-doc-directory{color:var(--Gray-900, #101828)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline}.img-doc-time{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.img-doc-value{color:var(--Gray-600, #475467);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.overflow-x{overflow-x:auto}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:41px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.img-nodata{width:25%;height:15%}.nodata-title{font-size:14px!important;font-weight:600}\n"] }]
2898
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
2899
+
2900
+ class StoreHeatmapComponent {
2901
+ zone;
2902
+ modalService;
2903
+ fb;
2904
+ Zonev2Service;
2905
+ changeDetector;
2906
+ toast;
2907
+ gs;
2908
+ elementRef;
2909
+ route;
2910
+ carousel;
2911
+ destroy$ = new Subject();
2912
+ selectedTab = '';
2913
+ headerData;
2914
+ dayjs = dayjs;
2915
+ disableDay = false;
2916
+ disableWeek = false;
2917
+ disableMonth = false;
2918
+ type = 'daily';
2919
+ heatmapLoading = true;
2920
+ heatmapNoData = false;
2921
+ zoneName = '';
2922
+ selectedDate = '';
2923
+ overallStoreData = {};
2924
+ overallStoreconcentrationData = {};
2925
+ // zoneConcentrationData: any[] = [];
2926
+ availableZones = [];
2927
+ overallStoreConcentrationDates = [];
2928
+ periodzone = 1;
2929
+ customOption = false;
2930
+ searchInput = "";
2931
+ sortColumName = '';
2932
+ sortBy = 1;
2933
+ sortDirection = -1;
2934
+ genderAnalysis = [];
2935
+ ageAnalysis = [];
2936
+ cardDataLoading = true;
2937
+ cardNoData = false;
2938
+ genderroot;
2939
+ arcroot;
2940
+ currentZone; // Declare as 'any' or use a specific type if known
2941
+ otherZone;
2942
+ arcDiagram;
2943
+ currentSlideIndex = 0;
2944
+ customArrow = false;
2945
+ trajectoryNoData = false;
2946
+ trajectoryLoading = true;
2947
+ trajectoryRateNoData = false;
2948
+ trajectoryRateLoading = true;
2949
+ cardcustomArrow = false;
2950
+ currentSlide = 0;
2951
+ dateList;
2952
+ zoneNameList;
2953
+ constructor(zone, modalService, fb, Zonev2Service, changeDetector, toast, gs, elementRef, route) {
2954
+ this.zone = zone;
2955
+ this.modalService = modalService;
2956
+ this.fb = fb;
2957
+ this.Zonev2Service = Zonev2Service;
2958
+ this.changeDetector = changeDetector;
2959
+ this.toast = toast;
2960
+ this.gs = gs;
2961
+ this.elementRef = elementRef;
2962
+ this.route = route;
2963
+ }
2964
+ ngOnInit() {
2965
+ this.gs.dataRangeValue
2966
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
2967
+ .subscribe((data) => {
2968
+ this.headerData = data;
2969
+ let sDate = this.dayjs(this.headerData.date.startDate);
2970
+ let eDate = this.dayjs(this.headerData.date.endDate);
2971
+ this.customArrow = false;
2972
+ this.cardcustomArrow = false;
2973
+ this.type = 'daily';
2974
+ // if(eDate.diff(sDate,'day') < 6) {
2975
+ // this.disableWeek = true;
2976
+ // this.disableMonth = true;
2977
+ // // this.type = 'daily';
2978
+ // }
2979
+ // else if(eDate.diff(sDate,'day') < 27) {
2980
+ // this.disableMonth = true;
2981
+ // this.disableDay = false;
2982
+ // this.disableWeek = false;
2983
+ // // this.type = 'weekly';
2984
+ // }
2985
+ // else {
2986
+ // this.disableDay = false;
2987
+ // this.disableWeek = false;
2988
+ // this.disableMonth = false;
2989
+ // // this.type = 'monthly';
2990
+ // }
2991
+ this.route.queryParams.subscribe(params => {
2992
+ this.zoneName = params['zoneName'];
2993
+ if (this.zoneName) {
2994
+ this.changeTab(this.zoneName);
2995
+ }
2996
+ });
2997
+ this.getAvailableZoneNames();
2998
+ // this.getTrajectoryAnalysis();
2999
+ // this.getOverallStoreConcentrationData();
3000
+ // this.getOverallStoreHeatmapDates();
3001
+ });
3002
+ }
3003
+ ngOnDestroy() {
3004
+ if (this.genderroot) {
3005
+ this.genderroot.dispose();
3006
+ }
3007
+ if (this.arcroot) {
3008
+ this.arcroot.dispose();
3009
+ }
3010
+ this.destroy$.next(true);
3011
+ this.destroy$.complete();
3012
+ }
3013
+ changeTab(tabName) {
3014
+ this.selectedTab = tabName;
3015
+ this.zoneName = tabName;
3016
+ this.getOverallStoreHeatmapDates();
3017
+ this.getTrajectoryAnalysis();
3018
+ this.getTrajectoryRateAnalysis();
3019
+ this.getAnalaysisSummary();
3020
+ this.changeDetector.detectChanges();
3021
+ }
3022
+ getAvailableZoneNames() {
3023
+ // this.cardcustomArrow = false;
3024
+ this.heatmapLoading = true;
3025
+ this.heatmapNoData = true;
3026
+ this.cardDataLoading = true;
3027
+ this.overallStoreData = [];
3028
+ const requestData = {
3029
+ fromDate: this.headerData.date.startDate,
3030
+ toDate: this.headerData.date.endDate,
3031
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3032
+ clientId: this.headerData.client,
3033
+ };
3034
+ this.Zonev2Service.getAvailableZoneNames(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
3035
+ if (response?.code === 200 && response?.status === "success") {
3036
+ this.availableZones = response.data.availableZoneData;
3037
+ if (this.availableZones.length) {
3038
+ this.selectedTab = this.availableZones[0].zoneName;
3039
+ this.zoneName = this.selectedTab;
3040
+ // this.changeTab(this.selectedTab);
3041
+ }
3042
+ // this.zoneName = response.data.zoneConcentrationData[0].zoneName;
3043
+ // this.zoneName = this.availableZones.length ? this.availableZones[0].zoneName : '';
3044
+ this.heatmapLoading = false;
3045
+ this.heatmapNoData = false;
3046
+ this.getOverallStoreHeatmapDates();
3047
+ this.getTrajectoryAnalysis();
3048
+ this.getTrajectoryRateAnalysis();
3049
+ this.getAnalaysisSummary();
3050
+ }
3051
+ else {
3052
+ // this.zonesummaryLoading = false;
3053
+ // this.zonesummaryNoData = true;
3054
+ this.heatmapLoading = false;
3055
+ this.heatmapNoData = true;
3056
+ this.availableZones = [];
3057
+ this.overallStoreConcentrationDates = [];
3058
+ this.overallStoreconcentrationData = [];
3059
+ this.cardNoData = true;
3060
+ this.cardDataLoading = false;
3061
+ // this.overallStoreData = []
3062
+ this.zoneName = "";
3063
+ this.changeDetector.detectChanges();
3064
+ }
3065
+ }, error => {
3066
+ this.availableZones = [];
3067
+ this.zoneName = "";
3068
+ // this.headerData.date.startDate = null;
3069
+ // this.headerData.date.endDate = null;
3070
+ this.changeDetector.detectChanges();
3071
+ });
3072
+ }
3073
+ getOverallStoreConcentrationData() {
3074
+ this.heatmapLoading = true;
3075
+ this.heatmapNoData = true;
3076
+ // this.cardDataLoading = true;
3077
+ const requestData = {
3078
+ fromDate: this.headerData.date.startDate,
3079
+ toDate: this.headerData.date.endDate,
3080
+ storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
3081
+ // storeId: ["11-1176"],
3082
+ clientId: this.headerData.client,
3083
+ zoneName: this.zoneName,
3084
+ dateType: this.type,
3085
+ zoneDate: this.selectedDate
3086
+ };
3087
+ this.Zonev2Service.getOverallStoreConcentrationData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
3088
+ this.heatmapLoading = false;
3089
+ if (response?.code === 200 && response?.status === "success") {
3090
+ // this.overallStoreData = response.data.overallStoreConcentrationDatas;
3091
+ this.overallStoreconcentrationData = response.data.overallStoreConcentrationDatas;
3092
+ this.heatmapNoData = false;
3093
+ setTimeout(() => {
3094
+ let prevElement = document.querySelector('.carousel-control-prev');
3095
+ prevElement?.setAttribute('style', 'display:none');
3096
+ }, 200);
3097
+ }
3098
+ else {
3099
+ this.overallStoreconcentrationData = [];
3100
+ // this.zoneConcentrationData = []
3101
+ // this.availableZones = [];
3102
+ this.heatmapLoading = false;
3103
+ this.heatmapNoData = true;
3104
+ this.cardDataLoading = false;
3105
+ this.cardNoData = true;
3106
+ }
3107
+ // this.getAnalaysisSummary()
2683
3108
  }, error => {
2684
3109
  this.overallStoreconcentrationData = [];
2685
3110
  // this.zoneConcentrationData = []
@@ -3029,141 +3454,58 @@ class StoreHeatmapComponent {
3029
3454
  this.currentSlide = slideIndex;
3030
3455
  let prevElement = document.querySelector('.carousel-control-prev');
3031
3456
  let nextElement = document.querySelector('.carousel-control-next');
3032
- if (this.currentSlide == 0) {
3033
- nextElement?.removeAttribute('style');
3034
- if (prevElement) {
3035
- prevElement.setAttribute('style', "display:none");
3036
- }
3037
- }
3038
- else if (this.currentSlide === this.overallStoreconcentrationData?.ImageURLs.length - 1) {
3039
- prevElement?.removeAttribute('style');
3040
- if (nextElement) {
3041
- nextElement.setAttribute('style', "display:none");
3042
- }
3043
- }
3044
- else {
3045
- prevElement?.removeAttribute('style');
3046
- nextElement?.removeAttribute('style');
3047
- }
3048
- }
3049
- scrollLeft() {
3050
- const element = this.dateList.nativeElement;
3051
- element.scrollBy({ left: -200, behavior: 'smooth' });
3052
- }
3053
- scrollRight() {
3054
- const element = this.dateList.nativeElement;
3055
- element.scrollBy({ left: 200, behavior: 'smooth' });
3056
- }
3057
- zonescrollLeft() {
3058
- this.zoneNameList.nativeElement.scrollBy({
3059
- left: -150,
3060
- behavior: 'smooth'
3061
- });
3062
- }
3063
- zonescrollRight() {
3064
- this.zoneNameList.nativeElement.scrollBy({
3065
- left: 150,
3066
- behavior: 'smooth'
3067
- });
3068
- }
3069
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
3070
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreHeatmapComponent, selector: "lib-store-heatmap", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }, { propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }, { propertyName: "zoneNameList", first: true, predicate: ["zoneNameList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n \r\n <!-- <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div> -->\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\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\"\r\n 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\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-5\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-7\">\r\n <div class=\"mt-14\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-8%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:450px}.form-control:disabled{background-color:#f9fafb!important}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:190px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\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: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }] });
3071
- }
3072
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
3073
- type: Component,
3074
- args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n \r\n <!-- <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div> -->\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\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\"\r\n 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\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-5\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-7\">\r\n <div class=\"mt-14\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-8%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:450px}.form-control:disabled{background-color:#f9fafb!important}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:190px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"] }]
3075
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }, { type: i4.ActivatedRoute }], propDecorators: { carousel: [{
3076
- type: ViewChild,
3077
- args: ['carousel', { static: true }]
3078
- }], dateList: [{
3079
- type: ViewChild,
3080
- args: ['dateList', { read: ElementRef }]
3081
- }], zoneNameList: [{
3082
- type: ViewChild,
3083
- args: ['zoneNameList', { read: ElementRef }]
3084
- }] } });
3085
-
3086
- const SELECT_CONTROL_VALUE_ACCESSOR = {
3087
- provide: NG_VALUE_ACCESSOR,
3088
- useExisting: forwardRef(() => ReactiveSelectComponent),
3089
- multi: true,
3090
- };
3091
- class ReactiveSelectComponent {
3092
- onTouched;
3093
- onChanged;
3094
- isDisabled;
3095
- idField;
3096
- nameField;
3097
- label;
3098
- data;
3099
- isOpened = false;
3100
- selected = null;
3101
- selectedId;
3102
- writeValue(val) {
3103
- this.selectedId = val;
3104
- this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
3105
- }
3106
- registerOnChange(fn) {
3107
- this.onChanged = fn;
3108
- }
3109
- registerOnTouched(fn) {
3110
- this.onTouched = fn;
3111
- }
3112
- setDisabledState(isDisabled) {
3113
- this.isDisabled = isDisabled;
3114
- }
3115
- onSelect(item) {
3116
- this.onTouched();
3117
- this.selected = item;
3118
- this.selectedId = item?.[this.idField];
3119
- this.isOpened = false;
3120
- this.onChanged(this.selectedId);
3121
- this.onSelectionChange(item);
3122
- }
3123
- onSelectionChange(item) {
3124
- this.valueChange.emit(item?.[this.idField]);
3125
- }
3126
- onClick(event) {
3127
- if (!this.isDisabled) {
3128
- const targetElement = event.target;
3129
- if (!this.isComponentClicked(targetElement)) {
3130
- this.isOpened = false;
3131
- }
3132
- }
3133
- }
3134
- isComponentClicked(targetElement) {
3135
- const parentElement = targetElement.parentElement;
3136
- if (parentElement) {
3137
- const clickedOnComponent = parentElement.classList.contains('custom-select');
3138
- if (clickedOnComponent) {
3139
- return true;
3457
+ if (this.currentSlide == 0) {
3458
+ nextElement?.removeAttribute('style');
3459
+ if (prevElement) {
3460
+ prevElement.setAttribute('style', "display:none");
3140
3461
  }
3141
- else {
3142
- return this.isComponentClicked(parentElement);
3462
+ }
3463
+ else if (this.currentSlide === this.overallStoreconcentrationData?.ImageURLs.length - 1) {
3464
+ prevElement?.removeAttribute('style');
3465
+ if (nextElement) {
3466
+ nextElement.setAttribute('style', "display:none");
3143
3467
  }
3144
3468
  }
3145
- return false;
3469
+ else {
3470
+ prevElement?.removeAttribute('style');
3471
+ nextElement?.removeAttribute('style');
3472
+ }
3146
3473
  }
3147
- valueChange = new EventEmitter();
3148
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3149
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: { idField: "idField", nameField: "nameField", label: "label", data: "data" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onClick($event)" } }, providers: [SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"custom-select w-200px\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label w-100\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"isOpened = !isOpened;\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect w-100\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2 w-100\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 w-100\">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#f9fafb!important}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;cursor:default;white-space:nowrap}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.custom-select.items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#eaf8ff!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"] }] });
3474
+ scrollLeft() {
3475
+ const element = this.dateList.nativeElement;
3476
+ element.scrollBy({ left: -200, behavior: 'smooth' });
3477
+ }
3478
+ scrollRight() {
3479
+ const element = this.dateList.nativeElement;
3480
+ element.scrollBy({ left: 200, behavior: 'smooth' });
3481
+ }
3482
+ zonescrollLeft() {
3483
+ this.zoneNameList.nativeElement.scrollBy({
3484
+ left: -150,
3485
+ behavior: 'smooth'
3486
+ });
3487
+ }
3488
+ zonescrollRight() {
3489
+ this.zoneNameList.nativeElement.scrollBy({
3490
+ left: 150,
3491
+ behavior: 'smooth'
3492
+ });
3493
+ }
3494
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
3495
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StoreHeatmapComponent, selector: "lib-store-heatmap", viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, static: true }, { propertyName: "dateList", first: true, predicate: ["dateList"], descendants: true, read: ElementRef }, { propertyName: "zoneNameList", first: true, predicate: ["zoneNameList"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\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\"\r\n 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\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-5\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-7\">\r\n <div class=\"mt-14\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n <!-- Current Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Other Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-8%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:450px}.form-control:disabled{background-color:#f9fafb!important}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:190px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\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$1.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$1.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$1.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$1.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$1.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$1.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }, { kind: "component", type: i1$1.NgbCarousel, selector: "ngb-carousel", inputs: ["animation", "activeId", "interval", "wrap", "keyboard", "pauseOnHover", "pauseOnFocus", "showNavigationArrows", "showNavigationIndicators"], outputs: ["slide", "slid"], exportAs: ["ngbCarousel"] }, { kind: "directive", type: i1$1.NgbSlide, selector: "ng-template[ngbSlide]", inputs: ["id"], outputs: ["slid"] }, { kind: "component", type: ImageDirectoryComponent, selector: "lib-image-directory" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
3150
3496
  }
3151
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
3497
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
3152
3498
  type: Component,
3153
- args: [{ selector: 'lib-reactive-select', providers: [SELECT_CONTROL_VALUE_ACCESSOR], template: "<div class=\"custom-select w-200px\">\r\n <div class=\"form-group\">\r\n <label *ngIf=\"label\" class=\"form-label w-100\">{{label}}</label>\r\n <div class=\"position-relative\">\r\n <div (click)=\"isOpened = !isOpened;\" [ngClass]=\"isDisabled ? 'disable' : ''\" class=\"form-select dropselect w-100\">\r\n {{selected?.[nameField]}}</div>\r\n <div *ngIf=\"isOpened\" class=\"card py-2 w-100 position-absolute end-0 z-1 drop-list\">\r\n <ul class=\"list-unstyled mb-2 w-100\">\r\n <li *ngFor=\"let item of data\" (click)=\"onSelect(item)\"\r\n [ngClass]=\"item?.[idField] === selected?.[idField] ? 'active' : ''\"\r\n class=\"text px-5 items cursor-pointer py-4 w-100\">\r\n {{item?.[nameField]}}\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".custom-select .items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#f9fafb!important}.custom-select .drop-list{max-height:300px;overflow-y:auto}.custom-select .dropselect{color:var(--Gray-500, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;cursor:default;white-space:nowrap}.custom-select .text{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.custom-select .disable{pointer-events:none;background-color:#f9fafb!important}.custom-select.items:hover,.custom-select .tems.focus,.custom-select .items.active,.custom-select .camera.focus-visible{background:#eaf8ff!important}\n"] }]
3154
- }], propDecorators: { idField: [{
3155
- type: Input
3156
- }], nameField: [{
3157
- type: Input
3158
- }], label: [{
3159
- type: Input
3160
- }], data: [{
3161
- type: Input
3162
- }], onClick: [{
3163
- type: HostListener,
3164
- args: ['document:click', ['$event']]
3165
- }], valueChange: [{
3166
- type: Output
3499
+ args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n <div class=\"card-header storecard\">\r\n <div class=\"zone-container position-relative mx-5\">\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-left position-absolute\" (click)=\"zonescrollLeft()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <div class=\"zone-buttons-container d-flex justify-content-start align-items-center no-wrap-list ms-4 me-10\" #zoneNameList>\r\n <button id=\"heatmapscroll\" *ngFor=\"let zone of availableZones\" \r\n class=\"btn btn-color-gray-600 btn-active btn-active-secondary py-3\"\r\n [ngClass]=\"selectedTab === zone.zoneName ? 'activePlanBtnprimary' : 'inactivePlanBtn'\"\r\n (click)=\"changeTab(zone.zoneName)\">\r\n {{ zone.zoneName }}\r\n </button>\r\n </div>\r\n <span *ngIf=\"!heatmapLoading && !heatmapNoData\" class=\"cursor-pointer arrow-right position-absolute\" (click)=\"zonescrollRight()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12\">\r\n <div class=\"row p-3\">\r\n <div class=\"col-lg-6 right-border my-1\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">Store Heatmap</span>\r\n </h3>\r\n \r\n <div class=\"card-toolbar text-nowrap me-4\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <!--begin::Nav group-->\r\n <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n <button class=\"btn btn-outline\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'daily',\r\n 'inactivePlanBtn': type !== 'daily',\r\n 'disabled': disableDay\r\n }\" (click)=\"selectPlan('daily')\" [attr.disabled]=\"disableDay ? true : null\">\r\n Day\r\n </button>\r\n \r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'weekly',\r\n 'inactivePlanBtn': type !== 'weekly',\r\n 'disabled': disableWeek\r\n }\" (click)=\"selectPlan('weekly')\" [attr.disabled]=\"disableWeek ? true : null\">\r\n Week\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3\" [ngClass]=\"{\r\n 'activePlanBtn': type === 'monthly',\r\n 'inactivePlanBtn': type !== 'monthly',\r\n 'disabled': disableMonth\r\n }\" (click)=\"selectPlan('monthly')\" [attr.disabled]=\"disableMonth ? true : null\">\r\n Month\r\n </button>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div >\r\n <div class=\"d-flex\">\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollLeft()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M15 18L9 12L15 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n <ul *ngIf=\"periodzone == 1 && !customOption\" #dateList\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center m-2\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon active\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"(periodzone == 2 || periodzone == 3) && !customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <ul *ngIf=\"customOption\"\r\n class=\"d-flex pills nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder align-items-start mb-5 mt-1 p-3 no-wrap-list\">\r\n <li class=\"nav-item nav-overflow\" *ngFor=\"let date of overallStoreConcentrationDates\">\r\n <a data-bs-toggle=\"pill\"\r\n [ngClass]=\"date.zoneDate === selectedDate ? 'category_active' : ''\"\r\n class=\"nav-link d-flex justify-content-between flex-column cursor-pointer flex-center w-90px mx-3\"\r\n (click)=\"onDateChange(date.zoneDate)\">\r\n <div class=\"nav-icon\"></div>\r\n <span class=\"nav-text text-gray-700 fw-bolder fs-7 lh-1 mx-3\">{{ date.zoneDate\r\n }}</span>\r\n <span class=\"bullet-custom position-absolute bottom-0 h-4px bg-primary\"></span>\r\n </a>\r\n </li>\r\n </ul>\r\n <span *ngIf=\"customArrow && !heatmapLoading && !heatmapNoData\" class=\"mt-3 cursor-pointer\" (click)=\"scrollRight()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9 18L15 12L9 6\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </div>\r\n \r\n <div *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n <ngb-carousel #carousel=\"ngbCarousel\" [interval]=\"0\" (slide)=\"onSlideChange($event)\" [pauseOnHover]=\"true\" [id]=\"selectedDate\">\r\n <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs;let i=index;\">\r\n <ng-template ngbSlide [id]=\"'ngb-slide-'+ i\">\r\n <div class=\"w-100 image-container cursor-pointer\">\r\n <img (click)=\"concentrationHeatmap(overallStoreconcentrationData?.ImageURLs)\"\r\n [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n <a [href]=\"image.URL\" download><svg id=\"download-icon\" width=\"44\" height=\"44\"\r\n viewBox=\"0 0 44 44\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"icon-overlay\">\r\n <g filter=\"url(#filter0_d_3822_19479)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\"\r\n stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M29.5 23.5V26.8333C29.5 27.2754 29.3244 27.6993 29.0118 28.0118C28.6993 28.3244 28.2754 28.5 27.8333 28.5H16.1667C15.7246 28.5 15.3007 28.3244 14.9882 28.0118C14.6756 27.6993 14.5 27.2754 14.5 26.8333V23.5M17.8333 19.3333L22 23.5M22 23.5L26.1667 19.3333M22 23.5V13.5\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_3822_19479\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\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\"\r\n 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\"\r\n result=\"effect1_dropShadow_3822_19479\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_3822_19479\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></a>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ngb-carousel>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"heatmapLoading\">\r\n <div class=\"row loader concheatmap 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\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"heatmapNoData && !heatmapLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body concheatmap d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Overall Store Concentration\r\n Heatmap</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Analysis</span>\r\n </h3>\r\n </div>\r\n <div class=\"body me-4\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n <div class=\"m-4\" *ngIf=\"!cardDataLoading\">\r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-12\">{{ overallStoreData?.footfall?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.footfall?.storeRate || '--' }}%</span> of store footfall\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Impression Rate</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title\">{{ overallStoreData?.impression?.zoneRate || '--' }}%</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.impression?.storeRate || '--' }}%</span> Store Impression\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Bounced Footfall</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-6\">{{ overallStoreData?.bounced?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.bounced?.storeRate || '--' }}%</span> of total bounced\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Engagers</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title ms-10\">{{ overallStoreData?.engagers?.zoneCount?.toLocaleString('en-US', { minimumFractionDigits: 0 }) || '--' }}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n <span class=\"textprimary mx-1\">{{ overallStoreData?.engagers?.storeRate || '--' }}%</span> of total engagers\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n \r\n <div class=\"d-flex flex-stack\">\r\n <span class=\"d-flex flex-row align-items-center\">\r\n <div class=\"overalltext me-2\">Avg. Zone Dwell Time</div>\r\n </span>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"table-title me-12\">{{ overallStoreData?.avgDwellTime?.zoneAvgDwellTime || '--' }} mins</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"blue-badge\">\r\n Avg. dwell time <span class=\"textprimary mx-1\">{{ overallStoreData?.avgDwellTime?.storeAvgDwellTime || '--' }} mins</span>\r\n </span>\r\n </div>\r\n </div>\r\n \r\n <div class=\"borderdashed my-6\"></div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"row\">\r\n <div class=\"col-5\">\r\n <div class=\"headtext p-3\">Age & Gender Analysis</div>\r\n <div class=\"card-body p-0 mb-2\">\r\n <div *ngIf=\"!cardDataLoading && !cardNoData\" id=\"genderchartdiv\"></div>\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-7\">\r\n <div class=\"mt-14\">\r\n <ng-container *ngIf=\"cardDataLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"cardNoData && !cardDataLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Gender Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div class=\"card-body p-0 mt-20\">\r\n <div>\r\n \r\n <table *ngIf=\"!cardDataLoading && !cardNoData\" class=\"table bottom-border\">\r\n <tbody class=\"table-responsive\">\r\n <tr *ngFor=\"let i of getAgeArray()\">\r\n <td>\r\n <div class=\"overalltext\">{{ ageAnalysis[i]?.category || '' }}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">{{ ageAnalysis[i]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"overalltext\">{{ ageAnalysis[i + 1]?.category || '' }}</div>\r\n </td>\r\n <td *ngIf=\"ageAnalysis[i + 1]?.category\">\r\n <div class=\"table-title\">{{ ageAnalysis[i + 1]?.value?.toFixed(0) || '--' }}%</div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedTab !== 'Overall Store'\" class=\"row p-8\">\r\n <div class=\"col-12 trajectorycard\">\r\n <div class=\"card-header border-0 p-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headtext\">{{ selectedTab }} Trajectory Analysis</span>\r\n </h3> \r\n </div>\r\n <div class=\"card-body\">\r\n \r\n \r\n\r\n <div class=\"row\">\r\n <div class=\"col-6\">\r\n <ng-container *ngIf=\"trajectoryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryNoData && !trajectoryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryLoading && !trajectoryNoData\" class=\"arcdiagram\">\r\n <div id=\"arcDiagramDiv\"></div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"col-6 p-12\">\r\n <ng-container *ngIf=\"trajectoryRateLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"trajectoryRateNoData && !trajectoryRateLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div\r\n class=\"card-body mb-13 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Trajectory Analysis</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"!trajectoryRateLoading && !trajectoryRateNoData\" class=\"row ps-15 mt-20\">\r\n <!-- Current Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ currentZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n {{ selectedTab }}\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">Other Zones</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ currentZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ currentZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ currentZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <!-- Other Zone -->\r\n <div class=\"col px-2\">\r\n <div class=\"card card-border p-6\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"headcount\">\r\n {{ otherZone?.impressionRate || '--' }}% \r\n <span class=\"overalltext\">Impression Rate</span>\r\n </span>\r\n </h3>\r\n <span class=\"overalltext my-1\">\r\n Other Zones\r\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M3.33594 8.57096H12.6693M12.6693 8.57096L8.0026 3.9043M12.6693 8.57096L8.0026 13.2376\" \r\n stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n <span class=\"overalltext\">{{ selectedTab }}</span>\r\n </span>\r\n <div class=\"textprimary my-4\">\r\n {{ otherZone?.ageGenderRate || '--' }}% \r\n <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n <span class=\"badgegrey ms-1\">{{ otherZone?.ageGroup || '--' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <div ngbAccordion>\r\n <div ngbAccordionItem [collapsed]=\"false\">\r\n <h2 ngbAccordionHeader>\r\n <button class=\"headtext\" ngbAccordionButton>Image Directory<div class=\"divider\"></div></button>\r\n </h2>\r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody>\r\n <ng-template>\r\n <lib-image-directory></lib-image-directory>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n \r\n</div>\r\n\r\n\r\n\r\n", styles: [".activePlanBtnprimary{border-radius:6px;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.storecard{padding:0px .25rem!important;border-bottom:1px solid var(--Gray-300, #D0D5DD)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:700;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}table td{height:60px!important;align-items:center;gap:12px;align-self:stretch}::ng-deep .carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:-8%;margin-left:15%}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cardimg{width:100%;height:450px}.form-control:disabled{background-color:#f9fafb!important}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.rotate{transform:rotate(180deg)}.no-wrap-list{white-space:nowrap;overflow-x:auto;overflow-y:hidden;padding:0;margin:0;display:flex;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}.no-wrap-list::-webkit-scrollbar{display:none}.concheatmap{margin-top:20%}.right-border{border-right:1px solid #D0D5DD;padding-right:15px}.image-container{position:relative;display:inline-block}::ng-deep .carousel-control-next{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent}::ng-deep .carousel-control-prev{position:absolute;top:40%!important;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff!important;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease;height:20px!important;background-color:transparent!important}::ng-deep .carousel-control-next-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}::ng-deep .carousel-control-prev-icon{display:inline-block;width:5rem;height:7rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.icon-overlay{position:absolute;cursor:pointer;top:10px;right:10px}::ng-deep .carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:8px;height:8px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#009bf3;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}.blue-badge{border-radius:16px;background:var(--Primary-50, #EAF8FF);display:flex;padding:2px 10px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.textprimary{color:var(--Primary-700, #009BF3);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.ratecards{padding:30px;width:47%;border-radius:12px;background:var(--White, #FFF)}.primarybar{background:#00a3ff}#genderchartdiv{width:100%;height:190px}table th,table td{padding:0 20px!important;align-items:center;gap:6px;align-self:stretch}table tr{vertical-align:middle}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}::ng-deep .custom-tooltip{border-radius:8px;background:var(--White, #FFF);padding:8px 12px;color:var(--Gray-700, #344054);text-align:center;font-family:Inter;font-size:12px;font-weight:600;line-height:18px}.table-row-spacing{padding-bottom:15px}.trajectorycard{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);align-items:center;gap:16px;align-self:stretch}.card-border{padding:12px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.ratetext{color:var(--Gray-700, #344054);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.badgegrey{border-radius:16px;background:var(--Gray-100, #F2F4F7);padding:2px 8px}#arcDiagramDiv{width:600px;height:550px}.zone-container{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;padding:10px 0}.zone-buttons-container{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 30px;scroll-behavior:smooth;justify-content:flex-start}.no-wrap-list{white-space:nowrap}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-left{left:0}.arrow-right{right:20px}.position-absolute{position:absolute}.arrow-left,.arrow-right{display:block}.zone-buttons-container::-webkit-scrollbar{display:none}\n"] }]
3500
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }, { type: i4.ActivatedRoute }], propDecorators: { carousel: [{
3501
+ type: ViewChild,
3502
+ args: ['carousel', { static: true }]
3503
+ }], dateList: [{
3504
+ type: ViewChild,
3505
+ args: ['dateList', { read: ElementRef }]
3506
+ }], zoneNameList: [{
3507
+ type: ViewChild,
3508
+ args: ['zoneNameList', { read: ElementRef }]
3167
3509
  }] } });
3168
3510
 
3169
3511
  class CustomerJourneyComponent {
@@ -3248,7 +3590,7 @@ class CustomerJourneyComponent {
3248
3590
  }
3249
3591
  getCustomerJourney() {
3250
3592
  this.customerjourneyLoading = true;
3251
- this.customerjourneyNoData = false;
3593
+ this.customerjourneyNoData = true;
3252
3594
  const requestData = {
3253
3595
  fromDate: this.headerData?.date?.startDate,
3254
3596
  toDate: this.headerData?.date?.endDate,
@@ -3485,22 +3827,21 @@ class CustomerJourneyComponent {
3485
3827
  }
3486
3828
  }
3487
3829
  goToZone() {
3488
- const stores = this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId);
3489
3830
  const datavalue = JSON.parse(localStorage.getItem("header-filters") || "{}");
3490
- datavalue.store = stores.length === 1 ? stores.toString() : datavalue.stores[0].storeId;
3831
+ datavalue.store = datavalue.stores[0].storeId;
3491
3832
  localStorage.setItem("header-filters", JSON.stringify(datavalue));
3492
3833
  this.changeDetector.detectChanges();
3493
3834
  this.gs.dataRangeValue.next(datavalue);
3494
3835
  this.router.navigate(["/manage/stores/zones"], {
3495
- queryParams: { storeId: datavalue.store ? datavalue.store : datavalue.stores[0].storeId },
3836
+ queryParams: { storeId: datavalue.stores[0].storeId },
3496
3837
  });
3497
3838
  }
3498
3839
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
3499
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyComponent, selector: "lib-customer-journey", ngImport: i0, template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></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 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\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\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }] });
3840
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerJourneyComponent, selector: "lib-customer-journey", ngImport: i0, template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></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 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData && !customerjourneyLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\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\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }] });
3500
3841
  }
3501
3842
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyComponent, decorators: [{
3502
3843
  type: Component,
3503
- args: [{ selector: 'lib-customer-journey', template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></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 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\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\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"] }]
3844
+ args: [{ selector: 'lib-customer-journey', template: "<div class=\"card\">\r\n <div [hidden]=\"!showAverage\">\r\n <div class=\"card-header border-0 pt-3\">\r\n <h3 class=\"card-title align-items-start flex-column\"><span class=\"card-label mb-2\">Customer Journey</span></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 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end\">\r\n View All Zones</button>\r\n <form class=\"mx-4\" [formGroup]=\"form\">\r\n <lib-reactive-select\r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n\r\n <button (click)=\"goToZone()\"\r\n class=\"btn bg-light-primary btn-light-primary btn-active-light-primary\"><span\r\n ><svg \r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path d=\"M9.99984 4.16602V15.8327M4.1665 9.99935H15.8332\"\r\n stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n </path>\r\n </svg></span> Add New Zone \r\n </button>\r\n \r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <ng-container *ngIf=\"customerjourneyLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"customerjourneyNoData && !customerjourneyLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Chart</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div [hidden]=\"customerjourneyLoading || customerjourneyNoData\" id=\"customerjourney\"></div>\r\n </div>\r\n</div>\r\n \r\n<div [hidden]=\"showAverage\">\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\">Customer Journey</span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n \r\n <div class=\"d-flex align-items-center position-relative my-1 justify-content-between\">\r\n <button (click)=\"toggleView()\" type=\"button\" class=\"btn btn-outline align-items-end mx-4\">\r\n View Average Customer Journey</button>\r\n <span class=\"me-4\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute mt-3 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n /></span>\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!customerJourneyData.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('noOfStores')\">\r\n No. of stores\r\n <svg [ngClass]=\"sortColumName === 'noOfStores' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'noOfStores' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneFF')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'zoneFF' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneFF' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('impressions')\">\r\n Impressions\r\n <svg [ngClass]=\"sortColumName === 'impressions' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'impressions' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('AvgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'AvgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'AvgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of customerJourneyData\">\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.noOfStores || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneFF || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.impressions || '--' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.AvgDwellTime || '--' }} Mins</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Customer Journey Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n</div>", styles: ["#customerjourney{width:100%;height:500px}.bg-light-primary{border-radius:8px;border:1px solid var(--Primary-50, #EAF8FF);background:var(--Primary-50, #EAF8FF);box-shadow:0 1px 2px #1018280d;padding:8px 14px;justify-content:center}.table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"] }]
3504
3845
  }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
3505
3846
 
3506
3847
  class TopPerformingComponent {
@@ -3929,394 +4270,109 @@ class SummaryTableComponent {
3929
4270
  this.paginationSizes = [this.totalItems]; // Just one option if less than 10
3930
4271
  }
3931
4272
  this.pageSize = this.paginationSizes[0];
3932
- }
3933
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
3934
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<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\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </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 footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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.DatePipe, name: "date" }] });
3935
- }
3936
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, decorators: [{
3937
- type: Component,
3938
- args: [{ selector: 'lib-summary-table', template: "<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\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </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 footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"] }]
3939
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
3940
-
3941
- class ZoneV2Component {
3942
- pageInfo;
3943
- gs;
3944
- zoneService;
3945
- cd;
3946
- storeId = 0;
3947
- headerData;
3948
- showReportProcessingCard = true;
3949
- yesterdayDate = '';
3950
- dataProcessedLoading = true;
3951
- destroy$ = new Subject();
3952
- ngOnDestroy() {
3953
- this.destroy$.next(true);
3954
- this.destroy$.complete();
3955
- }
3956
- constructor(pageInfo, gs, zoneService, cd) {
3957
- this.pageInfo = pageInfo;
3958
- this.gs = gs;
3959
- this.zoneService = zoneService;
3960
- this.cd = cd;
3961
- }
3962
- ngOnInit() {
3963
- this.gs.dataRangeValue
3964
- .pipe(takeUntil(this.destroy$), debounceTime(300))
3965
- .subscribe((data) => {
3966
- this.headerData = data;
3967
- this.updateStoreId();
3968
- this.setPageData();
3969
- this.checkTodayReportStatus();
3970
- });
3971
- }
3972
- setPageData() {
3973
- this.pageInfo.setTitle("Zones");
3974
- this.pageInfo.setDescription("Zones");
3975
- this.pageInfo.setBreadcrumbs([
3976
- { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: false },
3977
- { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: true },
3978
- ]);
3979
- }
3980
- updateStoreId() {
3981
- this.storeId = this.headerData.stores.filter((store) => store.checked).length;
3982
- }
3983
- checkTodayReportStatus() {
3984
- this.dataProcessedLoading = true;
3985
- const reportParams = {
3986
- clientId: this.headerData?.client,
3987
- fromDate: this.headerData?.date?.startDate,
3988
- toDate: this.headerData?.date?.endDate
3989
- };
3990
- this.zoneService.getCheckTodayReportStatus(reportParams)
3991
- .pipe(takeUntil(this.destroy$))
3992
- .subscribe({
3993
- next: (res) => {
3994
- this.dataProcessedLoading = false;
3995
- this.showReportProcessingCard = res?.data?.reportSendStatus === true;
3996
- this.yesterdayDate = res?.data?.yesterday || '';
3997
- this.cd.detectChanges();
3998
- },
3999
- error: (err) => {
4000
- console.error('Error checking report status:', err);
4001
- this.showReportProcessingCard = false;
4002
- }
4003
- });
4004
- }
4005
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4006
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneV2Component, selector: "lib-zone-v2", ngImport: i0, template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card 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", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZonesCardsComponent, selector: "lib-zones-cards" }, { kind: "component", type: StoreHeatmapComponent, selector: "lib-store-heatmap" }, { kind: "component", type: CustomerJourneyComponent, selector: "lib-customer-journey" }, { kind: "component", type: TopPerformingComponent, selector: "lib-top-performing" }, { kind: "component", type: SummaryTableComponent, selector: "lib-summary-table" }] });
4007
- }
4008
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, decorators: [{
4009
- type: Component,
4010
- args: [{ selector: 'lib-zone-v2', template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card 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", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"] }]
4011
- }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
4012
-
4013
- const routes = [
4014
- {
4015
- path: 'v1',
4016
- component: TangoAnalyseZoneComponent
4017
- },
4018
- {
4019
- path: 'v2',
4020
- component: ZoneV2Component
4021
- }
4022
- ];
4023
- class TangoAnalyseZoneRoutingModule {
4024
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4025
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] });
4026
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
4027
- }
4028
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
4029
- type: NgModule,
4030
- args: [{
4031
- imports: [RouterModule.forChild(routes)],
4032
- exports: [RouterModule]
4033
- }]
4034
- }] });
4035
-
4036
- class ImageDirectoryViewComponent {
4037
- Zonev2Service;
4038
- cd;
4039
- Imagedata;
4040
- processType;
4041
- footfallDate;
4042
- storeName;
4043
- storeId;
4044
- headerData;
4045
- imageArray;
4046
- folderName;
4047
- Images;
4048
- itemsPerPage = 10;
4049
- currentPage = 1;
4050
- totalItems = 1;
4051
- paginationSizes = [1];
4052
- pageSize = 1;
4053
- dataSubscrptionValue = [];
4054
- statusValues;
4055
- filteredData;
4056
- objData;
4057
- storeArrayValue;
4058
- constructor(Zonev2Service, cd) {
4059
- this.Zonev2Service = Zonev2Service;
4060
- this.cd = cd;
4061
- }
4062
- ngOnInit() {
4063
- this.Images = this.Imagedata?.images?.entryTimeImage;
4064
- this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
4065
- this.totalItems = this.filteredData[0].count;
4066
- this.getStoreActive();
4067
- }
4068
- destroy$ = new Subject();
4069
- ngOnDestroy() {
4070
- this.destroy$.next(true);
4071
- this.destroy$.complete();
4072
- }
4073
- getStoreActive() {
4074
- let obj = {
4075
- "clientId": this.headerData.client,
4076
- "storeId": this.storeId
4077
- };
4078
- this.Zonev2Service
4079
- .getStoresActive(obj)
4080
- .pipe(takeUntil(this.destroy$))
4081
- ?.subscribe({
4082
- next: (res) => {
4083
- if (res && res.code === 200) {
4084
- this.dataSubscrptionValue = res.data.storeSubscription.product;
4085
- }
4086
- }
4087
- });
4088
- }
4089
- imageData(type) {
4090
- if (type === 'entry') {
4091
- this.Images = this.Imagedata?.images?.entryTimeImage;
4092
- }
4093
- else if (type === 'exit') {
4094
- this.Images = this.Imagedata?.images?.exitTimeImage;
4095
- }
4096
- else if (type === 'staff') {
4097
- this.Images = this.Imagedata?.images?.staffEngagementImage;
4098
- }
4099
- }
4100
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4101
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryViewComponent, selector: "lib-image-directory-view", inputs: { Imagedata: "Imagedata", processType: "processType", footfallDate: "footfallDate", storeName: "storeName", storeId: "storeId", headerData: "headerData", imageArray: "imageArray", folderName: "folderName" }, ngImport: i0, template: "<div class=\"row h-550px scroll w-100\"></div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8 col-xxl-8\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-md-7\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- Display footfall count or '--' if not available -->\r\n <span class=\"card-label header\">{{storeName | titlecase}} - {{footfallDate | date:'dd MMM, yyyy'}}</span>\r\n </h3>\r\n </div>\r\n <!-- Switch toggle -->\r\n <div class=\"col-md-5 text-end\">\r\n <span class=\"custId\">Customer ID</span>\r\n <span class=\"badge badge-light-primary mx-2\">{{Imagedata?.tempId}}</span>\r\n <span class=\"badge badge-light-danger\">{{processType | titlecase}} </span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row contain\">\r\n <div class=\"col-12 mb-5\">\r\n <img class=\"cursor-pointer\" class=\"img-src\" [src]=\"Images\"\r\n (error)=\"Images = null\" alt=\"\">\r\n <div *ngIf=\"!Images\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\" d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"row slider\">\r\n\r\n <ng-container>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.entryTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.entryTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.entryTimeImage\r\n }\">\r\n <div>Entry Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.entryTimeImage\"\r\n (error)=\"Imagedata?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageData('entry')\">\r\n <div *ngIf=\"!Imagedata?.images?.entryTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.staffEngagementImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.staffEngagementImage,\r\n 'border-gray': Images !== Imagedata?.images?.staffEngagementImage\r\n }\">\r\n <div>Staff Engagement</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.staffEngagementImage\"\r\n (error)=\"Imagedata?.images.staffEngagementImage = null\" alt=\"\" (click)=\"imageData('staff')\">\r\n <div *ngIf=\"!Imagedata?.images?.staffEngagementImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 \" *ngIf=\"Imagedata?.images?.exitTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.exitTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.exitTimeImage\r\n }\">\r\n <div>Exit Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.exitTimeImage\"\r\n (error)=\"Imagedata?.images.exitTimeImage = null\" alt=\"\" (click)=\"imageData('exit')\">\r\n <div *ngIf=\"!Imagedata?.images?.exitTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <span (click)=\"next()\" class=\"next\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\"\r\n fill=\"none\">\r\n <path d=\"M1 11L6 6L1 1\" stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </span> -->\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination> -->\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4\">\r\n <div *ngIf=\"dataSubscrptionValue.tangoTraffic\" class=\"row\">\r\n <div class=\"col-12 mb-5 cam-details-header px-0\">Time Spent</div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Entry Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Exit Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n <!-- <div class=\"py-2 img-doc-time\">Avg Dwell Time</div> -->\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.entryTime ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.exitTime ?? '--'}}</div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.totalTimeSpent ?? '--'}}</div>\r\n <!-- <div class=\"py-2 img-doc-value\">20 Mins</div> -->\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <hr />\r\n\r\n <div *ngIf=\"!dataSubscrptionValue.tangoZone\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Zone\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Identify hotspots and optimize your merchandise with Tango Zone's store heatmap analytics\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/zone-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"row\">\r\n <span class=\"zone-header\">Zones Visited</span>\r\n <ng-container class=\"h-200px scroll\">\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n </ng-container>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"last-visit\">Last Visited Zone</span>\r\n </div>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"badge badge-light-primary mx-2\"> John Jacobs</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"mt-5 col-lg-12\">\r\n <button class=\"btn btn-light-primary1 w-100 px-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4713_25)\">\r\n <path d=\"M19.6673 5.83341L13.834 10.0001L19.6673 14.1667V5.83341Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M12.1673 4.16675H3.00065C2.08018 4.16675 1.33398 4.91294 1.33398 5.83341V14.1667C1.33398 15.0872 2.08018 15.8334 3.00065 15.8334H12.1673C13.0878 15.8334 13.834 15.0872 13.834 14.1667V5.83341C13.834 4.91294 13.0878 4.16675 12.1673 4.16675Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4713_25\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">View Trajectory</span></button>\r\n </div>\r\n <hr />\r\n <div *ngIf=\"!dataSubscrptionValue.tangoTrax\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Trax\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Create AI-driven checklists to streamline your processes and boost compliance with Tango Trax.\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/trax-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"dataSubscrptionValue.tangoTrax\" class=\"row\">\r\n <div class=\"zone-header my-3 ps-3\">Staff Engagement</div>\r\n\r\n <div class=\"row ps-3 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Time taken to assist <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n\r\n <div class=\"py-2 img-doc-time\">Time spent with staff</div>\r\n\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeTakenToAssist ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeSpentWithStaff ?? '--'}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <hr /> -->\r\n", styles: [":host{padding:24px}.tabset{display:flex;border-bottom:1px solid #EAECF0;width:100%}.tabset .tab{padding:12px;color:#667085;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.tabset .selected{background:#eaf8ff;border-bottom:2px solid #009BF3}.active-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#12b76a}.inactive-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#f04438}.camera-number{color:#344054;font-size:14px;font-weight:600;line-height:20px}.camera-name-chip{padding:2px 8px;border-radius:16px;background:#eaf8ff;color:#009bf3;font-size:12px;font-weight:500;line-height:18px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cam-details-header{color:#101828;font-size:18px;font-weight:600;line-height:28px}img{width:100%;border-radius:8px}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.no-preview-sm{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px}.no-preview-sm .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-sm .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.no-preview-md{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 7px}.no-preview-md .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-md .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.slider{position:relative}.slider .previous{position:absolute;top:30%;left:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.slider .next{position:absolute;top:30%;right:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.angle-change-header{color:#000;font-size:16px;font-weight:500;line-height:24px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.img-src{border-radius:12px;border:1px solid var(--Gray-400, #98A2B3);background:var(--Gray-50, #F9FAFB);width:100%;height:311px}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);padding:0 4px}.border-gray-active{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-50, #EAF8FF);padding:0 4px}.zone-header{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.last-visit{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.btn-light-primary1{color:var(--White, #FFF)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize;border-radius:4px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important}.card-label{font-size:18px!important}.productCard{border-radius:12px;background:var(--Gray-50, #F9FAFB)}.product-title{color:var(--Gray-800, #1D2939);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.left-card-count-title{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-style:normal;font-weight:400;line-height:18px}.explore-btn{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.custId{color:var(--Gray-900, #101828);font-size:12px;font-style:normal;font-weight:600;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
4102
- }
4103
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
4104
- type: Component,
4105
- args: [{ selector: 'lib-image-directory-view', template: "<div class=\"row h-550px scroll w-100\"></div>\r\n <div class=\"col-md-12 col-lg-8 col-xl-8 col-xxl-8\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-md-7\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <!-- Display footfall count or '--' if not available -->\r\n <span class=\"card-label header\">{{storeName | titlecase}} - {{footfallDate | date:'dd MMM, yyyy'}}</span>\r\n </h3>\r\n </div>\r\n <!-- Switch toggle -->\r\n <div class=\"col-md-5 text-end\">\r\n <span class=\"custId\">Customer ID</span>\r\n <span class=\"badge badge-light-primary mx-2\">{{Imagedata?.tempId}}</span>\r\n <span class=\"badge badge-light-danger\">{{processType | titlecase}} </span>\r\n\r\n </div>\r\n </div>\r\n <div class=\"row contain\">\r\n <div class=\"col-12 mb-5\">\r\n <img class=\"cursor-pointer\" class=\"img-src\" [src]=\"Images\"\r\n (error)=\"Images = null\" alt=\"\">\r\n <div *ngIf=\"!Images\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\" d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"row slider\">\r\n\r\n <ng-container>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.entryTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.entryTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.entryTimeImage\r\n }\">\r\n <div>Entry Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.entryTimeImage\"\r\n (error)=\"Imagedata?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageData('entry')\">\r\n <div *ngIf=\"!Imagedata?.images?.entryTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"Imagedata?.images?.staffEngagementImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.staffEngagementImage,\r\n 'border-gray': Images !== Imagedata?.images?.staffEngagementImage\r\n }\">\r\n <div>Staff Engagement</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.staffEngagementImage\"\r\n (error)=\"Imagedata?.images.staffEngagementImage = null\" alt=\"\" (click)=\"imageData('staff')\">\r\n <div *ngIf=\"!Imagedata?.images?.staffEngagementImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 \" *ngIf=\"Imagedata?.images?.exitTimeImage\">\r\n <div class=\"mb-5 border-2\" [ngClass]=\"{\r\n 'border-gray-active': Images === Imagedata?.images?.exitTimeImage,\r\n 'border-gray': Images !== Imagedata?.images?.exitTimeImage\r\n }\">\r\n <div>Exit Time</div>\r\n <img class=\"cursor-pointer w-100 rounded-2 mh-100px pb-1\"\r\n [src]=\"Imagedata?.images?.exitTimeImage\"\r\n (error)=\"Imagedata?.images.exitTimeImage = null\" alt=\"\" (click)=\"imageData('exit')\">\r\n <div *ngIf=\"!Imagedata?.images?.exitTimeImage\" class=\"no-preview-sm cursor-pointer\">\r\n <span class=\"mb-2\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-2 text-center\">Preview not available</span>\r\n <span class=\"description mb-2 text-center\">The selected camera is not available\r\n at\r\n the\r\n moment.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <span (click)=\"next()\" class=\"next\">\r\n <span>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\"\r\n fill=\"none\">\r\n <path d=\"M1 11L6 6L1 1\" stroke=\"#009BF3\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n\r\n </span> -->\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination> -->\r\n </div>\r\n <div class=\"col-md-12 col-lg-4 col-xl-4 col-xxl-4\">\r\n <div *ngIf=\"dataSubscrptionValue.tangoTraffic\" class=\"row\">\r\n <div class=\"col-12 mb-5 cam-details-header px-0\">Time Spent</div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Entry Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Exit Time <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n <!-- <div class=\"py-2 img-doc-time\">Avg Dwell Time</div> -->\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.entryTime ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.exitTime ?? '--'}}</div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata.timeSpent.totalTimeSpent ?? '--'}}</div>\r\n <!-- <div class=\"py-2 img-doc-value\">20 Mins</div> -->\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <hr />\r\n\r\n <div *ngIf=\"!dataSubscrptionValue.tangoZone\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Zone\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Identify hotspots and optimize your merchandise with Tango Zone's store heatmap analytics\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/zone-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"row\">\r\n <span class=\"zone-header\">Zones Visited</span>\r\n <ng-container class=\"h-200px scroll\">\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n <div class=\"col-md-4 mt-2\">\r\n <span class=\"badge badge-light-primary \">Billing Area</span>\r\n </div>\r\n </ng-container>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"last-visit\">Last Visited Zone</span>\r\n </div>\r\n <div class=\"col-md-6 mt-5\">\r\n <span class=\"badge badge-light-primary mx-2\"> John Jacobs</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"dataSubscrptionValue.tangoZone\" class=\"mt-5 col-lg-12\">\r\n <button class=\"btn btn-light-primary1 w-100 px-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_4713_25)\">\r\n <path d=\"M19.6673 5.83341L13.834 10.0001L19.6673 14.1667V5.83341Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M12.1673 4.16675H3.00065C2.08018 4.16675 1.33398 4.91294 1.33398 5.83341V14.1667C1.33398 15.0872 2.08018 15.8334 3.00065 15.8334H12.1673C13.0878 15.8334 13.834 15.0872 13.834 14.1667V5.83341C13.834 4.91294 13.0878 4.16675 12.1673 4.16675Z\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_4713_25\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.5)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg><span class=\"ms-2\">View Trajectory</span></button>\r\n </div>\r\n <hr />\r\n <div *ngIf=\"!dataSubscrptionValue.tangoTrax\" class=\"row my-2 px-2\">\r\n <div class=\"card productCard\">\r\n <div class=\"row \">\r\n <div class=\"col-md-7 py-5\">\r\n<div class=\"product-title\">\r\n Tango Trax\r\n</div>\r\n<div class=\"left-card-count-title mt-3\">\r\n Create AI-driven checklists to streamline your processes and boost compliance with Tango Trax.\r\n</div>\r\n<div class=\"explore-btn mt-4\">Explore <span class=\"mx-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15 10.8333V15.8333C15 16.2754 14.8244 16.6993 14.5118 17.0118C14.1993 17.3244 13.7754 17.5 13.3333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V6.66667C2.5 6.22464 2.67559 5.80072 2.98816 5.48816C3.30072 5.17559 3.72464 5 4.16667 5H9.16667M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L8.33333 11.6667\" stroke=\"#009BF3\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span></div>\r\n </div>\r\n <div class=\"col-md-5 px-0\">\r\n <img class=\"h-100 w-100\" src=\"assets/tango/Images/trax-tango.svg\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"dataSubscrptionValue.tangoTrax\" class=\"row\">\r\n <div class=\"zone-header my-3 ps-3\">Staff Engagement</div>\r\n\r\n <div class=\"row ps-3 mb-2\">\r\n <div class=\"col-md-8\">\r\n\r\n <div class=\"py-2 img-doc-time text-primary text-decoration-underline fw-bold\">Time taken to assist <span\r\n class=\"ms-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14ZM3.33333 14L10.6667 6.66667L14 10M6.66667 5.66667C6.66667 6.21895 6.21895 6.66667 5.66667 6.66667C5.11438 6.66667 4.66667 6.21895 4.66667 5.66667C4.66667 5.11438 5.11438 4.66667 5.66667 4.66667C6.21895 4.66667 6.66667 5.11438 6.66667 5.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span></div>\r\n\r\n <div class=\"py-2 img-doc-time\">Time spent with staff</div>\r\n\r\n </div>\r\n <div class=\"col-md-4 text-end\">\r\n\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeTakenToAssist ?? '--'}} </div>\r\n <div class=\"py-2 img-doc-value\">{{Imagedata?.staffEngagement?.timeSpentWithStaff ?? '--'}} </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <hr /> -->\r\n", styles: [":host{padding:24px}.tabset{display:flex;border-bottom:1px solid #EAECF0;width:100%}.tabset .tab{padding:12px;color:#667085;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}.tabset .selected{background:#eaf8ff;border-bottom:2px solid #009BF3}.active-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#12b76a}.inactive-dot{display:inline-block;width:12px;height:12px;border-radius:6px;border:1.5px solid #FFF;background:#f04438}.camera-number{color:#344054;font-size:14px;font-weight:600;line-height:20px}.camera-name-chip{padding:2px 8px;border-radius:16px;background:#eaf8ff;color:#009bf3;font-size:12px;font-weight:500;line-height:18px}.form-control{display:block;height:45px;padding:.5rem 1rem;font-size:1.1rem;font-weight:400;color:var(--Gray-500, #667085);-webkit-appearance:none;appearance:none;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.form-label{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:20px}.cam-details-header{color:#101828;font-size:18px;font-weight:600;line-height:28px}img{width:100%;border-radius:8px}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.no-preview-sm{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px}.no-preview-sm .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-sm .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.no-preview-md{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 7px}.no-preview-md .header{color:#f04438;font-size:14px;font-weight:500;line-height:20px}.no-preview-md .description{color:#f04438;font-size:10px;font-weight:400;line-height:18px}.slider{position:relative}.slider .previous{position:absolute;top:30%;left:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.slider .next{position:absolute;top:30%;right:2%;width:32px;height:32px;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.angle-change-header{color:#000;font-size:16px;font-weight:500;line-height:24px}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f9fafb!important}.img-src{border-radius:12px;border:1px solid var(--Gray-400, #98A2B3);background:var(--Gray-50, #F9FAFB);width:100%;height:311px}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);padding:0 4px}.border-gray-active{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--Primary-50, #EAF8FF);padding:0 4px}.zone-header{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.last-visit{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.btn-light-primary1{color:var(--White, #FFF)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize;border-radius:4px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important}.card-label{font-size:18px!important}.productCard{border-radius:12px;background:var(--Gray-50, #F9FAFB)}.product-title{color:var(--Gray-800, #1D2939);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.left-card-count-title{color:var(--Gray-700, #344054)!important;font-size:12px!important;font-style:normal;font-weight:400;line-height:18px}.explore-btn{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.custId{color:var(--Gray-900, #101828);font-size:12px;font-style:normal;font-weight:600;line-height:18px}\n"] }]
4106
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
4107
- type: Input
4108
- }], processType: [{
4109
- type: Input
4110
- }], footfallDate: [{
4111
- type: Input
4112
- }], storeName: [{
4113
- type: Input
4114
- }], storeId: [{
4115
- type: Input
4116
- }], headerData: [{
4117
- type: Input
4118
- }], imageArray: [{
4119
- type: Input
4120
- }], folderName: [{
4121
- type: Input
4122
- }] } });
4273
+ }
4274
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i3.ToastService }], target: i0.ɵɵFactoryTarget.Component });
4275
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<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\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </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 footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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.DatePipe, name: "date" }] });
4276
+ }
4277
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SummaryTableComponent, decorators: [{
4278
+ type: Component,
4279
+ args: [{ selector: 'lib-summary-table', template: "<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\">Zone Summary Table</span>\r\n <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </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 footfallsearch svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n fill=\"currentColor\">\r\n </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 <!-- [disabled]=\"searchDisabled\" -->\r\n <input [(ngModel)]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 me-4 footfallsearch\"\r\n placeholder=\"Search...\" autocomplete=\"off\" (keyup.enter)=\"searchField()\"\r\n />\r\n <button type=\"button\" (click)=\"onExport()\" class=\"btn-outline btn align-items-end text-nowrap invheader me-4\" [disabled]=\"!topPerformingStores.length\">\r\n <!-- Export Icon -->\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=\"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\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\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 <div class=\"table-responsive\">\r\n <table *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\" class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('storeName')\">\r\n Store Name\r\n <svg [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n Store ID\r\n <svg [ngClass]=\"sortColumName === 'storeId' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th>\r\n <div class=\"cursor-pointer\" (click)=\"sortData('date')\">\r\n Date\r\n <svg [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('zoneName')\">\r\n Zone Name\r\n <svg [ngClass]=\"sortColumName === 'zoneName' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'zoneName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n \r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('concentrationRate')\">\r\n Zone Conc.Rate\r\n <svg [ngClass]=\"sortColumName === 'concentrationRate' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'concentrationRate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th ><div class=\"cursor-pointer\" (click)=\"sortData('avgDwellTime')\">\r\n Avg Dwell Time\r\n <svg [ngClass]=\"sortColumName === 'avgDwellTime' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'avgDwellTime' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('footfallCount')\">\r\n Zone FF\r\n <svg [ngClass]=\"sortColumName === 'footfallCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'footfallCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('bouncedCount')\">\r\n Zone Bounced\r\n <svg [ngClass]=\"sortColumName === 'bouncedCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'bouncedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('engagersCount')\">\r\n Zone Engagers\r\n <svg [ngClass]=\"sortColumName === 'engagersCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'engagersCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('below12')\">\r\n Age Below 12\r\n <svg [ngClass]=\"sortColumName === 'below12' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'below12' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('13-19')\">\r\n Age 13-19\r\n <svg [ngClass]=\"sortColumName === '13-19' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '13-19' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('20-30')\">\r\n Age 20-30\r\n <svg [ngClass]=\"sortColumName === '20-30' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '20-30' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('31-45')\">\r\n Age 31-45\r\n <svg [ngClass]=\"sortColumName === '31-45' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '31-45' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('46-59')\">\r\n Age 46-59\r\n <svg [ngClass]=\"sortColumName === '46-59' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '46-59' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('60 above')\">\r\n Age 60+\r\n <svg [ngClass]=\"sortColumName === '60 above' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === '60 above' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('maleCount')\">\r\n Male\r\n <svg [ngClass]=\"sortColumName === 'maleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'maleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n <th><div class=\"cursor-pointer\" (click)=\"sortData('femaleCount')\">\r\n Female\r\n <svg [ngClass]=\"sortColumName === 'femaleCount' && sortDirection === 1 ? 'rotate' : ''\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'femaleCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </div></th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let store of topPerformingStores\">\r\n <td><a class=\"table-title-primary cursor-pointer\" (click)=\"storeView(store.storeId)\">{{ store.storeName || '--' }}</a></td>\r\n <td><div class=\"table-title\">{{ store.storeId || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store?.date | date: 'd MMM, y' || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.zoneName || '--' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.concentrationRate?.toFixed(0) || '0' }}%</div></td>\r\n <td><div class=\"table-title\">{{ store.avgDwellTime || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.footfallCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bouncedCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.engagersCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.bellow12 || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['13-19'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['20-30'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['31-45'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['46-59'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store['60 above'] || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.maleCount || '0' }}</div></td>\r\n <td><div class=\"table-title\">{{ store.femaleCount || '0' }}</div></td>\r\n </tr> \r\n </tbody>\r\n </table>\r\n <ng-container *ngIf=\"zonesummaryLoading\">\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 \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"zonesummaryNoData && !zonesummaryLoading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div\r\n class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Zone Summary Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <div *ngIf=\"!zonesummaryLoading && !zonesummaryNoData\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\"\r\n [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n \r\n </div>\r\n</div>", styles: [".table-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:500;line-height:20px}.subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}.invoicesearch{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-style:normal;font-weight:500!important;line-height:20px}.invoicesearch::placeholder{color:var(--Gray-700, #344054)!important}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #667085)!important;font-size:14px;font-weight:500!important;line-height:20px}.overalltext{color:var(--Gray-500, #667085);font-size:14px;font-weight:500;line-height:20px}.borderdashed{border-bottom:1px solid var(--Gray-200, #EAECF0)}.conc{width:110%}.overallstore{width:155%}::ng-deep .carousel-indicators [data-bs-target]{flex:0 1 auto;width:8px;height:8px;padding:0;cursor:pointer;background-color:#009bf3!important;border-radius:4px;transition:opacity .6s ease;margin-bottom:10px;border:0px}.category_active{border-bottom:3px solid #009EF7!important;border-radius:3px;margin-bottom:3px!important}.timer_active{color:var(--Primary-700, #009BF3);font-size:14px;font-style:normal;font-weight:500;line-height:20px}table tr{vertical-align:middle}table th,table td{height:44px!important;padding:20px 15px!important;align-items:center;gap:12px;align-self:stretch}.card .card-header{padding:0 1.25rem}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.rotate{transform:rotate(180deg)}.table-title-primary{color:var(--Primary-700, #009BF3);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize;text-decoration-line:underline}\n"] }]
4280
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
4123
4281
 
4124
- class ImageDirectoryComponent {
4125
- Zonev2Service;
4282
+ class ZoneV2Component {
4283
+ pageInfo;
4126
4284
  gs;
4285
+ zoneService;
4127
4286
  cd;
4128
- modalService;
4129
- fb;
4130
- selectIndex = 0;
4131
- selectedTime;
4132
- objData;
4133
- objectsArray;
4134
- imagesArrayData;
4135
- processType = "footfall";
4287
+ storeId = 0;
4136
4288
  headerData;
4137
- folderView = true;
4138
- dayjs = dayjs;
4139
- dateArray;
4140
- form;
4141
- noData = false;
4142
- loading = true;
4143
- storeArrayValue;
4144
- storeIdarray;
4145
- constructor(Zonev2Service, gs, cd, modalService, fb) {
4146
- this.Zonev2Service = Zonev2Service;
4289
+ showReportProcessingCard = true;
4290
+ yesterdayDate = '';
4291
+ dataProcessedLoading = true;
4292
+ destroy$ = new Subject();
4293
+ ngOnDestroy() {
4294
+ this.destroy$.next(true);
4295
+ this.destroy$.complete();
4296
+ }
4297
+ constructor(pageInfo, gs, zoneService, cd) {
4298
+ this.pageInfo = pageInfo;
4147
4299
  this.gs = gs;
4300
+ this.zoneService = zoneService;
4148
4301
  this.cd = cd;
4149
- this.modalService = modalService;
4150
- this.fb = fb;
4151
- this.form = this.fb.group({
4152
- selectValue: new FormControl('') // Initialize as FormControl
4153
- });
4154
4302
  }
4155
4303
  ngOnInit() {
4156
4304
  this.gs.dataRangeValue
4157
- .pipe(takeUntil(this.destroy$), debounceTime$1(300))
4305
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
4158
4306
  .subscribe((data) => {
4159
- if (data !== null || data?.client !== null) {
4160
- this.headerData = data;
4161
- this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
4162
- this.objData = {
4163
- storeId: data.stores
4164
- .filter((store) => store.checked)
4165
- .map((store) => store.storeId),
4166
- clientId: data.client,
4167
- processType: this.processType,
4168
- footfallDate: this.headerData.date.endDate,
4169
- };
4170
- const initialValue = this.getInitialValue();
4171
- const selectControl = this.form.get('selectValue');
4172
- if (selectControl) {
4173
- selectControl.setValue(initialValue);
4174
- }
4175
- this.backToFootfall();
4176
- this.displayDateRange();
4177
- }
4307
+ this.headerData = data;
4308
+ this.updateStoreId();
4309
+ this.setPageData();
4310
+ this.checkTodayReportStatus();
4178
4311
  });
4179
4312
  }
4180
- destroy$ = new Subject();
4181
- ngOnDestroy() {
4182
- this.destroy$.next(true);
4183
- this.destroy$.complete();
4313
+ setPageData() {
4314
+ this.pageInfo.setTitle("Zones");
4315
+ this.pageInfo.setDescription("Zones");
4316
+ this.pageInfo.setBreadcrumbs([
4317
+ { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: false },
4318
+ { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: true },
4319
+ ]);
4184
4320
  }
4185
- getImageFolder() {
4186
- delete this.objData.folderName;
4187
- this.Zonev2Service
4188
- .getFootfallDirectoryFolders(this.objData)
4189
- .pipe(takeUntil(this.destroy$))
4190
- ?.subscribe({
4191
- next: (res) => {
4192
- if (res && res.code === 200) {
4193
- this.objectsArray = res?.data.footfallData;
4194
- this.selectedTime = this.objectsArray[0].folderName;
4195
- this.objData.folderName = this.selectedTime;
4196
- this.getImageView();
4197
- this.cd.detectChanges();
4198
- }
4199
- else {
4200
- this.loading = false;
4201
- this.noData = true;
4202
- }
4203
- },
4204
- error: (err) => {
4205
- this.cd.detectChanges();
4206
- },
4207
- complete: () => { },
4208
- });
4321
+ updateStoreId() {
4322
+ this.storeId = this.headerData.stores.filter((store) => store.checked).length;
4209
4323
  }
4210
- getImageView() {
4211
- this.loading = true;
4212
- this.noData = false;
4213
- this.Zonev2Service
4214
- .getFootfallDirectory(this.objData)
4324
+ checkTodayReportStatus() {
4325
+ this.dataProcessedLoading = true;
4326
+ const reportParams = {
4327
+ clientId: this.headerData?.client,
4328
+ fromDate: this.headerData?.date?.startDate,
4329
+ toDate: this.headerData?.date?.endDate
4330
+ };
4331
+ this.zoneService.getCheckTodayReportStatus(reportParams)
4215
4332
  .pipe(takeUntil(this.destroy$))
4216
- ?.subscribe({
4333
+ .subscribe({
4217
4334
  next: (res) => {
4218
- if (res && res.code === 200) {
4219
- if (!res?.data.footfallData.length) {
4220
- this.loading = false;
4221
- this.noData = true;
4222
- }
4223
- else {
4224
- this.imagesArrayData = res?.data.footfallData;
4225
- this.storeArrayValue = res?.data.storeName;
4226
- this.loading = false;
4227
- this.noData = false;
4228
- this.cd.detectChanges();
4229
- }
4230
- }
4231
- else {
4232
- this.loading = false;
4233
- this.noData = true;
4234
- }
4235
- },
4236
- error: (err) => {
4335
+ this.dataProcessedLoading = false;
4336
+ this.showReportProcessingCard = res?.data?.reportSendStatus === true;
4337
+ this.yesterdayDate = res?.data?.yesterday || '';
4237
4338
  this.cd.detectChanges();
4238
4339
  },
4239
- complete: () => { },
4240
- });
4241
- }
4242
- getimages(index, obj) {
4243
- this.selectIndex = index;
4244
- (this.objData.footfallDate = obj), (this.folderView = false);
4245
- this.getImageFolder();
4246
- }
4247
- backToFootfall() {
4248
- this.selectIndex = 0;
4249
- this.folderView = true;
4250
- }
4251
- selectedTimes(val) {
4252
- this.selectedTime = val;
4253
- this.objData.folderName = val;
4254
- this.folderView = false;
4255
- this.selectedTime = val;
4256
- this.getImageView();
4257
- }
4258
- imageView(obj, footfallDate) {
4259
- const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
4260
- centered: true,
4261
- size: "xl",
4262
- scrollable: true,
4340
+ error: (err) => {
4341
+ console.error('Error checking report status:', err);
4342
+ this.showReportProcessingCard = false;
4343
+ }
4263
4344
  });
4264
- modalRef.componentInstance.Imagedata = obj;
4265
- modalRef.componentInstance.processType = this.objData.processType;
4266
- modalRef.componentInstance.footfallDate = footfallDate;
4267
- modalRef.componentInstance.storeName = this.storeArrayValue;
4268
- modalRef.componentInstance.storeId = this.storeIdarray;
4269
- modalRef.componentInstance.headerData = this.headerData;
4270
- modalRef.componentInstance.imageArray = this.objectsArray;
4271
- modalRef.componentInstance.folderName = this.objData.folderName;
4272
- modalRef.result.then((result) => { });
4273
- }
4274
- getDateRangeArray(fromDate, toDate) {
4275
- const start = new Date(fromDate); // Convert string to Date object
4276
- const end = new Date(toDate); // Convert string to Date object
4277
- const dateArray = [];
4278
- // Check if the dates are valid
4279
- if (isNaN(start.getTime()) || isNaN(end.getTime())) {
4280
- return dateArray;
4281
- }
4282
- // Loop from start date to end date
4283
- let currentDate = start;
4284
- while (currentDate <= end) {
4285
- dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
4286
- currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
4287
- }
4288
- return dateArray;
4289
- }
4290
- // Method to display or log the date range array
4291
- displayDateRange() {
4292
- const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
4293
- this.dateArray = dates;
4294
- }
4295
- datasets = [
4296
- { value: 'footfall', label: 'Footfall' },
4297
- { value: 'bounced', label: 'Bounced Footfall' },
4298
- { value: 'engager', label: 'Engagers' },
4299
- { value: 'missedOpportunity', label: 'Missed Opportunity' },
4300
- { value: 'conversion', label: 'Conversion' }
4301
- ];
4302
- getInitialValue() {
4303
- // For example, selecting the second item in the dataset
4304
- return this.datasets[0].value; // Change as needed
4305
4345
  }
4306
- onValueChange(selectedId) {
4307
- this.objData.processType = selectedId,
4308
- this.getImageFolder();
4309
- }
4310
- get selectControl() {
4311
- return this.form.get('selectValue');
4312
- }
4313
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, deps: [{ token: Zonev2Service }, { token: i2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
4314
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageDirectoryComponent, selector: "lib-image-directory", ngImport: i0, template: " <div class=\"card-header border-0 px-0\">\r\n <div class=\"col-md-12\">\r\n <div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#EAF8FF\" stroke-width=\"6\" />\r\n <path d=\"M23.8333 14.6666L15.5 24.6666H23L22.1667 31.3333L30.5 21.3333H23L23.8333 14.6666Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one ms-2\">\r\n <ng-container>Examine individual footfall in gallery view with optimal sample images for detailed analysis.</ng-container>\r\n <!-- <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container> -->\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z\"\r\n fill=\"black\" />\r\n </svg> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"folderView\" class=\"p-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-1 mt-5 text-center\" *ngFor=\"let obj of dateArray;let i = index\">\r\n <div (click)=\"getimages(i,obj)\">\r\n <div *ngIf=\"i === selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.154297\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#33B5FF\" />\r\n <path\r\n d=\"M39.8216 36.1667C39.8216 36.7855 39.5758 37.379 39.1382 37.8166C38.7006 38.2542 38.1071 38.5 37.4883 38.5H18.8216C18.2028 38.5 17.6093 38.2542 17.1717 37.8166C16.7341 37.379 16.4883 36.7855 16.4883 36.1667V19.8333C16.4883 19.2145 16.7341 18.621 17.1717 18.1834C17.6093 17.7458 18.2028 17.5 18.8216 17.5H24.6549L26.9883 21H37.4883C38.1071 21 38.7006 21.2458 39.1382 21.6834C39.5758 22.121 39.8216 22.7145 39.8216 23.3333V36.1667Z\"\r\n stroke=\"white\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n <div *ngIf=\"i !== selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.462891\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M40.1302 36.1667C40.1302 36.7855 39.8844 37.379 39.4468 37.8166C39.0092 38.2542 38.4157 38.5 37.7969 38.5H19.1302C18.5114 38.5 17.9179 38.2542 17.4803 37.8166C17.0427 37.379 16.7969 36.7855 16.7969 36.1667V19.8333C16.7969 19.2145 17.0427 18.621 17.4803 18.1834C17.9179 17.7458 18.5114 17.5 19.1302 17.5H24.9635L27.2969 21H37.7969C38.4157 21 39.0092 21.2458 39.4468 21.6834C39.8844 22.121 40.1302 22.7145 40.1302 23.3333V36.1667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n <div *ngIf=\"!folderView\" class=\"p1\">\r\n <div class=\"row\">\r\n <div class=\"d-flex flex-shrink-0 mt-3 justify-content-between align-items-center\">\r\n <span class=\"cursor-pointer\" (click)=\"backToFootfall()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2585_7036)\">\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 d=\"M25.8327 19H14.166M14.166 19L19.9993 24.8334M14.166 19L19.9993 13.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2585_7036\" 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\"\r\n result=\"effect1_dropShadow_2585_7036\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2585_7036\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-auto text-end\">\r\n <form [formGroup]=\"form\">\r\n <lib-reactive-select \r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100 text-start\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 p-0 w-100 overflow-x\">\r\n <div class=\"col text-nowrap\" *ngFor=\"let obj of objectsArray\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\">\r\n <a (click)=\"selectedTimes(obj.folderName)\"\r\n [ngClass]=\"selectedTime === obj?.folderName ? 'active' : ''\" class=\"nav-link cursor-pointer no-border mx-3 mb-2\">\r\n {{obj?.folderName}}<span class=\"mx-2 \" [ngClass]=\"selectedTime === obj?.folderName ? 'badge-num-primary' :'badge-num-muted'\">{{obj?.count?obj?.count:0}}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" 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 <div *ngIf=\"noData\" 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-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this image directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row p-3 img-traffic contain\" *ngIf=\"!noData && !loading\">\r\n <div class=\"col-md-3 border-gray mx-2 p-2 mt-5\" *ngFor=\"let obj of imagesArrayData\">\r\n <img *ngIf=\"obj.images.entryTimeImage\" class=\"img-src cursor-pointer\" [src]=\"obj.images.entryTimeImage\" (error)=\"obj?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageView(obj,objData.footfallDate)\">\r\n <div *ngIf=\"!obj.images.entryTimeImage\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n <div class=\"py-2 img-doc-directory\">{{obj.tempId}} <span class=\"badge badge-light-success ms-2\">{{selectControl.value | titlecase}}</span></div>\r\n <div class=\"py-2 img-doc-time\">Entry Time</div>\r\n <div class=\"py-2 img-doc-time\">Exit Time</div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n </div>\r\n <div class=\"col-md-4 text-end\" >\r\n <div class=\"py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1841_143300)\">\r\n <path d=\"M14.1986 5.33333V14H2.19857V5.33333M6.86523 8H9.5319M0.865234 2H15.5319V5.33333H0.865234V2Z\" stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1841_143300\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.199219)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.entryTime}} </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.exitTime}}</div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.totalTimeSpent}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n", styles: [".switch-form-card{padding:8px 16px;border-radius:4px;border-left:3px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.img-src{width:100%;height:210px;border-radius:.625rem}.img-traffic .col-md-3{width:24%!important}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.img-doc-directory{color:var(--Gray-900, #101828)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline}.img-doc-time{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.img-doc-value{color:var(--Gray-600, #475467);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.overflow-x{overflow-x:auto}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:41px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.img-nodata{width:25%;height:15%}.nodata-title{font-size:14px!important;font-weight:600}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["valueChange"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
4346
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4347
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneV2Component, selector: "lib-zone-v2", ngImport: i0, template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card 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", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZonesCardsComponent, selector: "lib-zones-cards" }, { kind: "component", type: StoreHeatmapComponent, selector: "lib-store-heatmap" }, { kind: "component", type: CustomerJourneyComponent, selector: "lib-customer-journey" }, { kind: "component", type: TopPerformingComponent, selector: "lib-top-performing" }, { kind: "component", type: SummaryTableComponent, selector: "lib-summary-table" }] });
4315
4348
  }
4316
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
4349
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, decorators: [{
4317
4350
  type: Component,
4318
- args: [{ selector: 'lib-image-directory', template: " <div class=\"card-header border-0 px-0\">\r\n <div class=\"col-md-12\">\r\n <div class=\"switch-form-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" fill=\"#DAF1FF\" />\r\n <rect x=\"3\" y=\"3\" width=\"40\" height=\"40\" rx=\"20\" stroke=\"#EAF8FF\" stroke-width=\"6\" />\r\n <path d=\"M23.8333 14.6666L15.5 24.6666H23L22.1667 31.3333L30.5 21.3333H23L23.8333 14.6666Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <div class=\"txt-one ms-2\">\r\n <ng-container>Examine individual footfall in gallery view with optimal sample images for detailed analysis.</ng-container>\r\n <!-- <ng-container *ngIf=\"isMultiple\">Upload multiple stores for configuration</ng-container> -->\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z\"\r\n fill=\"black\" />\r\n </svg> -->\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"folderView\" class=\"p-1\">\r\n <div class=\"row\">\r\n <div class=\"col-md-1 mt-5 text-center\" *ngFor=\"let obj of dateArray;let i = index\">\r\n <div (click)=\"getimages(i,obj)\">\r\n <div *ngIf=\"i === selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.154297\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#33B5FF\" />\r\n <path\r\n d=\"M39.8216 36.1667C39.8216 36.7855 39.5758 37.379 39.1382 37.8166C38.7006 38.2542 38.1071 38.5 37.4883 38.5H18.8216C18.2028 38.5 17.6093 38.2542 17.1717 37.8166C16.7341 37.379 16.4883 36.7855 16.4883 36.1667V19.8333C16.4883 19.2145 16.7341 18.621 17.1717 18.1834C17.6093 17.7458 18.2028 17.5 18.8216 17.5H24.6549L26.9883 21H37.4883C38.1071 21 38.7006 21.2458 39.1382 21.6834C39.5758 22.121 39.8216 22.7145 39.8216 23.3333V36.1667Z\"\r\n stroke=\"white\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n <div *ngIf=\"i !== selectIndex;\">\r\n <span class=\"cursor-pointer\"><svg width=\"57\" height=\"56\" viewBox=\"0 0 57 56\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.462891\" width=\"56\" height=\"56\" rx=\"12\" fill=\"#EAF8FF\" />\r\n <path\r\n d=\"M40.1302 36.1667C40.1302 36.7855 39.8844 37.379 39.4468 37.8166C39.0092 38.2542 38.4157 38.5 37.7969 38.5H19.1302C18.5114 38.5 17.9179 38.2542 17.4803 37.8166C17.0427 37.379 16.7969 36.7855 16.7969 36.1667V19.8333C16.7969 19.2145 17.0427 18.621 17.4803 18.1834C17.9179 17.7458 18.5114 17.5 19.1302 17.5H24.9635L27.2969 21H37.7969C38.4157 21 39.0092 21.2458 39.4468 21.6834C39.8844 22.121 40.1302 22.7145 40.1302 23.3333V36.1667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"2.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <div class=\"text-center mt-2\">{{obj | date:'dd MMM'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n <div *ngIf=\"!folderView\" class=\"p1\">\r\n <div class=\"row\">\r\n <div class=\"d-flex flex-shrink-0 mt-3 justify-content-between align-items-center\">\r\n <span class=\"cursor-pointer\" (click)=\"backToFootfall()\">\r\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_2585_7036)\">\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 d=\"M25.8327 19H14.166M14.166 19L19.9993 24.8334M14.166 19L19.9993 13.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2585_7036\" 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\"\r\n result=\"effect1_dropShadow_2585_7036\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2585_7036\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"ms-auto text-end\">\r\n <form [formGroup]=\"form\">\r\n <lib-reactive-select \r\n [formControl]=\"selectControl\" \r\n [idField]=\"'value'\"\r\n [nameField]=\"'label'\"\r\n [data]=\"datasets\"\r\n class=\"w-100 text-start\"\r\n (valueChange)=\"onValueChange($event)\">\r\n </lib-reactive-select>\r\n </form>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-6 p-0 w-100 overflow-x\">\r\n <div class=\"col text-nowrap\" *ngFor=\"let obj of objectsArray\">\r\n <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item cursor-pointer\">\r\n <a (click)=\"selectedTimes(obj.folderName)\"\r\n [ngClass]=\"selectedTime === obj?.folderName ? 'active' : ''\" class=\"nav-link cursor-pointer no-border mx-3 mb-2\">\r\n {{obj?.folderName}}<span class=\"mx-2 \" [ngClass]=\"selectedTime === obj?.folderName ? 'badge-num-primary' :'badge-num-muted'\">{{obj?.count?obj?.count:0}}</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n <div *ngIf=\"loading\" 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 <div *ngIf=\"noData\" 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-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this image directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row p-3 img-traffic contain\" *ngIf=\"!noData && !loading\">\r\n <div class=\"col-md-3 border-gray mx-2 p-2 mt-5\" *ngFor=\"let obj of imagesArrayData\">\r\n <img *ngIf=\"obj.images.entryTimeImage\" class=\"img-src cursor-pointer\" [src]=\"obj.images.entryTimeImage\" (error)=\"obj?.images.entryTimeImage = null\" alt=\"\" (click)=\"imageView(obj,objData.footfallDate)\">\r\n <div *ngIf=\"!obj.images.entryTimeImage\" class=\"no-preview\">\r\n <span class=\"mb-5\">\r\n <svg width=\"23\" height=\"20\" viewBox=\"0 0 23 20\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"Group\">\r\n <path id=\"Vector\"\r\n d=\"M6.5 6.32227H6.51M16.25 9.32227H21.5L18 16.3223L14.91 12.0023\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n <path id=\"Vector_2\"\r\n d=\"M1.5 16.3229H5.26C5.63273 16.3255 5.99877 16.2239 6.31682 16.0295C6.63487 15.8352 6.89228 15.5558 7.06 15.2229L8.5 12.3229M1.5 18.3229V14.3229M17.5 6.82291L13.5 14.8229L3.11 9.62291C2.42033 9.27553 1.89635 8.6691 1.65272 7.93632C1.40909 7.20354 1.46564 6.4041 1.81 5.71291L3.19 2.92291C3.362 2.58014 3.59984 2.2746 3.88994 2.02375C4.18003 1.7729 4.5167 1.58165 4.88072 1.46093C5.24474 1.34021 5.62897 1.29239 6.01147 1.32018C6.39398 1.34797 6.76726 1.45084 7.11 1.62291L17.5 6.82291Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n </svg>\r\n\r\n </span>\r\n <span class=\"header mb-5 text-center\">Preview not available</span>\r\n <span class=\"description mb-5 text-center\">The selected camera is not available at the\r\n moment.</span>\r\n </div>\r\n <div class=\"row px-2 mb-2\">\r\n <div class=\"col-md-8\">\r\n <div class=\"py-2 img-doc-directory\">{{obj.tempId}} <span class=\"badge badge-light-success ms-2\">{{selectControl.value | titlecase}}</span></div>\r\n <div class=\"py-2 img-doc-time\">Entry Time</div>\r\n <div class=\"py-2 img-doc-time\">Exit Time</div>\r\n <div class=\"py-2 img-doc-time\">Total Time Spent</div>\r\n </div>\r\n <div class=\"col-md-4 text-end\" >\r\n <div class=\"py-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1841_143300)\">\r\n <path d=\"M14.1986 5.33333V14H2.19857V5.33333M6.86523 8H9.5319M0.865234 2H15.5319V5.33333H0.865234V2Z\" stroke=\"#101828\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1841_143300\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0.199219)\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.entryTime}} </div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.exitTime}}</div>\r\n <div class=\"py-2 img-doc-value\">{{obj.timeSpent.totalTimeSpent}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n\r\n", styles: [".switch-form-card{padding:8px 16px;border-radius:4px;border-left:3px solid var(--Primary-600, #00A3FF);background:var(--Primary-25, #F6FCFF);display:flex;align-items:center;justify-content:space-between}.switch-form-card .txt-one{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:140%}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.badge-num-primary{border-radius:16px!important;background:var(--Primary-50, #EAF8FF)!important;color:var(--Primary-700, #009BF3)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.badge-num-muted{border-radius:16px!important;background:var(--Primary-50, #F2F4F7)!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.img-src{width:100%;height:210px;border-radius:.625rem}.img-traffic .col-md-3{width:24%!important}.border-gray{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.img-doc-directory{color:var(--Gray-900, #101828)!important;font-size:14px!important;font-weight:600;line-height:20px;text-decoration-line:underline}.img-doc-time{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:400;line-height:18px}.img-doc-value{color:var(--Gray-600, #475467);font-size:14px;font-style:normal;font-weight:600;line-height:20px}.overflow-x{overflow-x:auto}.no-preview{border:1px solid #F04438;background:#fee4e2;border-radius:8px;stroke-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:41px 16px}.no-preview .header{color:#f04438;font-size:20px;font-weight:700;line-height:20px}.no-preview .description{color:#f04438;font-size:12px;font-weight:500;line-height:18px}.img-nodata{width:25%;height:15%}.nodata-title{font-size:14px!important;font-weight:600}\n"] }]
4319
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
4351
+ args: [{ selector: 'lib-zone-v2', template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<lib-zones-cards></lib-zones-cards>\r\n<div class=\"mt-4\">\r\n<lib-customer-journey></lib-customer-journey>\r\n</div>\r\n<div *ngIf=\"storeId === 1\" class=\"mt-4\">\r\n<lib-store-heatmap></lib-store-heatmap>\r\n</div>\r\n<div *ngIf=\"storeId > 1\" class=\"mt-2\">\r\n <lib-top-performing></lib-top-performing>\r\n</div>\r\n<div class=\"mt-4\" >\r\n <lib-summary-table></lib-summary-table>\r\n</div>\r\n</div>\r\n\r\n<div *ngIf=\"showReportProcessingCard && !dataProcessedLoading\" class=\"row px-3\"> \r\n <div class=\"card dataprocessed pb-0 px-0 d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"dataprocessedgif\" src=\"./assets/tango/Icons/data_analyse_gif.gif\" alt=\"\">\r\n <div class=\"dataprocessed-title\">Data being Processed</div>\r\n <div class=\"dataprocessed-sub\">Data for the selected date {{ yesterdayDate }}, is currently being processed and will be available shortly.</div>\r\n <div class=\"dataprocessed-sub\"> If you wish to view data for other dates, Remove {{ yesterdayDate }} from your selection or choose a different date range.</div> \r\n </div>\r\n\r\n</div>\r\n<div *ngIf=\"dataProcessedLoading\" class=\"card 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", styles: [".dataprocessed{height:500px}.dataprocessedgif{height:150px;width:150px}.dataprocessed-title{color:var(--Gray-900, #101828);text-align:center;font-size:24px;font-style:normal;font-weight:600;line-height:32px}.dataprocessed-sub{color:var(--Gray-500, #667085);text-align:center;font-size:18px;font-style:normal;font-weight:500;line-height:28px}\n"] }]
4352
+ }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
4353
+
4354
+ const routes = [
4355
+ {
4356
+ path: 'v1',
4357
+ component: TangoAnalyseZoneComponent
4358
+ },
4359
+ {
4360
+ path: 'v2',
4361
+ component: ZoneV2Component
4362
+ }
4363
+ ];
4364
+ class TangoAnalyseZoneRoutingModule {
4365
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4366
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] });
4367
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
4368
+ }
4369
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
4370
+ type: NgModule,
4371
+ args: [{
4372
+ imports: [RouterModule.forChild(routes)],
4373
+ exports: [RouterModule]
4374
+ }]
4375
+ }] });
4320
4376
 
4321
4377
  class InterationTableClient430Component {
4322
4378
  ZoneService;