tango-app-ui-analyse-zone 3.7.1-beta.3 → 3.7.1-beta.4-demo

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 (7) hide show
  1. package/esm2022/lib/components/tango-analyse-zone/tango-analyse-zone.component.mjs +3 -3
  2. package/esm2022/lib/components/zone-v2/customer-journey/customer-journey.component.mjs +4 -4
  3. package/esm2022/lib/components/zone-v2/store-heatmap/store-heatmap.component.mjs +3 -4
  4. package/fesm2022/tango-app-ui-analyse-zone.mjs +475 -475
  5. package/fesm2022/tango-app-ui-analyse-zone.mjs.map +1 -1
  6. package/lib/components/zone-v2/customer-journey/customer-journey.component.d.ts +2 -2
  7. package/package.json +1 -1
package/fesm2022/tango-app-ui-analyse-zone.mjs CHANGED
@@ -2356,11 +2356,11 @@ class TangoAnalyseZoneComponent {
2356
2356
  });
2357
2357
  }
2358
2358
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneComponent, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }, { token: ZoneService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2359
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TangoAnalyseZoneComponent, selector: "lib-tango-analyse-zone", ngImport: i0, template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div *ngIf=\"storeId === 1\">\r\n <lib-segmentation></lib-segmentation>\r\n</div>\r\n <!-- <ng-container *ngIf=\"hasSegmentationData === true\"> -->\r\n \r\n <!-- </ng-container> -->\r\n <!-- <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div> -->\r\n\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n\r\n<div class=\"mt-2\" *ngIf=\"storeId === 1\">\r\n <lib-customer-journey-chart></lib-customer-journey-chart>\r\n</div>\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-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> ", 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: OverallcardsComponent, selector: "lib-overallcards" }, { kind: "component", type: TopPerformingZonesComponent, selector: "lib-top-performing-zones" }, { kind: "component", type: ZoneSummaryTableComponent, selector: "lib-zone-summary-table" }, { kind: "component", type: ZoneConcentrationComponent, selector: "lib-zone-concentration" }, { kind: "component", type: SegmentationComponent, selector: "lib-segmentation", outputs: ["dataEmitter"] }, { kind: "component", type: InterationTableClient459Component, selector: "lib-interation-table-client459" }, { kind: "component", type: CustomerJourneyChartComponent, selector: "lib-customer-journey-chart" }] });
2359
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TangoAnalyseZoneComponent, selector: "lib-tango-analyse-zone", ngImport: i0, template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div *ngIf=\"storeId === 1\">\r\n <lib-segmentation></lib-segmentation>\r\n</div>\r\n <!-- <ng-container *ngIf=\"hasSegmentationData === true\"> -->\r\n \r\n <!-- </ng-container> -->\r\n <!-- <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div> -->\r\n\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n\r\n<div class=\"mt-2\" *ngIf=\"storeId === 1 && headerData?.client === '478'\">\r\n <lib-customer-journey-chart></lib-customer-journey-chart>\r\n</div>\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-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> ", 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: OverallcardsComponent, selector: "lib-overallcards" }, { kind: "component", type: TopPerformingZonesComponent, selector: "lib-top-performing-zones" }, { kind: "component", type: ZoneSummaryTableComponent, selector: "lib-zone-summary-table" }, { kind: "component", type: ZoneConcentrationComponent, selector: "lib-zone-concentration" }, { kind: "component", type: SegmentationComponent, selector: "lib-segmentation", outputs: ["dataEmitter"] }, { kind: "component", type: InterationTableClient459Component, selector: "lib-interation-table-client459" }, { kind: "component", type: CustomerJourneyChartComponent, selector: "lib-customer-journey-chart" }] });
2360
2360
  }
2361
2361
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneComponent, decorators: [{
2362
2362
  type: Component,
2363
- args: [{ selector: 'lib-tango-analyse-zone', template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div *ngIf=\"storeId === 1\">\r\n <lib-segmentation></lib-segmentation>\r\n</div>\r\n <!-- <ng-container *ngIf=\"hasSegmentationData === true\"> -->\r\n \r\n <!-- </ng-container> -->\r\n <!-- <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div> -->\r\n\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n\r\n<div class=\"mt-2\" *ngIf=\"storeId === 1\">\r\n <lib-customer-journey-chart></lib-customer-journey-chart>\r\n</div>\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-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> ", 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"] }]
2363
+ args: [{ selector: 'lib-tango-analyse-zone', template: "<div *ngIf=\"!showReportProcessingCard && !dataProcessedLoading\">\r\n<div *ngIf=\"storeId === 1\">\r\n<lib-zone-concentration></lib-zone-concentration>\r\n</div>\r\n<div class=\"mt-4\">\r\n <lib-overallcards></lib-overallcards>\r\n</div>\r\n<div *ngIf=\"storeId === 1\">\r\n <lib-segmentation></lib-segmentation>\r\n</div>\r\n <!-- <ng-container *ngIf=\"hasSegmentationData === true\"> -->\r\n \r\n <!-- </ng-container> -->\r\n <!-- <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-8\">\r\n <lib-interation-table-client430></lib-interation-table-client430>\r\n </div>\r\n <div *ngIf=\"storeId === 1 && headerData?.client === '430'\" class=\"col-4\">\r\n <lib-passerby-table></lib-passerby-table>\r\n </div>\r\n </div> -->\r\n\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId === 1 && headerData?.client === '459'\">\r\n<lib-interation-table-client459></lib-interation-table-client459>\r\n</div>\r\n<div class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n\r\n<div class=\"mt-2\" *ngIf=\"storeId === 1 && headerData?.client === '478'\">\r\n <lib-customer-journey-chart></lib-customer-journey-chart>\r\n</div>\r\n\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n <lib-zone-summary-table></lib-zone-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> ", 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"] }]
2364
2364
  }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
2365
2365
 
2366
2366
  class ZonesCardsComponent {
@@ -2472,374 +2472,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2472
2472
  type: Input
2473
2473
  }] } });
2474
2474
 
2475
- class ImageDirectoryViewComponent {
2476
- Zonev2Service;
2477
- cd;
2478
- Imagedata;
2479
- processType;
2480
- footfallDate;
2481
- storeName;
2482
- storeId;
2483
- headerData;
2484
- imageArray;
2485
- folderName;
2486
- Images;
2487
- itemsPerPage = 10;
2488
- currentPage = 1;
2489
- totalItems = 1;
2490
- paginationSizes = [1];
2491
- pageSize = 1;
2492
- dataSubscrptionValue = [];
2493
- statusValues;
2494
- filteredData;
2495
- objData;
2496
- storeArrayValue;
2497
- constructor(Zonev2Service, cd) {
2498
- this.Zonev2Service = Zonev2Service;
2499
- this.cd = cd;
2500
- }
2501
- ngOnInit() {
2502
- this.Images = this.Imagedata?.images?.entryTimeImage;
2503
- this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
2504
- this.totalItems = this.filteredData[0].count;
2505
- this.getStoreActive();
2506
- }
2507
- destroy$ = new Subject();
2508
- ngOnDestroy() {
2509
- this.destroy$.next(true);
2510
- this.destroy$.complete();
2511
- }
2512
- getStoreActive() {
2513
- let obj = {
2514
- "clientId": this.headerData.client,
2515
- "storeId": this.storeId
2516
- };
2517
- this.Zonev2Service
2518
- .getStoresActive(obj)
2519
- .pipe(takeUntil(this.destroy$))
2520
- ?.subscribe({
2521
- next: (res) => {
2522
- if (res && res.code === 200) {
2523
- this.dataSubscrptionValue = res.data.storeSubscription.product;
2524
- }
2525
- }
2526
- });
2527
- }
2528
- imageData(type) {
2529
- if (type === 'entry') {
2530
- this.Images = this.Imagedata?.images?.entryTimeImage;
2531
- }
2532
- else if (type === 'exit') {
2533
- this.Images = this.Imagedata?.images?.exitTimeImage;
2534
- }
2535
- else if (type === 'staff') {
2536
- this.Images = this.Imagedata?.images?.staffEngagementImage;
2537
- }
2538
- }
2539
- 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 });
2540
- 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" }] });
2541
- }
2542
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
2543
- type: Component,
2544
- 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"] }]
2545
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
2546
- type: Input
2547
- }], processType: [{
2548
- type: Input
2549
- }], footfallDate: [{
2550
- type: Input
2551
- }], storeName: [{
2552
- type: Input
2553
- }], storeId: [{
2554
- type: Input
2555
- }], headerData: [{
2556
- type: Input
2557
- }], imageArray: [{
2558
- type: Input
2559
- }], folderName: [{
2560
- type: Input
2561
- }] } });
2562
-
2563
- const SELECT_CONTROL_VALUE_ACCESSOR = {
2564
- provide: NG_VALUE_ACCESSOR,
2565
- useExisting: forwardRef(() => ReactiveSelectComponent),
2566
- multi: true,
2567
- };
2568
- class ReactiveSelectComponent {
2569
- onTouched;
2570
- onChanged;
2571
- isDisabled;
2572
- idField;
2573
- nameField;
2574
- label;
2575
- data;
2576
- isOpened = false;
2577
- selected = null;
2578
- selectedId;
2579
- writeValue(val) {
2580
- this.selectedId = val;
2581
- this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
2582
- }
2583
- registerOnChange(fn) {
2584
- this.onChanged = fn;
2585
- }
2586
- registerOnTouched(fn) {
2587
- this.onTouched = fn;
2588
- }
2589
- setDisabledState(isDisabled) {
2590
- this.isDisabled = isDisabled;
2591
- }
2592
- onSelect(item) {
2593
- this.onTouched();
2594
- this.selected = item;
2595
- this.selectedId = item?.[this.idField];
2596
- this.isOpened = false;
2597
- this.onChanged(this.selectedId);
2598
- this.onSelectionChange(item);
2599
- }
2600
- onSelectionChange(item) {
2601
- this.valueChange.emit(item?.[this.idField]);
2602
- }
2603
- onClick(event) {
2604
- if (!this.isDisabled) {
2605
- const targetElement = event.target;
2606
- if (!this.isComponentClicked(targetElement)) {
2607
- this.isOpened = false;
2608
- }
2609
- }
2610
- }
2611
- isComponentClicked(targetElement) {
2612
- const parentElement = targetElement.parentElement;
2613
- if (parentElement) {
2614
- const clickedOnComponent = parentElement.classList.contains('custom-select');
2615
- if (clickedOnComponent) {
2616
- return true;
2617
- }
2618
- else {
2619
- return this.isComponentClicked(parentElement);
2620
- }
2621
- }
2622
- return false;
2623
- }
2624
- valueChange = new EventEmitter();
2625
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2626
- 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"] }] });
2627
- }
2628
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
2629
- type: Component,
2630
- 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"] }]
2631
- }], propDecorators: { idField: [{
2632
- type: Input
2633
- }], nameField: [{
2634
- type: Input
2635
- }], label: [{
2636
- type: Input
2637
- }], data: [{
2638
- type: Input
2639
- }], onClick: [{
2640
- type: HostListener,
2641
- args: ['document:click', ['$event']]
2642
- }], valueChange: [{
2643
- type: Output
2644
- }] } });
2645
-
2646
- class ImageDirectoryComponent {
2647
- Zonev2Service;
2648
- gs;
2649
- cd;
2650
- modalService;
2651
- fb;
2652
- selectIndex = 0;
2653
- selectedTime;
2654
- objData;
2655
- objectsArray;
2656
- imagesArrayData;
2657
- processType = "footfall";
2658
- headerData;
2659
- folderView = true;
2660
- dayjs = dayjs;
2661
- dateArray;
2662
- form;
2663
- noData = false;
2664
- loading = true;
2665
- storeArrayValue;
2666
- storeIdarray;
2667
- constructor(Zonev2Service, gs, cd, modalService, fb) {
2668
- this.Zonev2Service = Zonev2Service;
2669
- this.gs = gs;
2670
- this.cd = cd;
2671
- this.modalService = modalService;
2672
- this.fb = fb;
2673
- this.form = this.fb.group({
2674
- selectValue: new FormControl('') // Initialize as FormControl
2675
- });
2676
- }
2677
- ngOnInit() {
2678
- this.gs.dataRangeValue
2679
- .pipe(takeUntil(this.destroy$), debounceTime$1(300))
2680
- .subscribe((data) => {
2681
- if (data !== null || data?.client !== null) {
2682
- this.headerData = data;
2683
- this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
2684
- this.objData = {
2685
- storeId: data.stores
2686
- .filter((store) => store.checked)
2687
- .map((store) => store.storeId),
2688
- clientId: data.client,
2689
- processType: this.processType,
2690
- footfallDate: this.headerData.date.endDate,
2691
- };
2692
- const initialValue = this.getInitialValue();
2693
- const selectControl = this.form.get('selectValue');
2694
- if (selectControl) {
2695
- selectControl.setValue(initialValue);
2696
- }
2697
- this.backToFootfall();
2698
- this.displayDateRange();
2699
- }
2700
- });
2701
- }
2702
- destroy$ = new Subject();
2703
- ngOnDestroy() {
2704
- this.destroy$.next(true);
2705
- this.destroy$.complete();
2706
- }
2707
- getImageFolder() {
2708
- delete this.objData.folderName;
2709
- this.Zonev2Service
2710
- .getFootfallDirectoryFolders(this.objData)
2711
- .pipe(takeUntil(this.destroy$))
2712
- ?.subscribe({
2713
- next: (res) => {
2714
- if (res && res.code === 200) {
2715
- this.objectsArray = res?.data.footfallData;
2716
- this.selectedTime = this.objectsArray[0].folderName;
2717
- this.objData.folderName = this.selectedTime;
2718
- this.getImageView();
2719
- this.cd.detectChanges();
2720
- }
2721
- else {
2722
- this.loading = false;
2723
- this.noData = true;
2724
- }
2725
- },
2726
- error: (err) => {
2727
- this.cd.detectChanges();
2728
- },
2729
- complete: () => { },
2730
- });
2731
- }
2732
- getImageView() {
2733
- this.loading = true;
2734
- this.noData = false;
2735
- this.Zonev2Service
2736
- .getFootfallDirectory(this.objData)
2737
- .pipe(takeUntil(this.destroy$))
2738
- ?.subscribe({
2739
- next: (res) => {
2740
- if (res && res.code === 200) {
2741
- if (!res?.data.footfallData.length) {
2742
- this.loading = false;
2743
- this.noData = true;
2744
- }
2745
- else {
2746
- this.imagesArrayData = res?.data.footfallData;
2747
- this.storeArrayValue = res?.data.storeName;
2748
- this.loading = false;
2749
- this.noData = false;
2750
- this.cd.detectChanges();
2751
- }
2752
- }
2753
- else {
2754
- this.loading = false;
2755
- this.noData = true;
2756
- }
2757
- },
2758
- error: (err) => {
2759
- this.cd.detectChanges();
2760
- },
2761
- complete: () => { },
2762
- });
2763
- }
2764
- getimages(index, obj) {
2765
- this.selectIndex = index;
2766
- (this.objData.footfallDate = obj), (this.folderView = false);
2767
- this.getImageFolder();
2768
- }
2769
- backToFootfall() {
2770
- this.selectIndex = 0;
2771
- this.folderView = true;
2772
- }
2773
- selectedTimes(val) {
2774
- this.selectedTime = val;
2775
- this.objData.folderName = val;
2776
- this.folderView = false;
2777
- this.selectedTime = val;
2778
- this.getImageView();
2779
- }
2780
- imageView(obj, footfallDate) {
2781
- const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
2782
- centered: true,
2783
- size: "xl",
2784
- scrollable: true,
2785
- });
2786
- modalRef.componentInstance.Imagedata = obj;
2787
- modalRef.componentInstance.processType = this.objData.processType;
2788
- modalRef.componentInstance.footfallDate = footfallDate;
2789
- modalRef.componentInstance.storeName = this.storeArrayValue;
2790
- modalRef.componentInstance.storeId = this.storeIdarray;
2791
- modalRef.componentInstance.headerData = this.headerData;
2792
- modalRef.componentInstance.imageArray = this.objectsArray;
2793
- modalRef.componentInstance.folderName = this.objData.folderName;
2794
- modalRef.result.then((result) => { });
2795
- }
2796
- getDateRangeArray(fromDate, toDate) {
2797
- const start = new Date(fromDate); // Convert string to Date object
2798
- const end = new Date(toDate); // Convert string to Date object
2799
- const dateArray = [];
2800
- // Check if the dates are valid
2801
- if (isNaN(start.getTime()) || isNaN(end.getTime())) {
2802
- return dateArray;
2803
- }
2804
- // Loop from start date to end date
2805
- let currentDate = start;
2806
- while (currentDate <= end) {
2807
- dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
2808
- currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
2809
- }
2810
- return dateArray;
2811
- }
2812
- // Method to display or log the date range array
2813
- displayDateRange() {
2814
- const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
2815
- this.dateArray = dates;
2816
- }
2817
- datasets = [
2818
- { value: 'footfall', label: 'Footfall' },
2819
- { value: 'bounced', label: 'Bounced Footfall' },
2820
- { value: 'engager', label: 'Engagers' },
2821
- { value: 'missedOpportunity', label: 'Missed Opportunity' },
2822
- { value: 'conversion', label: 'Conversion' }
2823
- ];
2824
- getInitialValue() {
2825
- // For example, selecting the second item in the dataset
2826
- return this.datasets[0].value; // Change as needed
2827
- }
2828
- onValueChange(selectedId) {
2829
- this.objData.processType = selectedId,
2830
- this.getImageFolder();
2831
- }
2832
- get selectControl() {
2833
- return this.form.get('selectValue');
2834
- }
2835
- 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 });
2836
- 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" }] });
2837
- }
2838
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
2839
- type: Component,
2840
- 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"] }]
2841
- }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
2842
-
2843
2475
  class StoreHeatmapComponent {
2844
2476
  zone;
2845
2477
  modalService;
@@ -3414,41 +3046,124 @@ class StoreHeatmapComponent {
3414
3046
  nextElement?.removeAttribute('style');
3415
3047
  }
3416
3048
  }
3417
- scrollLeft() {
3418
- const element = this.dateList.nativeElement;
3419
- element.scrollBy({ left: -200, behavior: 'smooth' });
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;
3420
3111
  }
3421
- scrollRight() {
3422
- const element = this.dateList.nativeElement;
3423
- element.scrollBy({ left: 200, behavior: 'smooth' });
3112
+ setDisabledState(isDisabled) {
3113
+ this.isDisabled = isDisabled;
3424
3114
  }
3425
- zonescrollLeft() {
3426
- this.zoneNameList.nativeElement.scrollBy({
3427
- left: -150,
3428
- behavior: 'smooth'
3429
- });
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);
3430
3122
  }
3431
- zonescrollRight() {
3432
- this.zoneNameList.nativeElement.scrollBy({
3433
- left: 150,
3434
- behavior: 'smooth'
3435
- });
3123
+ onSelectionChange(item) {
3124
+ this.valueChange.emit(item?.[this.idField]);
3436
3125
  }
3437
- 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 });
3438
- 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" }] });
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;
3140
+ }
3141
+ else {
3142
+ return this.isComponentClicked(parentElement);
3143
+ }
3144
+ }
3145
+ return false;
3146
+ }
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"] }] });
3439
3150
  }
3440
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
3151
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
3441
3152
  type: Component,
3442
- 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"] }]
3443
- }], 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: [{
3444
- type: ViewChild,
3445
- args: ['carousel', { static: true }]
3446
- }], dateList: [{
3447
- type: ViewChild,
3448
- args: ['dateList', { read: ElementRef }]
3449
- }], zoneNameList: [{
3450
- type: ViewChild,
3451
- args: ['zoneNameList', { read: ElementRef }]
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
3452
3167
  }] } });
3453
3168
 
3454
3169
  class CustomerJourneyComponent {
@@ -3533,7 +3248,7 @@ class CustomerJourneyComponent {
3533
3248
  }
3534
3249
  getCustomerJourney() {
3535
3250
  this.customerjourneyLoading = true;
3536
- this.customerjourneyNoData = true;
3251
+ this.customerjourneyNoData = false;
3537
3252
  const requestData = {
3538
3253
  fromDate: this.headerData?.date?.startDate,
3539
3254
  toDate: this.headerData?.date?.endDate,
@@ -3780,11 +3495,11 @@ class CustomerJourneyComponent {
3780
3495
  });
3781
3496
  }
3782
3497
  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 });
3783
- 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"] }] });
3498
+ 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"] }] });
3784
3499
  }
3785
3500
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerJourneyComponent, decorators: [{
3786
3501
  type: Component,
3787
- 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"] }]
3502
+ 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"] }]
3788
3503
  }], 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 }] });
3789
3504
 
3790
3505
  class TopPerformingComponent {
@@ -4222,100 +3937,385 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
4222
3937
  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"] }]
4223
3938
  }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i3.ToastService }] });
4224
3939
 
4225
- class ZoneV2Component {
4226
- pageInfo;
3940
+ class ZoneV2Component {
3941
+ pageInfo;
3942
+ gs;
3943
+ zoneService;
3944
+ cd;
3945
+ storeId = 0;
3946
+ headerData;
3947
+ showReportProcessingCard = true;
3948
+ yesterdayDate = '';
3949
+ dataProcessedLoading = true;
3950
+ destroy$ = new Subject();
3951
+ ngOnDestroy() {
3952
+ this.destroy$.next(true);
3953
+ this.destroy$.complete();
3954
+ }
3955
+ constructor(pageInfo, gs, zoneService, cd) {
3956
+ this.pageInfo = pageInfo;
3957
+ this.gs = gs;
3958
+ this.zoneService = zoneService;
3959
+ this.cd = cd;
3960
+ }
3961
+ ngOnInit() {
3962
+ this.gs.dataRangeValue
3963
+ .pipe(takeUntil(this.destroy$), debounceTime(300))
3964
+ .subscribe((data) => {
3965
+ this.headerData = data;
3966
+ this.updateStoreId();
3967
+ this.setPageData();
3968
+ this.checkTodayReportStatus();
3969
+ });
3970
+ }
3971
+ setPageData() {
3972
+ this.pageInfo.setTitle("Zones");
3973
+ this.pageInfo.setDescription("Zones");
3974
+ this.pageInfo.setBreadcrumbs([
3975
+ { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: false },
3976
+ { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: true },
3977
+ ]);
3978
+ }
3979
+ updateStoreId() {
3980
+ this.storeId = this.headerData.stores.filter((store) => store.checked).length;
3981
+ }
3982
+ checkTodayReportStatus() {
3983
+ this.dataProcessedLoading = true;
3984
+ const reportParams = {
3985
+ clientId: this.headerData?.client,
3986
+ fromDate: this.headerData?.date?.startDate,
3987
+ toDate: this.headerData?.date?.endDate
3988
+ };
3989
+ this.zoneService.getCheckTodayReportStatus(reportParams)
3990
+ .pipe(takeUntil(this.destroy$))
3991
+ .subscribe({
3992
+ next: (res) => {
3993
+ this.dataProcessedLoading = false;
3994
+ this.showReportProcessingCard = res?.data?.reportSendStatus === true;
3995
+ this.yesterdayDate = res?.data?.yesterday || '';
3996
+ this.cd.detectChanges();
3997
+ },
3998
+ error: (err) => {
3999
+ console.error('Error checking report status:', err);
4000
+ this.showReportProcessingCard = false;
4001
+ }
4002
+ });
4003
+ }
4004
+ 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 });
4005
+ 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" }] });
4006
+ }
4007
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, decorators: [{
4008
+ type: Component,
4009
+ 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"] }]
4010
+ }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
4011
+
4012
+ const routes = [
4013
+ {
4014
+ path: 'v1',
4015
+ component: TangoAnalyseZoneComponent
4016
+ },
4017
+ {
4018
+ path: 'v2',
4019
+ component: ZoneV2Component
4020
+ }
4021
+ ];
4022
+ class TangoAnalyseZoneRoutingModule {
4023
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4024
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] });
4025
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
4026
+ }
4027
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
4028
+ type: NgModule,
4029
+ args: [{
4030
+ imports: [RouterModule.forChild(routes)],
4031
+ exports: [RouterModule]
4032
+ }]
4033
+ }] });
4034
+
4035
+ class ImageDirectoryViewComponent {
4036
+ Zonev2Service;
4037
+ cd;
4038
+ Imagedata;
4039
+ processType;
4040
+ footfallDate;
4041
+ storeName;
4042
+ storeId;
4043
+ headerData;
4044
+ imageArray;
4045
+ folderName;
4046
+ Images;
4047
+ itemsPerPage = 10;
4048
+ currentPage = 1;
4049
+ totalItems = 1;
4050
+ paginationSizes = [1];
4051
+ pageSize = 1;
4052
+ dataSubscrptionValue = [];
4053
+ statusValues;
4054
+ filteredData;
4055
+ objData;
4056
+ storeArrayValue;
4057
+ constructor(Zonev2Service, cd) {
4058
+ this.Zonev2Service = Zonev2Service;
4059
+ this.cd = cd;
4060
+ }
4061
+ ngOnInit() {
4062
+ this.Images = this.Imagedata?.images?.entryTimeImage;
4063
+ this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
4064
+ this.totalItems = this.filteredData[0].count;
4065
+ this.getStoreActive();
4066
+ }
4067
+ destroy$ = new Subject();
4068
+ ngOnDestroy() {
4069
+ this.destroy$.next(true);
4070
+ this.destroy$.complete();
4071
+ }
4072
+ getStoreActive() {
4073
+ let obj = {
4074
+ "clientId": this.headerData.client,
4075
+ "storeId": this.storeId
4076
+ };
4077
+ this.Zonev2Service
4078
+ .getStoresActive(obj)
4079
+ .pipe(takeUntil(this.destroy$))
4080
+ ?.subscribe({
4081
+ next: (res) => {
4082
+ if (res && res.code === 200) {
4083
+ this.dataSubscrptionValue = res.data.storeSubscription.product;
4084
+ }
4085
+ }
4086
+ });
4087
+ }
4088
+ imageData(type) {
4089
+ if (type === 'entry') {
4090
+ this.Images = this.Imagedata?.images?.entryTimeImage;
4091
+ }
4092
+ else if (type === 'exit') {
4093
+ this.Images = this.Imagedata?.images?.exitTimeImage;
4094
+ }
4095
+ else if (type === 'staff') {
4096
+ this.Images = this.Imagedata?.images?.staffEngagementImage;
4097
+ }
4098
+ }
4099
+ 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 });
4100
+ 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" }] });
4101
+ }
4102
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
4103
+ type: Component,
4104
+ 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"] }]
4105
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
4106
+ type: Input
4107
+ }], processType: [{
4108
+ type: Input
4109
+ }], footfallDate: [{
4110
+ type: Input
4111
+ }], storeName: [{
4112
+ type: Input
4113
+ }], storeId: [{
4114
+ type: Input
4115
+ }], headerData: [{
4116
+ type: Input
4117
+ }], imageArray: [{
4118
+ type: Input
4119
+ }], folderName: [{
4120
+ type: Input
4121
+ }] } });
4122
+
4123
+ class ImageDirectoryComponent {
4124
+ Zonev2Service;
4227
4125
  gs;
4228
- zoneService;
4229
4126
  cd;
4230
- storeId = 0;
4127
+ modalService;
4128
+ fb;
4129
+ selectIndex = 0;
4130
+ selectedTime;
4131
+ objData;
4132
+ objectsArray;
4133
+ imagesArrayData;
4134
+ processType = "footfall";
4231
4135
  headerData;
4232
- showReportProcessingCard = true;
4233
- yesterdayDate = '';
4234
- dataProcessedLoading = true;
4235
- destroy$ = new Subject();
4236
- ngOnDestroy() {
4237
- this.destroy$.next(true);
4238
- this.destroy$.complete();
4239
- }
4240
- constructor(pageInfo, gs, zoneService, cd) {
4241
- this.pageInfo = pageInfo;
4136
+ folderView = true;
4137
+ dayjs = dayjs;
4138
+ dateArray;
4139
+ form;
4140
+ noData = false;
4141
+ loading = true;
4142
+ storeArrayValue;
4143
+ storeIdarray;
4144
+ constructor(Zonev2Service, gs, cd, modalService, fb) {
4145
+ this.Zonev2Service = Zonev2Service;
4242
4146
  this.gs = gs;
4243
- this.zoneService = zoneService;
4244
4147
  this.cd = cd;
4148
+ this.modalService = modalService;
4149
+ this.fb = fb;
4150
+ this.form = this.fb.group({
4151
+ selectValue: new FormControl('') // Initialize as FormControl
4152
+ });
4245
4153
  }
4246
4154
  ngOnInit() {
4247
4155
  this.gs.dataRangeValue
4248
- .pipe(takeUntil(this.destroy$), debounceTime(300))
4156
+ .pipe(takeUntil(this.destroy$), debounceTime$1(300))
4249
4157
  .subscribe((data) => {
4250
- this.headerData = data;
4251
- this.updateStoreId();
4252
- this.setPageData();
4253
- this.checkTodayReportStatus();
4158
+ if (data !== null || data?.client !== null) {
4159
+ this.headerData = data;
4160
+ this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
4161
+ this.objData = {
4162
+ storeId: data.stores
4163
+ .filter((store) => store.checked)
4164
+ .map((store) => store.storeId),
4165
+ clientId: data.client,
4166
+ processType: this.processType,
4167
+ footfallDate: this.headerData.date.endDate,
4168
+ };
4169
+ const initialValue = this.getInitialValue();
4170
+ const selectControl = this.form.get('selectValue');
4171
+ if (selectControl) {
4172
+ selectControl.setValue(initialValue);
4173
+ }
4174
+ this.backToFootfall();
4175
+ this.displayDateRange();
4176
+ }
4254
4177
  });
4255
4178
  }
4256
- setPageData() {
4257
- this.pageInfo.setTitle("Zones");
4258
- this.pageInfo.setDescription("Zones");
4259
- this.pageInfo.setBreadcrumbs([
4260
- { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: false },
4261
- { title: "Tango Eye", path: "/manage/traffic", isActive: false, isSeparator: true },
4262
- ]);
4263
- }
4264
- updateStoreId() {
4265
- this.storeId = this.headerData.stores.filter((store) => store.checked).length;
4179
+ destroy$ = new Subject();
4180
+ ngOnDestroy() {
4181
+ this.destroy$.next(true);
4182
+ this.destroy$.complete();
4266
4183
  }
4267
- checkTodayReportStatus() {
4268
- this.dataProcessedLoading = true;
4269
- const reportParams = {
4270
- clientId: this.headerData?.client,
4271
- fromDate: this.headerData?.date?.startDate,
4272
- toDate: this.headerData?.date?.endDate
4273
- };
4274
- this.zoneService.getCheckTodayReportStatus(reportParams)
4184
+ getImageFolder() {
4185
+ delete this.objData.folderName;
4186
+ this.Zonev2Service
4187
+ .getFootfallDirectoryFolders(this.objData)
4275
4188
  .pipe(takeUntil(this.destroy$))
4276
- .subscribe({
4189
+ ?.subscribe({
4277
4190
  next: (res) => {
4278
- this.dataProcessedLoading = false;
4279
- this.showReportProcessingCard = res?.data?.reportSendStatus === true;
4280
- this.yesterdayDate = res?.data?.yesterday || '';
4191
+ if (res && res.code === 200) {
4192
+ this.objectsArray = res?.data.footfallData;
4193
+ this.selectedTime = this.objectsArray[0].folderName;
4194
+ this.objData.folderName = this.selectedTime;
4195
+ this.getImageView();
4196
+ this.cd.detectChanges();
4197
+ }
4198
+ else {
4199
+ this.loading = false;
4200
+ this.noData = true;
4201
+ }
4202
+ },
4203
+ error: (err) => {
4281
4204
  this.cd.detectChanges();
4282
4205
  },
4206
+ complete: () => { },
4207
+ });
4208
+ }
4209
+ getImageView() {
4210
+ this.loading = true;
4211
+ this.noData = false;
4212
+ this.Zonev2Service
4213
+ .getFootfallDirectory(this.objData)
4214
+ .pipe(takeUntil(this.destroy$))
4215
+ ?.subscribe({
4216
+ next: (res) => {
4217
+ if (res && res.code === 200) {
4218
+ if (!res?.data.footfallData.length) {
4219
+ this.loading = false;
4220
+ this.noData = true;
4221
+ }
4222
+ else {
4223
+ this.imagesArrayData = res?.data.footfallData;
4224
+ this.storeArrayValue = res?.data.storeName;
4225
+ this.loading = false;
4226
+ this.noData = false;
4227
+ this.cd.detectChanges();
4228
+ }
4229
+ }
4230
+ else {
4231
+ this.loading = false;
4232
+ this.noData = true;
4233
+ }
4234
+ },
4283
4235
  error: (err) => {
4284
- console.error('Error checking report status:', err);
4285
- this.showReportProcessingCard = false;
4286
- }
4236
+ this.cd.detectChanges();
4237
+ },
4238
+ complete: () => { },
4287
4239
  });
4288
4240
  }
4289
- 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 });
4290
- 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" }] });
4291
- }
4292
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneV2Component, decorators: [{
4293
- type: Component,
4294
- 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"] }]
4295
- }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }, { type: ZoneService }, { type: i0.ChangeDetectorRef }] });
4296
-
4297
- const routes = [
4298
- {
4299
- path: 'v1',
4300
- component: TangoAnalyseZoneComponent
4301
- },
4302
- {
4303
- path: 'v2',
4304
- component: ZoneV2Component
4241
+ getimages(index, obj) {
4242
+ this.selectIndex = index;
4243
+ (this.objData.footfallDate = obj), (this.folderView = false);
4244
+ this.getImageFolder();
4305
4245
  }
4306
- ];
4307
- class TangoAnalyseZoneRoutingModule {
4308
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
4309
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] });
4310
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
4246
+ backToFootfall() {
4247
+ this.selectIndex = 0;
4248
+ this.folderView = true;
4249
+ }
4250
+ selectedTimes(val) {
4251
+ this.selectedTime = val;
4252
+ this.objData.folderName = val;
4253
+ this.folderView = false;
4254
+ this.selectedTime = val;
4255
+ this.getImageView();
4256
+ }
4257
+ imageView(obj, footfallDate) {
4258
+ const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
4259
+ centered: true,
4260
+ size: "xl",
4261
+ scrollable: true,
4262
+ });
4263
+ modalRef.componentInstance.Imagedata = obj;
4264
+ modalRef.componentInstance.processType = this.objData.processType;
4265
+ modalRef.componentInstance.footfallDate = footfallDate;
4266
+ modalRef.componentInstance.storeName = this.storeArrayValue;
4267
+ modalRef.componentInstance.storeId = this.storeIdarray;
4268
+ modalRef.componentInstance.headerData = this.headerData;
4269
+ modalRef.componentInstance.imageArray = this.objectsArray;
4270
+ modalRef.componentInstance.folderName = this.objData.folderName;
4271
+ modalRef.result.then((result) => { });
4272
+ }
4273
+ getDateRangeArray(fromDate, toDate) {
4274
+ const start = new Date(fromDate); // Convert string to Date object
4275
+ const end = new Date(toDate); // Convert string to Date object
4276
+ const dateArray = [];
4277
+ // Check if the dates are valid
4278
+ if (isNaN(start.getTime()) || isNaN(end.getTime())) {
4279
+ return dateArray;
4280
+ }
4281
+ // Loop from start date to end date
4282
+ let currentDate = start;
4283
+ while (currentDate <= end) {
4284
+ dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
4285
+ currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
4286
+ }
4287
+ return dateArray;
4288
+ }
4289
+ // Method to display or log the date range array
4290
+ displayDateRange() {
4291
+ const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
4292
+ this.dateArray = dates;
4293
+ }
4294
+ datasets = [
4295
+ { value: 'footfall', label: 'Footfall' },
4296
+ { value: 'bounced', label: 'Bounced Footfall' },
4297
+ { value: 'engager', label: 'Engagers' },
4298
+ { value: 'missedOpportunity', label: 'Missed Opportunity' },
4299
+ { value: 'conversion', label: 'Conversion' }
4300
+ ];
4301
+ getInitialValue() {
4302
+ // For example, selecting the second item in the dataset
4303
+ return this.datasets[0].value; // Change as needed
4304
+ }
4305
+ onValueChange(selectedId) {
4306
+ this.objData.processType = selectedId,
4307
+ this.getImageFolder();
4308
+ }
4309
+ get selectControl() {
4310
+ return this.form.get('selectValue');
4311
+ }
4312
+ 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 });
4313
+ 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" }] });
4311
4314
  }
4312
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
4313
- type: NgModule,
4314
- args: [{
4315
- imports: [RouterModule.forChild(routes)],
4316
- exports: [RouterModule]
4317
- }]
4318
- }] });
4315
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
4316
+ type: Component,
4317
+ 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"] }]
4318
+ }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
4319
4319
 
4320
4320
  class InterationTableClient430Component {
4321
4321
  ZoneService;