tango-app-ui-analyse-zone 3.3.0-alpha.9 → 3.3.1-beta.2

package/fesm2022/tango-app-ui-analyse-zone.mjs

@@ -1,28 +1,30 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ElementRef, ViewChild, NgModule } from '@angular/core';
+import { Injectable, Component, Input, ElementRef, ViewChild, forwardRef, EventEmitter, HostListener, Output, NgModule } from '@angular/core';
 import { BehaviorSubject, takeUntil, Subject, throwError, debounceTime } from 'rxjs';
 import * as i2 from 'tango-app-ui-global';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as am5 from '@amcharts/amcharts5';
 import * as am5percent from '@amcharts/amcharts5/percent';
-import { takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs/operators';
 import * as FileSaver from 'file-saver';
 import * as XLSX from 'xlsx';
 import * as i1 from '@angular/common/http';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbCarouselConfig, NgbProgressbarModule, NgbCarouselModule, NgbTooltipModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCarouselConfig, NgbProgressbarModule, NgbTooltipModule, NgbModule, NgbAccordionModule, NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
 import * as am5xy from '@amcharts/amcharts5/xy';
 import * as i2$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from 'tango-app-ui-shared';
 import { CommonSharedModule } from 'tango-app-ui-shared';
 import * as i4$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import dayjs from 'dayjs';
+import * as am5flow from '@amcharts/amcharts5/flow';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
 
-const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
-const EXCEL_EXTENSION = '.xlsx';
+const EXCEL_TYPE$1 = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION$1 = '.xlsx';
 class ZoneService {
     http;
     gs;
@@ -49,15 +51,15 @@ class ZoneService {
     }
     saveAsExcelFile(buffer, fileName) {
         const data = new Blob([buffer], {
-            type: EXCEL_TYPE
+            type: EXCEL_TYPE$1
         });
-        FileSaver.saveAs(data, fileName + 'list' + EXCEL_EXTENSION);
+        FileSaver.saveAs(data, fileName + 'list' + EXCEL_EXTENSION$1);
     }
     saveAsTemplate(buffer, fileName) {
         const data = new Blob([buffer], {
-            type: EXCEL_TYPE
+            type: EXCEL_TYPE$1
         });
-        FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
+        FileSaver.saveAs(data, fileName + EXCEL_EXTENSION$1);
     }
     destroy$ = new Subject();
     ngOnDestroy() {
@@ -713,21 +715,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
         }], ctorParameters: () => [{ type: ZoneService }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4$1.Router }, { type: i4$1.ActivatedRoute }, { type: i4.ToastService }] });
 
 class ConcentrationheatmapComponent {
-    imageURL;
+    imageURLV1;
     overallStoreData = { ImageURLs: [] };
     constructor() { }
     ngOnInit() {
-        if (this.imageURL) {
-            this.overallStoreData.ImageURLs = this.imageURL;
+        if (this.imageURLV1) {
+            this.overallStoreData.ImageURLs = this.imageURLV1;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConcentrationheatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ConcentrationheatmapComponent, selector: "lib-concentrationheatmap", inputs: { imageURL: "imageURL" }, ngImport: i0, template: "<div class=\"modal-body\">\r\n<ngb-carousel *ngIf=\"overallStoreData?.ImageURLs?.length\">\r\n    <ng-container *ngFor=\"let image of overallStoreData.ImageURLs\">\r\n      <ng-template ngbSlide>\r\n        <div class=\"w-100 image-container\">\r\n          <img [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n        </div>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ngb-carousel>\r\n  </div>\r\n  ", styles: [".modal-body{text-align:center}.img-fluid{max-width:100%;height:auto}.cardimg{width:100%}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ConcentrationheatmapComponent, selector: "lib-concentrationheatmap", inputs: { imageURLV1: "imageURLV1" }, ngImport: i0, template: "<div class=\"modal-body\">\r\n<ngb-carousel *ngIf=\"overallStoreData?.ImageURLs?.length\">\r\n    <ng-container *ngFor=\"let image of overallStoreData.ImageURLs\">\r\n      <ng-template ngbSlide>\r\n        <div class=\"w-100 image-container\">\r\n          <img [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n        </div>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ngb-carousel>\r\n  </div>\r\n  ", styles: [".modal-body{text-align:center}.img-fluid{max-width:100%;height:auto}.cardimg{width:100%}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ConcentrationheatmapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-concentrationheatmap', template: "<div class=\"modal-body\">\r\n<ngb-carousel *ngIf=\"overallStoreData?.ImageURLs?.length\">\r\n    <ng-container *ngFor=\"let image of overallStoreData.ImageURLs\">\r\n      <ng-template ngbSlide>\r\n        <div class=\"w-100 image-container\">\r\n          <img [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n        </div>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ngb-carousel>\r\n  </div>\r\n  ", styles: [".modal-body{text-align:center}.img-fluid{max-width:100%;height:auto}.cardimg{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { imageURL: [{
+        }], ctorParameters: () => [], propDecorators: { imageURLV1: [{
                 type: Input
             }] } });
 
@@ -976,11 +978,11 @@ class ZoneConcentrationComponent {
         this.zoneName = zoneName;
         this.getOverallStoreHeatmapDates();
     }
-    concentrationHeatmap(imageURL) {
+    concentrationHeatmap(imageURLV1) {
         const modalRef = this.modalService.open(ConcentrationheatmapComponent, {
             centered: true, size: 'xl'
         });
-        modalRef.componentInstance.imageURL = imageURL;
+        modalRef.componentInstance.imageURLV1 = imageURLV1;
         modalRef.result.then((result) => {
         });
     }
@@ -1035,6 +1037,7 @@ class TangoAnalyseZoneComponent {
         ]);
     }
     updateStoreId() {
+        console.log("this.storeId", this.storeId);
         this.storeId = this.headerData.stores.filter((store) => store.checked).length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneComponent, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
@@ -1045,87 +1048,1703 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{ selector: 'lib-tango-analyse-zone', template: "<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 class=\"mt-2\" *ngIf=\"storeId > 1\">\r\n  <lib-top-performing-zones></lib-top-performing-zones>\r\n</div>\r\n<div class=\"mt-4\" *ngIf=\"storeId > 1\">\r\n  <lib-zone-summary-table></lib-zone-summary-table>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }] });
 
-class ZoneV2Component {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZoneV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ZoneV2Component, selector: "lib-zone-v2", ngImport: i0, template: "<p>zone-v2 works!</p>\r\n", styles: [""] });
+const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION = '.xlsx';
+class Zonev2Service {
+    http;
+    gs;
+    zoneAnalysisUrl;
+    trafficApiUrl;
+    reloadDataSubject = new BehaviorSubject(false);
+    reloadData$ = this.reloadDataSubject.asObservable();
+    constructor(http, gs) {
+        this.http = http;
+        this.gs = gs;
+        this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
+            if (env) {
+                this.zoneAnalysisUrl = env.zoneAnalysisUrl;
+                this.trafficApiUrl = env.trafficApiUrl;
+            }
+        });
+    }
+    triggerReload() {
+        this.reloadDataSubject.next(true);
+    }
+    exportAsExcelFile(json, excelFileName) {
+        const worksheet = XLSX.utils.json_to_sheet(json);
+        const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
+        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+        this.saveAsExcelFile(excelBuffer, excelFileName);
+    }
+    saveAsExcelFile(buffer, fileName) {
+        const data = new Blob([buffer], {
+            type: EXCEL_TYPE
+        });
+        FileSaver.saveAs(data, fileName + 'list' + EXCEL_EXTENSION);
+    }
+    saveAsTemplate(buffer, fileName) {
+        const data = new Blob([buffer], {
+            type: EXCEL_TYPE
+        });
+        FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
+    }
+    destroy$ = new Subject();
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    // V2 API
+    getZoneCardsData(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/zonecards`, data);
+    }
+    getTopPerformingZones(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/topPerformingZones`, data);
+    }
+    getTopPerformingStores(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/topPerformingStores`, data);
+    }
+    getSummaryTableData(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/zoneSummaryTable`, data);
+    }
+    getSummaryTableExport(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/zoneSummaryTable`, data, { responseType: 'arraybuffer' });
+    }
+    getAvailableZoneNames(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/availableZoneNames`, data);
+    }
+    getOverallStoreHeatmapDates(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/overallStoreConcentrationDates`, data);
+    }
+    getOverallStoreConcentrationData(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/overallStoreConcentrationHeatmap`, data);
+    }
+    getAnalaysisSummary(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/zoneConcentrationSummary`, data);
+    }
+    getTrajectoryAnalysis(data) {
+        return this.http.post(`${this.zoneAnalysisUrl}/trajectoryAnalysis`, data);
+    }
+    getFootfallDirectoryFolders(params) {
+        return this.http.post(`${this.trafficApiUrl}/footfallDirectoryFolders`, params);
+    }
+    getFootfallDirectory(params) {
+        return this.http.post(`${this.trafficApiUrl}/footfallDirectory`, params);
+    }
+    getStoresActive(params) {
+        return this.http.post(`${this.zoneAnalysisUrl}/getMySubscription`, params);
+    }
+    handleError(error) {
+        return throwError(() => new Error("Something bad happened; please try again later"));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Zonev2Service, deps: [{ token: i1.HttpClient }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Zonev2Service, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZoneV2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Zonev2Service, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.GlobalStateService }] });
+
+class ZonesCardsComponent {
+    Zonev2Service;
+    changeDetector;
+    gs;
+    zoneCardsData;
+    headerData;
+    destroy$ = new Subject();
+    constructor(Zonev2Service, changeDetector, gs) {
+        this.Zonev2Service = Zonev2Service;
+        this.changeDetector = changeDetector;
+        this.gs = gs;
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil$1(this.destroy$), debounceTime(300))
+            .subscribe((data) => {
+            this.headerData = data;
+            this.getZoneCards();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getZoneCards() {
+        const requestData = {
+            fromDate: '2024-07-01',
+            toDate: '2024-07-22',
+            storeId: ['11'],
+            // clientId:this.headerData.client,
+        };
+        this.Zonev2Service.getZoneCardsData(requestData).pipe(takeUntil$1(this.destroy$)).subscribe((response) => {
+            if (response?.status === 'success') {
+                this.zoneCardsData = response.data.card;
+            }
+            else {
+                this.zoneCardsData = [];
+            }
+        }, (error) => {
+            this.zoneCardsData = [];
+            console.error('Error fetching zone card data', error);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZonesCardsComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ZonesCardsComponent, selector: "lib-zones-cards", ngImport: i0, template: "<div class=\"col-md-12\">\r\n    <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n\r\n        <!-- Total Store Footfall Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.footfall?.count ? zoneCardsData?.footfall?.count : '--'}}</span>\r\n                        <span class=\"cardtext\">Total Store Footfall</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.footfall?.zoneName ? zoneCardsData?.footfall?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Footfall <span class=\"subcount\">- {{zoneCardsData?.footfall?.zoneFootfallCount ? zoneCardsData?.footfall?.zoneFootfallCount : '--'}}</span></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Highest Impression Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.impression?.rate ? zoneCardsData?.impression?.rate + '%' : '--'}}</span>\r\n                        <span class=\"cardtext\">Highest impression</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.impression?.zoneName ? zoneCardsData?.impression?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with <span class=\"subcount\">{{zoneCardsData?.impression?.zoneImpressionRate ? zoneCardsData?.impression?.zoneImpressionRate + '%' : '--'}}</span> <br> impression</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Total Bounced Rate Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.bounced?.rate ? zoneCardsData?.bounced?.rate + '%' : '--'}}</span>\r\n                        <span class=\"cardtext\">Total Bounced Rate</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.bounced?.zoneName ? zoneCardsData?.bounced?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Bounced rate</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Engagers Rate Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.engagers?.rate ? zoneCardsData?.engagers?.rate + '%' : '--'}}</span>\r\n                        <span class=\"cardtext\">Engagers Rate</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.engagers?.zoneName ? zoneCardsData?.engagers?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Engager Rate</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Average Dwell Time Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.avgDwellTime?.rate ? zoneCardsData?.avgDwellTime?.rate + ' Mins' : '--'}}</span>\r\n                        <span class=\"cardtext\">Average Dwell Time</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.avgDwellTime?.zoneName ? zoneCardsData?.avgDwellTime?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Dwell Time</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:21px}.subcount{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:700;line-height:20px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.zonecard{width:130%;background:var(--White, #FFF)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZonesCardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-zone-v2', template: "<p>zone-v2 works!</p>\r\n" }]
-        }] });
+            args: [{ selector: 'lib-zones-cards', template: "<div class=\"col-md-12\">\r\n    <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n\r\n        <!-- Total Store Footfall Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.footfall?.count ? zoneCardsData?.footfall?.count : '--'}}</span>\r\n                        <span class=\"cardtext\">Total Store Footfall</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.footfall?.zoneName ? zoneCardsData?.footfall?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Footfall <span class=\"subcount\">- {{zoneCardsData?.footfall?.zoneFootfallCount ? zoneCardsData?.footfall?.zoneFootfallCount : '--'}}</span></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Highest Impression Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.impression?.rate ? zoneCardsData?.impression?.rate + '%' : '--'}}</span>\r\n                        <span class=\"cardtext\">Highest impression</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.impression?.zoneName ? zoneCardsData?.impression?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with <span class=\"subcount\">{{zoneCardsData?.impression?.zoneImpressionRate ? zoneCardsData?.impression?.zoneImpressionRate + '%' : '--'}}</span> <br> impression</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Total Bounced Rate Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.bounced?.rate ? zoneCardsData?.bounced?.rate + '%' : '--'}}</span>\r\n                        <span class=\"cardtext\">Total Bounced Rate</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.bounced?.zoneName ? zoneCardsData?.bounced?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Bounced rate</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Engagers Rate Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.engagers?.rate ? zoneCardsData?.engagers?.rate + '%' : '--'}}</span>\r\n                        <span class=\"cardtext\">Engagers Rate</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.engagers?.zoneName ? zoneCardsData?.engagers?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Engager Rate</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Average Dwell Time Card -->\r\n        <div class=\"col px-2\">\r\n            <div class=\"card card-border pt-2 h-100\">\r\n                <div class=\"card-header ellipse1 border-0 px-3\">\r\n                    <h3 class=\"card-title align-items-start flex-column\">\r\n                        <span class=\"cardcount\">{{zoneCardsData?.avgDwellTime?.rate ? zoneCardsData?.avgDwellTime?.rate + ' Mins' : '--'}}</span>\r\n                        <span class=\"cardtext\">Average Dwell Time</span>\r\n                    </h3>\r\n                </div>\r\n                <div class=\"card-body p-0\">\r\n                    <div class=\"h-100px py-3 px-3\">\r\n                        <div class=\"cardcount my-2\"><u>{{zoneCardsData?.avgDwellTime?.zoneName ? zoneCardsData?.avgDwellTime?.zoneName : '--'}}</u></div>\r\n                        <div class=\"cardtext\">Zone with the <br> Highest Dwell Time</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Gray-900, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.cardtext{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:500;line-height:21px}.subcount{color:var(--Gray-700, #344054);font-size:14px;font-style:normal;font-weight:700;line-height:20px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.zonecard{width:130%;background:var(--White, #FFF)}\n"] }]
+        }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }] });
 
-const routes = [
-    {
-        path: '',
-        component: TangoAnalyseZoneComponent
-    },
-    {
-        path: 'v2',
-        component: ZoneV2Component
+class StoreZoomHeatmapComponent {
+    imageURL;
+    overallStoreData = { ImageURLs: [] };
+    constructor() { }
+    ngOnInit() {
+        if (this.imageURL) {
+            this.overallStoreData.ImageURLs = this.imageURL;
+        }
     }
-];
-class TangoAnalyseZoneRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StoreZoomHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: StoreZoomHeatmapComponent, selector: "lib-store-zoom-heatmap", inputs: { imageURL: "imageURL" }, ngImport: i0, template: "<div class=\"modal-body\">\r\n    <ngb-carousel *ngIf=\"overallStoreData?.ImageURLs?.length\">\r\n        <ng-container *ngFor=\"let image of overallStoreData.ImageURLs\">\r\n          <ng-template ngbSlide>\r\n            <div class=\"w-100 image-container\">\r\n              <img [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ngb-carousel>\r\n      </div>\r\n      ", styles: [".modal-body{text-align:center}.img-fluid{max-width:100%;height:auto}.cardimg{width:100%}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [RouterModule.forChild(routes)],
-                    exports: [RouterModule]
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StoreZoomHeatmapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-store-zoom-heatmap', template: "<div class=\"modal-body\">\r\n    <ngb-carousel *ngIf=\"overallStoreData?.ImageURLs?.length\">\r\n        <ng-container *ngFor=\"let image of overallStoreData.ImageURLs\">\r\n          <ng-template ngbSlide>\r\n            <div class=\"w-100 image-container\">\r\n              <img [src]=\"image.URL\" [alt]=\"image.streamName\" class=\"cardimg\" />\r\n            </div>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ngb-carousel>\r\n      </div>\r\n      ", styles: [".modal-body{text-align:center}.img-fluid{max-width:100%;height:auto}.cardimg{width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { imageURL: [{
+                type: Input
+            }] } });
 
-class TangoAnalyseZoneModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, declarations: [OverallcardsComponent,
-            TangoAnalyseZoneComponent,
-            TopPerformingZonesComponent,
-            ZoneSummaryTableComponent,
-            ZoneConcentrationComponent,
-            ConcentrationheatmapComponent,
-            ZoneV2Component], imports: [CommonModule,
-            TangoAnalyseZoneRoutingModule,
-            NgbProgressbarModule,
-            FormsModule,
-            ReactiveFormsModule,
-            NgbCarouselModule,
-            CommonSharedModule,
-            NgbTooltipModule,
-            NgbModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, imports: [CommonModule,
-            TangoAnalyseZoneRoutingModule,
-            NgbProgressbarModule,
-            FormsModule,
-            ReactiveFormsModule,
-            NgbCarouselModule,
-            CommonSharedModule,
-            NgbTooltipModule,
-            NgbModule] });
+class ImageDirectoryViewComponent {
+    Zonev2Service;
+    cd;
+    Imagedata;
+    processType;
+    footfallDate;
+    storeName;
+    storeId;
+    headerData;
+    imageArray;
+    folderName;
+    Images;
+    itemsPerPage = 10;
+    currentPage = 1;
+    totalItems = 1;
+    paginationSizes = [1];
+    pageSize = 1;
+    dataSubscrptionValue = [];
+    statusValues;
+    filteredData;
+    objData;
+    storeArrayValue;
+    constructor(Zonev2Service, cd) {
+        this.Zonev2Service = Zonev2Service;
+        this.cd = cd;
+    }
+    ngOnInit() {
+        this.Images = this.Imagedata?.images?.entryTimeImage;
+        this.filteredData = this.imageArray.filter((item) => item.folderName === this.folderName);
+        this.totalItems = this.filteredData[0].count;
+        this.getStoreActive();
+    }
+    destroy$ = new Subject();
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    getStoreActive() {
+        let obj = {
+            "clientId": this.headerData.client,
+            "storeId": this.storeId
+        };
+        this.Zonev2Service
+            .getStoresActive(obj)
+            .pipe(takeUntil(this.destroy$))
+            ?.subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.dataSubscrptionValue = res.data.storeSubscription.product;
+                }
+            }
+        });
+    }
+    imageData(type) {
+        if (type === 'entry') {
+            this.Images = this.Imagedata?.images?.entryTimeImage;
+        }
+        else if (type === 'exit') {
+            this.Images = this.Imagedata?.images?.exitTimeImage;
+        }
+        else if (type === 'staff') {
+            this.Images = this.Imagedata?.images?.staffEngagementImage;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ImageDirectoryViewComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        OverallcardsComponent,
-                        TangoAnalyseZoneComponent,
-                        TopPerformingZonesComponent,
-                        ZoneSummaryTableComponent,
-                        ZoneConcentrationComponent,
-                        ConcentrationheatmapComponent,
-                        ZoneV2Component,
-                    ],
-                    imports: [
-                        CommonModule,
-                        TangoAnalyseZoneRoutingModule,
-                        NgbProgressbarModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgbCarouselModule,
-                        CommonSharedModule,
-                        NgbTooltipModule,
-                        NgbModule
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ImageDirectoryViewComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }], propDecorators: { Imagedata: [{
+                type: Input
+            }], processType: [{
+                type: Input
+            }], footfallDate: [{
+                type: Input
+            }], storeName: [{
+                type: Input
+            }], storeId: [{
+                type: Input
+            }], headerData: [{
+                type: Input
+            }], imageArray: [{
+                type: Input
+            }], folderName: [{
+                type: Input
+            }] } });
+
+const SELECT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ReactiveSelectComponent),
+    multi: true,
+};
+class ReactiveSelectComponent {
+    onTouched;
+    onChanged;
+    isDisabled;
+    idField;
+    nameField;
+    label;
+    data;
+    isOpened = false;
+    selected = null;
+    selectedId;
+    writeValue(val) {
+        this.selectedId = val;
+        this.selected = this.data.filter((item) => item?.[this.idField] === val)[0];
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    onSelect(item) {
+        this.onTouched();
+        this.selected = item;
+        this.selectedId = item?.[this.idField];
+        this.isOpened = false;
+        this.onChanged(this.selectedId);
+        this.onSelectionChange(item);
+    }
+    onSelectionChange(item) {
+        this.valueChange.emit(item?.[this.idField]);
+    }
+    onClick(event) {
+        if (!this.isDisabled) {
+            const targetElement = event.target;
+            if (!this.isComponentClicked(targetElement)) {
+                this.isOpened = false;
+            }
+        }
+    }
+    isComponentClicked(targetElement) {
+        const parentElement = targetElement.parentElement;
+        if (parentElement) {
+            const clickedOnComponent = parentElement.classList.contains('custom-select');
+            if (clickedOnComponent) {
+                return true;
+            }
+            else {
+                return this.isComponentClicked(parentElement);
+            }
+        }
+        return false;
+    }
+    valueChange = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReactiveSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReactiveSelectComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { idField: [{
+                type: Input
+            }], nameField: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class ImageDirectoryComponent {
+    Zonev2Service;
+    gs;
+    cd;
+    modalService;
+    fb;
+    selectIndex = 0;
+    selectedTime;
+    objData;
+    objectsArray;
+    imagesArrayData;
+    processType = "footfall";
+    headerData;
+    folderView = true;
+    dayjs = dayjs;
+    dateArray;
+    form;
+    noData = false;
+    loading = true;
+    storeArrayValue;
+    storeIdarray;
+    constructor(Zonev2Service, gs, cd, modalService, fb) {
+        this.Zonev2Service = Zonev2Service;
+        this.gs = gs;
+        this.cd = cd;
+        this.modalService = modalService;
+        this.fb = fb;
+        this.form = this.fb.group({
+            selectValue: new FormControl('') // Initialize as FormControl
+        });
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime$1(300))
+            .subscribe((data) => {
+            if (data !== null || data?.client !== null) {
+                this.headerData = data;
+                this.storeIdarray = this.headerData?.stores.filter((store) => store.checked).map((store) => store.storeId);
+                this.objData = {
+                    storeId: data.stores
+                        .filter((store) => store.checked)
+                        .map((store) => store.storeId),
+                    clientId: data.client,
+                    processType: this.processType,
+                    footfallDate: this.headerData.date.endDate,
+                };
+                const initialValue = this.getInitialValue();
+                const selectControl = this.form.get('selectValue');
+                if (selectControl) {
+                    selectControl.setValue(initialValue);
+                }
+                this.backToFootfall();
+                this.displayDateRange();
+            }
+        });
+    }
+    destroy$ = new Subject();
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    getImageFolder() {
+        delete this.objData.folderName;
+        this.Zonev2Service
+            .getFootfallDirectoryFolders(this.objData)
+            .pipe(takeUntil(this.destroy$))
+            ?.subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.objectsArray = res?.data.footfallData;
+                    this.selectedTime = this.objectsArray[0].folderName;
+                    this.objData.folderName = this.selectedTime;
+                    this.getImageView();
+                    this.cd.detectChanges();
+                }
+                else {
+                    this.loading = false;
+                    this.noData = true;
+                }
+            },
+            error: (err) => {
+                this.cd.detectChanges();
+            },
+            complete: () => { },
+        });
+    }
+    getImageView() {
+        this.loading = true;
+        this.noData = false;
+        this.Zonev2Service
+            .getFootfallDirectory(this.objData)
+            .pipe(takeUntil(this.destroy$))
+            ?.subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    if (!res?.data.footfallData.length) {
+                        this.loading = false;
+                        this.noData = true;
+                    }
+                    else {
+                        this.imagesArrayData = res?.data.footfallData;
+                        this.storeArrayValue = res?.data.storeName;
+                        this.loading = false;
+                        this.noData = false;
+                        this.cd.detectChanges();
+                    }
+                }
+                else {
+                    this.loading = false;
+                    this.noData = true;
+                }
+            },
+            error: (err) => {
+                this.cd.detectChanges();
+            },
+            complete: () => { },
+        });
+    }
+    getimages(index, obj) {
+        this.selectIndex = index;
+        (this.objData.footfallDate = obj), (this.folderView = false);
+        this.getImageFolder();
+    }
+    backToFootfall() {
+        this.selectIndex = 0;
+        this.folderView = true;
+    }
+    selectedTimes(val) {
+        this.selectedTime = val;
+        this.objData.folderName = val;
+        this.folderView = false;
+        this.selectedTime = val;
+        this.getImageView();
+    }
+    imageView(obj, footfallDate) {
+        const modalRef = this.modalService.open(ImageDirectoryViewComponent, {
+            centered: true,
+            size: "xl",
+            scrollable: true,
+        });
+        modalRef.componentInstance.Imagedata = obj;
+        modalRef.componentInstance.processType = this.objData.processType;
+        modalRef.componentInstance.footfallDate = footfallDate;
+        modalRef.componentInstance.storeName = this.storeArrayValue;
+        modalRef.componentInstance.storeId = this.storeIdarray;
+        modalRef.componentInstance.headerData = this.headerData;
+        modalRef.componentInstance.imageArray = this.objectsArray;
+        modalRef.componentInstance.folderName = this.objData.folderName;
+        modalRef.result.then((result) => { });
+    }
+    getDateRangeArray(fromDate, toDate) {
+        const start = new Date(fromDate); // Convert string to Date object
+        const end = new Date(toDate); // Convert string to Date object
+        const dateArray = [];
+        // Check if the dates are valid
+        if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+            return dateArray;
+        }
+        // Loop from start date to end date
+        let currentDate = start;
+        while (currentDate <= end) {
+            dateArray.push(currentDate.toISOString().split("T")[0]); // Format YYYY-MM-DD
+            currentDate.setDate(currentDate.getDate() + 1); // Increment the date by 1 day
+        }
+        return dateArray;
+    }
+    // Method to display or log the date range array
+    displayDateRange() {
+        const dates = this.getDateRangeArray(this.headerData.date.startDate, this.headerData.date.endDate);
+        this.dateArray = dates;
+    }
+    datasets = [
+        { value: 'footfall', label: 'Footfall' },
+        { value: 'bounced', label: 'Bounced Footfall' },
+        { value: 'engager', label: 'Engagers' },
+        { value: 'missedOpportunity', label: 'Missed Opportunity' },
+        { value: 'conversion', label: 'Conversion' }
+    ];
+    getInitialValue() {
+        // For example, selecting the second item in the dataset
+        return this.datasets[0].value; // Change as needed
+    }
+    onValueChange(selectedId) {
+        this.objData.processType = selectedId,
+            this.getImageFolder();
+    }
+    get selectControl() {
+        return this.form.get('selectValue');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ImageDirectoryComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: () => [{ type: Zonev2Service }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }] });
+
+class StoreHeatmapComponent {
+    zone;
+    modalService;
+    fb;
+    Zonev2Service;
+    changeDetector;
+    toast;
+    gs;
+    elementRef;
+    destroy$ = new Subject();
+    selectedTab = '';
+    headerData;
+    dayjs = dayjs;
+    disableDay = false;
+    disableWeek = false;
+    disableMonth = false;
+    type = '';
+    heatmapLoading = true;
+    heatmapNoData = false;
+    zoneName = '';
+    selectedDate = '';
+    overallStoreData = {};
+    overallStoreconcentrationData = {};
+    // zoneConcentrationData: any[] = [];
+    availableZones = [];
+    overallStoreConcentrationDates = [];
+    periodzone = 1;
+    customOption = false;
+    searchInput = "";
+    sortColumName = '';
+    sortBy = 1;
+    sortDirection = -1;
+    genderAnalysis = [];
+    ageAnalysis = [];
+    cardDataLoading = true;
+    cardNoData = false;
+    genderroot;
+    arcroot;
+    currentZone; // Declare as 'any' or use a specific type if known
+    otherZone;
+    arcDiagram;
+    constructor(zone, modalService, fb, Zonev2Service, changeDetector, toast, gs, elementRef) {
+        this.zone = zone;
+        this.modalService = modalService;
+        this.fb = fb;
+        this.Zonev2Service = Zonev2Service;
+        this.changeDetector = changeDetector;
+        this.toast = toast;
+        this.gs = gs;
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime(300))
+            .subscribe((data) => {
+            this.headerData = data;
+            let sDate = this.dayjs(this.headerData.date.startDate);
+            let eDate = this.dayjs(this.headerData.date.endDate);
+            if (eDate.diff(sDate, 'day') < 7) {
+                this.disableWeek = true;
+                this.disableMonth = true;
+                this.type = 'daily';
+            }
+            else if (eDate.diff(sDate, 'day') < 28) {
+                this.disableMonth = true;
+                this.type = 'weekly';
+            }
+            else {
+                this.disableDay = false;
+                this.disableWeek = false;
+                this.disableMonth = false;
+                this.type = 'monthly';
+            }
+            this.getAvailableZoneNames();
+            this.getAnalaysisSummary();
+            this.getTrajectoryAnalysis();
+            // this.getOverallStoreConcentrationData();
+            // this.getOverallStoreHeatmapDates();
+        });
+    }
+    ngOnDestroy() {
+        if (this.genderroot) {
+            this.genderroot.dispose();
+        }
+        if (this.arcroot) {
+            this.arcroot.dispose();
+        }
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    changeTab(tabName) {
+        this.selectedTab = tabName;
+        this.getOverallStoreHeatmapDates();
+    }
+    getAvailableZoneNames() {
+        this.heatmapLoading = true;
+        this.heatmapNoData = true;
+        const requestData = {
+            fromDate: this.headerData.date.startDate,
+            toDate: this.headerData.date.endDate,
+            storeId: this.headerData.storeId
+        };
+        this.Zonev2Service.getAvailableZoneNames(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
+            console.log(response, 'response');
+            if (response?.code === 200 && response?.status === "success") {
+                this.availableZones = response.data.availableZoneData;
+                if (this.availableZones.length) {
+                    this.selectedTab = this.availableZones[0].zoneName;
+                    // this.changeTab(this.selectedTab);
+                }
+                // this.zoneName = response.data.zoneConcentrationData[0].zoneName;
+                // this.zoneName = this.availableZones.length ? this.availableZones[0].zoneName : '';
+                this.heatmapLoading = false;
+                this.heatmapNoData = false;
+                this.getOverallStoreHeatmapDates();
+            }
+            else {
+                // this.zonesummaryLoading = false;
+                // this.zonesummaryNoData = true;
+                this.heatmapLoading = false;
+                this.heatmapNoData = true;
+                this.availableZones = [];
+                // this.overallStoreData = []
+                this.zoneName = "";
+                this.changeDetector.detectChanges();
+            }
+        }, error => {
+            this.availableZones = [];
+            this.zoneName = "";
+            // this.headerData.date.startDate = null;
+            // this.headerData.date.endDate = null;
+            this.changeDetector.detectChanges();
+        });
+    }
+    getOverallStoreConcentrationData() {
+        this.heatmapLoading = true;
+        this.heatmapNoData = true;
+        const requestData = {
+            fromDate: this.headerData.date.startDate,
+            toDate: this.headerData.date.endDate,
+            storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
+            // storeId: ["11-1176"],
+            clientId: this.headerData.client,
+            zoneName: this.zoneName,
+            dateType: this.type,
+            zoneDate: this.selectedDate
+        };
+        this.Zonev2Service.getOverallStoreConcentrationData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
+            // this.heatmapLoading = false;
+            if (response?.code === 200 && response?.status === "success") {
+                // this.overallStoreData = response.data.overallStoreConcentrationDatas;
+                this.overallStoreconcentrationData = response.data.overallStoreConcentrationData;
+                this.heatmapLoading = false;
+                this.heatmapNoData = false;
+            }
+            else {
+                this.overallStoreconcentrationData = [];
+                // this.zoneConcentrationData = []
+                this.availableZones = [];
+                this.heatmapLoading = false;
+                this.heatmapNoData = true;
+            }
+        }, error => {
+            this.overallStoreconcentrationData = [];
+            // this.zoneConcentrationData = []
+            this.availableZones = [];
+            console.error('API call failed', error);
+        });
+    }
+    getOverallStoreHeatmapDates() {
+        this.heatmapLoading = true;
+        this.heatmapNoData = true;
+        const requestData = {
+            fromDate: this.headerData.date.startDate,
+            toDate: this.headerData.date.endDate,
+            storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
+            // storeId: ["11-1176"],
+            clientId: this.headerData.client,
+            zoneName: this.zoneName,
+            dateType: this.type
+        };
+        this.Zonev2Service.getOverallStoreHeatmapDates(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
+            //  this.heatmapLoading = false;
+            console.log(response?.code === 200 && response?.status === "success" && response.data.overallStoreConcentrationDates.length);
+            if (response?.code === 200 && response?.status === "success" && response.data.overallStoreConcentrationDates.length) {
+                this.overallStoreConcentrationDates = response.data.overallStoreConcentrationDates;
+                this.selectedDate = this.overallStoreConcentrationDates[0].zoneDate;
+                this.getOverallStoreConcentrationData();
+                //   this.heatmapLoading = false;
+                // this.heatmapNoData = false;
+            }
+            else {
+                this.heatmapLoading = false;
+                this.heatmapNoData = true;
+            }
+        }, error => {
+            console.error('API call failed', error);
+        });
+    }
+    onDateChange(date) {
+        if (this.selectedDate !== date) {
+            this.selectedDate = date;
+            this.getOverallStoreConcentrationData();
+        }
+    }
+    selectPlan(selectedType) {
+        this.type = selectedType;
+        this.getOverallStoreHeatmapDates();
+        // this.getOverallStoreConcentrationData();
+    }
+    onZoneClick(zoneName) {
+        this.zoneName = zoneName;
+        this.getOverallStoreHeatmapDates();
+    }
+    concentrationHeatmap(imageURL) {
+        const modalRef = this.modalService.open(StoreZoomHeatmapComponent, {
+            centered: true, size: 'xl'
+        });
+        modalRef.componentInstance.imageURL = imageURL;
+        modalRef.result.then((result) => {
+        });
+    }
+    genderchart() {
+        setTimeout(() => {
+            const chartDiv = document.getElementById("genderchartdiv");
+            if (!chartDiv) {
+                console.error("Could not find HTML element with id `genderchartdiv`");
+                return;
+            }
+            if (this.genderroot) {
+                this.genderroot.dispose();
+            }
+            this.genderroot = am5.Root.new('genderchartdiv');
+            const chart = this.genderroot.container.children.push(am5percent.PieChart.new(this.genderroot, {
+                endAngle: 270,
+                innerRadius: am5.percent(60)
+            }));
+            const series = chart.series.push(am5percent.PieSeries.new(this.genderroot, {
+                valueField: 'value',
+                categoryField: 'category',
+                endAngle: 270,
+                alignLabels: false
+            }));
+            series.states.create('hidden', {
+                endAngle: -90
+            });
+            series.labels.template.setAll({
+                textType: 'circular',
+                visible: false,
+                centerX: 0,
+                centerY: 0
+            });
+            series.data.setAll(this.genderAnalysis);
+            const legend = this.genderroot.container.children.push(am5.Legend.new(this.genderroot, {
+                x: am5.percent(50),
+                centerX: am5.percent(50),
+                y: am5.percent(94),
+                layout: this.genderroot.horizontalLayout,
+            }));
+            legend.labels.template.setAll({
+                text: "{category}: {value}%",
+                fill: am5.color("#464E5F"),
+                fontFamily: "Inter",
+                fontSize: "16px",
+                fontWeight: "400",
+            });
+            legend.valueLabels.template.setAll({
+                text: "{value}%",
+                fontWeight: "700",
+                fontFamily: "Inter",
+                fontSize: "14px",
+                fill: am5.color("#464E5F"),
+            });
+            legend.data.setAll(series.dataItems);
+            // Animation
+            series.appear(1000, 100);
+        }, 100);
+    }
+    // getAnalaysisSummary(): void {
+    //   this.cardDataLoading = true;
+    //   this.cardNoData = true;
+    //   const requestData = {
+    //     fromDate: this.headerData.date.startDate,
+    //     toDate: this.headerData.date.endDate,
+    //     storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+    //     // storeId: ["11-253", "11-511","11-1176"],
+    //     clientId:this.headerData.client,
+    //   };
+    //   this.Zonev2Service.getAnalaysisSummary(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+    //     this.cardDataLoading = false;
+    //       if (response?.code === 200 && response?.status === "success") {
+    //         // this.cardData = response.data.card;
+    //         this.genderAnalysis = response.data.genderAnalysis;
+    //         this.genderAnalysis.forEach((item:any) => {
+    //           item.value = Math.round(item.value)
+    //         })
+    //         this.ageAnalysis = response.data.ageAnalysis;
+    //         setTimeout(() => {
+    //           this.genderchart(); // Call this method after data is set
+    //         }, 200);
+    //         this.cardDataLoading = false;
+    //         this.cardNoData = false;
+    //       } else {
+    //         // this.cardData = []
+    //         this.cardDataLoading = false;
+    //         this.cardNoData = true;
+    //       }
+    //     },
+    //     error => {
+    //       // this.cardData = []
+    //     this.changeDetector.detectChanges()
+    //     }
+    //   );
+    // }
+    getAnalaysisSummary() {
+        this.cardDataLoading = true;
+        this.cardNoData = true;
+        const requestData = {
+            fromDate: this.headerData.date.startDate,
+            toDate: this.headerData.date.endDate,
+            storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
+            // storeId: ["204"],
+            clientId: this.headerData.client,
+            zoneName: "zone-1"
+        };
+        this.Zonev2Service.getAnalaysisSummary(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
+            this.cardDataLoading = false;
+            if (response && response.data && response.data.zoneConcentrationData && response.data.zoneConcentrationData.length > 0) {
+                // this.overallStoreData = response.data.overallStoreData;
+                // this.genderAnalysis = response.data.genderAnalysis;
+                // this.genderAnalysis.forEach((item:any) => {
+                //   item.value = Math.round(item.value)
+                // })
+                // this.ageAnalysis = response.data.ageAnalysis;
+                this.overallStoreData = response.data.zoneConcentrationData[0]; // Get the first zone data
+                this.ageAnalysis = this.overallStoreData.ageAnalysis || [];
+                this.genderAnalysis = this.overallStoreData.genderAnalysis || [];
+                setTimeout(() => {
+                    this.genderchart();
+                }, 200);
+                this.cardDataLoading = false;
+                this.cardNoData = false;
+            }
+            else {
+                // this.cardData = []
+                this.overallStoreData = [];
+                this.cardDataLoading = false;
+                this.cardNoData = true;
+            }
+        }, error => {
+            // this.cardData = []
+            this.overallStoreData = [];
+            this.changeDetector.detectChanges();
+        });
+    }
+    getAgeArray() {
+        let data = [];
+        this.ageAnalysis.forEach((item, index) => {
+            if (index % 2 == 0) {
+                data.push(index);
+            }
+        });
+        return data;
+    }
+    // getAgeArray(): number[] {
+    //   return this.ageAnalysis.map((_, index) => index);
+    // }
+    // createArcDiagram(): void {
+    //   setTimeout(() => {
+    //     const chartDiv = document.getElementById("arcDiagramDiv");
+    //     if (!chartDiv) {
+    //       console.error("Could not find HTML element with id `arcDiagramDiv`");
+    //       return;
+    //     }
+    //     if (this.arcroot) {
+    //       this.arcroot.dispose();
+    //     }
+    //     this.arcroot = am5.Root.new("arcDiagramDiv");
+    //     const series = this.arcroot.container.children.push(am5flow.ArcDiagram.new(this.arcroot, {
+    //       sourceIdField: "from",
+    //       targetIdField: "to",
+    //       valueField: "value",
+    //       orientation: "horizontal"
+    //     }));
+    //     series.nodes.labels.template.setAll({
+    //       fontSize: "0.85em",
+    //       paddingLeft: 20,
+    //       paddingRight: 20,
+    //       width: 160
+    //     });
+    //     series.bullets.push((_root, _series, dataItem) => {
+    //       let bullet = am5.Bullet.new(this.arcroot, {
+    //         locationY: Math.random(),
+    //         sprite: am5.Circle.new(this.arcroot, {
+    //           radius: 2,
+    //           fill: dataItem.get("source").get("fill")
+    //         })
+    //       });
+    //       bullet.animate({
+    //         key: "locationY",
+    //         to: 1,
+    //         from: 0,
+    //         duration: Math.random() * 1000 + 2000,
+    //         loops: Infinity
+    //       });
+    //       return bullet;
+    //     });
+    //     // Set the diagram data dynamically
+    //     series.data.setAll([
+    //       { "from": "zone-1", "to": "zone-2", "value": 10 },
+    //       { "from": "zone-1", "to": "zone-3", "value": 10 },
+    //       // You can add more connections from API data here
+    //     ]);
+    //     series.appear(1000, 100);
+    //   }, 100);
+    // }
+    // gettrajectoryAnalysis(): void {
+    //   this.cardDataLoading = true;
+    //   this.cardNoData = true;
+    //   const requestData = {
+    //     fromDate: "2024-07-01",
+    //     toDate: "2024-07-22",
+    //     storeId: ["11"],
+    //     zoneName: "zone-1"
+    //   };
+    //   this.Zonev2Service.getTrajectoryAnalysis(requestData).pipe(takeUntil(this.destroy$)).subscribe((response: any) => {
+    //     this.cardDataLoading = false;
+    //       if (response?.code === 200 && response?.status === "success") {
+    //         const data = response.data.trajectoryAnalysisData;
+    //       // Update the UI with the current and other zones data
+    //       this.currentZone = data.currentZone;
+    //       this.otherZone = data.otherZone;
+    //         setTimeout(() => {
+    //           this.createArcDiagram();
+    //         }, 200);
+    //         this.cardDataLoading = false;
+    //         this.cardNoData = false;
+    //       } else {
+    //         // this.overallStoreData = [];
+    //         this.cardDataLoading = false;
+    //         this.cardNoData = true;
+    //       }
+    //     },
+    //     error => {
+    //       // this.overallStoreData = [];
+    //     this.changeDetector.detectChanges()
+    //     }
+    //   );
+    // }
+    getTrajectoryAnalysis() {
+        this.cardDataLoading = true;
+        this.cardNoData = true;
+        const requestData = {
+            fromDate: "2024-07-01",
+            toDate: "2024-07-22",
+            storeId: ["11"],
+            zoneName: "zone-1"
+        };
+        this.Zonev2Service.getTrajectoryAnalysis(requestData)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((response) => {
+            this.cardDataLoading = false;
+            if (response?.code === 200 && response?.status === "success") {
+                const data = response.data.trajectoryAnalysisData;
+                // Update the current zone and other zone info
+                this.currentZone = data.currentZone;
+                this.otherZone = data.otherZone;
+                // Dynamically map the zoneList and create the diagram data
+                const zoneList = data.zoneList;
+                const diagramData = [];
+                for (let i = 0; i < zoneList.length - 1; i++) {
+                    diagramData.push({
+                        from: zoneList[i],
+                        to: zoneList[i + 1],
+                        value: this.currentZone.impressionRate,
+                        fill: this.getZoneColor(i) // Custom function to get a color for the zone
+                    });
+                }
+                // Check if there are zones to display
+                if (diagramData.length > 0) {
+                    setTimeout(() => {
+                        this.createArcDiagram(diagramData); // Call the method to create the diagram
+                    }, 200);
+                }
+                else {
+                    // Handle case with no data if necessary
+                    // For example, you might show a message saying "No data available"
+                }
+                this.cardNoData = false; // Only set this to false if there is data
+            }
+            else {
+                // Handle unsuccessful response
+                this.cardNoData = true;
+            }
+        }, error => {
+            this.cardDataLoading = false;
+            this.cardNoData = true; // Set no data flag on error
+        });
+    }
+    createArcDiagram(diagramData) {
+        const root = am5.Root.new("arcDiagramDiv");
+        const series = root.container.children.push(am5flow.ArcDiagram.new(root, {
+            sourceIdField: "from",
+            targetIdField: "to",
+            valueField: "value",
+            orientation: "horizontal"
+        }));
+        series.nodes.labels.template.setAll({
+            fontSize: "0.85em",
+            paddingLeft: 20,
+            paddingRight: 20,
+            width: 160
+        });
+        // Animated bullets
+        series.bullets.push((root, series, dataItem) => {
+            const bullet = am5.Bullet.new(root, {
+                locationY: Math.random(),
+                sprite: am5.Circle.new(root, {
+                    radius: 2,
+                    fill: dataItem.get("source").get("fill")
+                })
+            });
+            bullet.animate({
+                key: "locationY",
+                to: 1,
+                from: 0,
+                duration: Math.random() * 1000 + 2000,
+                loops: Infinity
+            });
+            return bullet;
+        });
+        // Set data
+        series.data.setAll([
+            { "from": "Entrance", "to": "Vincent Chase", "value": 10 },
+            { "from": "Entrance", "to": "John Jacobs", "value": 20 },
+            { "from": "Entrance", "to": "Premium Section", "value": 10 },
+            { "from": "Entrance", "to": "Billing", "value": 30 },
+            { "from": "Entrance", "to": "Exit", "value": 10 },
+        ]);
+        // Make stuff animate on load
+        series.appear(1000, 100);
+    }
+    // createArcDiagram(diagramData: { from: string; to: string; value: number; fill: am5.Color; }[]): void {
+    //   // Dispose previous diagram if it exists
+    //   if (this.arcDiagram) {
+    //     this.arcDiagram.dispose();
+    //   }
+    //   // Create root element
+    //   const root = am5.Root.new("arcDiagramDiv");
+    //   // Create series
+    //   const series = root.container.children.push(am5flow.ArcDiagram.new(root, {
+    //     sourceIdField: "from",
+    //     targetIdField: "to",
+    //     valueField: "value",
+    //     orientation: "horizontal"
+    //   }));
+    //   // Configure labels
+    //   series.nodes.labels.template.setAll({
+    //     fontSize: "0.85em",
+    //     paddingLeft: 20,
+    //     paddingRight: 20,
+    //     width: 160
+    //   });
+    //   // Animated bullets
+    //   series.bullets.push((root, series, dataItem) => {
+    //     const bullet = am5.Bullet.new(root, {
+    //       locationY: Math.random(),
+    //       sprite: am5.Circle.new(root, {
+    //         radius: 2,
+    //         fill: dataItem.get("source").get("fill")
+    //       })
+    //     });
+    //     bullet.animate({
+    //       key: "locationY",
+    //       to: 1,
+    //       from: 0,
+    //       duration: Math.random() * 1000 + 2000,
+    //       loops: Infinity
+    //     });
+    //     return bullet;
+    //   });
+    //   // Set data dynamically from the API response
+    //   series.data.setAll(diagramData);
+    //   // Make stuff animate on load
+    //   series.appear(1000, 100);
+    //   // Save the arc diagram instance for potential disposal later
+    //   this.arcDiagram = series;
+    // }
+    getZoneColor(index) {
+        const colors = [am5.color(0x4285F4), am5.color(0xAA46BB), am5.color(0xFF7043), am5.color(0x8E24AA)];
+        return colors[index % colors.length];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StoreHeatmapComponent, deps: [{ token: i0.NgZone }, { token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: StoreHeatmapComponent, selector: "lib-store-heatmap", ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header storecard\">\r\n        <div class=\"mt-5 mx-5\">\r\n          <button *ngFor=\"let zone of availableZones\" \r\n                  class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\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      </div>\r\n      \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 *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n                        <div class=\"d-flex\">\r\n                            <ul *ngIf=\"periodzone == 1 && !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 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                        </div>\r\n                        <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\">\r\n                            <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs\">\r\n                                <ng-template ngbSlide>\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                    <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\">Entrance</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=\"!cardNoData && !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 || '--' }}</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 || '--' }}</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 || '--' }}</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-5\">{{ 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 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\">Entrance Trajectory Analysis</span>\r\n                        </h3>   \r\n                    </div>\r\n                    <div class=\"card-body\">\r\n                        <div class=\"row\">\r\n                            <div class=\"col-6\">\r\n                              <div 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                                <!-- <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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                          <span class=\"overalltext\">Impression rate</span>\r\n                                        </span>\r\n                                      </h3>\r\n                                      <span class=\"overalltext my-1\">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\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                        </svg>\r\n                                        <span class=\"overalltext\">Zone A</span>\r\n                                      </span>\r\n                                      <div class=\"textprimary my-4\">\r\n                                        {{ otherZone?.impressionRate || '--' }}% \r\n                                        <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                        <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div> -->\r\n                                  <!-- <div class=\"col px-2 mt-8\">\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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                          <span class=\"overalltext\">Impression rate</span>\r\n                                        </span>\r\n                                      </h3>\r\n                                      <span class=\"overalltext my-1\">Zone A\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\" 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                                        {{ otherZone?.impressionRate || '--' }}% \r\n                                        <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                        <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>  -->\r\n\r\n                                  <div class=\"row ps-15 mt-20\">\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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                            <span class=\"overalltext\">Impression Rate</span>\r\n                                          </span>\r\n                                        </h3>\r\n                                        <span class=\"overalltext my-1\">Entrance\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\" 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                                          {{ otherZone?.impressionRate || '--' }}% \r\n                                          <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                          <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                            <span class=\"overalltext\">Impression Rate</span>\r\n                                          </span>\r\n                                        </h3>\r\n                                        <span class=\"overalltext my-1\">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\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                          </svg>\r\n                                          <span class=\"overalltext\">Entrance</span>\r\n                                        </span>\r\n                                        <div class=\"textprimary my-4\">\r\n                                          {{ otherZone?.impressionRate || '--' }}% \r\n                                          <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                          <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>  \r\n                                </div>\r\n\r\n                            </div>\r\n\r\n\r\n                        </div>\r\n                       \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        \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   \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:100%;height:100%}.arcdiagram{height:60dvh}\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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: StoreHeatmapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-store-heatmap', template: "<div class=\"card\">\r\n    <div class=\"card-header storecard\">\r\n        <div class=\"mt-5 mx-5\">\r\n          <button *ngFor=\"let zone of availableZones\" \r\n                  class=\"btn btn-color-gray-600 btn-active btn-active-secondary px-6 py-3 me-2\"\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      </div>\r\n      \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 *ngIf=\"!heatmapLoading && !heatmapNoData\">\r\n                        <div class=\"d-flex\">\r\n                            <ul *ngIf=\"periodzone == 1 && !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 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                        </div>\r\n                        <ngb-carousel #carousel [interval]=\"0\" [pauseOnHover]=\"true\">\r\n                            <ng-container *ngFor=\"let image of overallStoreconcentrationData?.ImageURLs\">\r\n                                <ng-template ngbSlide>\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                    <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\">Entrance</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=\"!cardNoData && !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 || '--' }}</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 || '--' }}</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 || '--' }}</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-5\">{{ 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 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\">Entrance Trajectory Analysis</span>\r\n                        </h3>   \r\n                    </div>\r\n                    <div class=\"card-body\">\r\n                        <div class=\"row\">\r\n                            <div class=\"col-6\">\r\n                              <div 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                                <!-- <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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                          <span class=\"overalltext\">Impression rate</span>\r\n                                        </span>\r\n                                      </h3>\r\n                                      <span class=\"overalltext my-1\">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\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                        </svg>\r\n                                        <span class=\"overalltext\">Zone A</span>\r\n                                      </span>\r\n                                      <div class=\"textprimary my-4\">\r\n                                        {{ otherZone?.impressionRate || '--' }}% \r\n                                        <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                        <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div> -->\r\n                                  <!-- <div class=\"col px-2 mt-8\">\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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                          <span class=\"overalltext\">Impression rate</span>\r\n                                        </span>\r\n                                      </h3>\r\n                                      <span class=\"overalltext my-1\">Zone A\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\" 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                                        {{ otherZone?.impressionRate || '--' }}% \r\n                                        <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                        <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                      </div>\r\n                                    </div>\r\n                                  </div>  -->\r\n\r\n                                  <div class=\"row ps-15 mt-20\">\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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                            <span class=\"overalltext\">Impression Rate</span>\r\n                                          </span>\r\n                                        </h3>\r\n                                        <span class=\"overalltext my-1\">Entrance\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\" 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                                          {{ otherZone?.impressionRate || '--' }}% \r\n                                          <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                          <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>\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\">{{ currentZone?.impressionRate || '--' }}% \r\n                                            <span class=\"overalltext\">Impression Rate</span>\r\n                                          </span>\r\n                                        </h3>\r\n                                        <span class=\"overalltext my-1\">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\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                          </svg>\r\n                                          <span class=\"overalltext\">Entrance</span>\r\n                                        </span>\r\n                                        <div class=\"textprimary my-4\">\r\n                                          {{ otherZone?.impressionRate || '--' }}% \r\n                                          <span class=\"ratetext\">{{ otherZone?.gender || '--' }} Rate</span>\r\n                                          <span class=\"badgegrey\">{{ otherZone?.ageGroup || '--' }} age</span>\r\n                                        </div>\r\n                                      </div>\r\n                                    </div>  \r\n                                </div>\r\n\r\n                            </div>\r\n\r\n\r\n                        </div>\r\n                       \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        \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   \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:100%;height:100%}.arcdiagram{height:60dvh}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }] });
+
+class CustomerJourneyComponent {
+    zone;
+    elRef;
+    fb;
+    root;
+    form;
+    selectControl;
+    datasets = [
+        { value: 'highest', label: 'Highest Visited Path' },
+        { value: 'lowest', label: 'Lowest Visited Path' }
+    ];
+    constructor(zone, elRef, fb) {
+        this.zone = zone;
+        this.elRef = elRef;
+        this.fb = fb;
+    }
+    ngOnInit() {
+        this.initializeChart();
+        this.selectControl = new FormControl('highest');
+        this.form = this.fb.group({
+            selectControl: this.selectControl
+        });
+    }
+    // Function to handle chart creation
+    initializeChart() {
+        // Run the chart code inside Angular's NgZone to avoid conflicts
+        this.zone.runOutsideAngular(() => {
+            let root = am5.Root.new(this.elRef.nativeElement.querySelector('#customerjourney'));
+            // Set themes
+            root.setThemes([
+                am5themes_Animated.new(root)
+            ]);
+            // Create series
+            let series = root.container.children.push(am5flow.Sankey.new(root, {
+                sourceIdField: "from",
+                targetIdField: "to",
+                valueField: "value",
+                paddingRight: 50
+            }));
+            // Set the color step if available
+            this.setColorStep(series, 2);
+            // Set data
+            series.data.setAll([
+                { from: "Entry (1343)", to: "Vincent Chase (1343)", value: 20 },
+                { from: "Vincent Chase (1343)", to: "John Jacobs (1343)", value: 20 },
+                { from: "Entry (1343)", to: "John Jacobs (1343)", value: 40 },
+                { from: "Entry (1343)", to: "Premium Section (1343)", value: 20 },
+                { from: "John Jacobs (1343)", to: "Billing (1343)", value: 20 },
+                { from: "Billing (1343)", to: "Exit", value: 20 },
+                { from: "Premium Section (1343)", to: "Exit", value: 20 },
+                { from: "Premium Section (1343)", to: "Billing (1343)", value: 20 },
+            ]);
+            // Make stuff animate on load
+            series.appear(1000, 100);
+            this.root = root;
+        });
+    }
+    // Function to set color step
+    setColorStep(series, stepValue) {
+        const colors = series.nodes.get("colors");
+        if (colors) {
+            colors.set("step", stepValue);
+        }
+        else {
+            console.warn("Colors property not available on nodes.");
+        }
+    }
+    onValueChange(event) {
+        console.log('Selected value:', event);
+        // Handle value change logic here
+    }
+    ngOnDestroy() {
+        // Clean up chart instance when the component is destroyed
+        if (this.root) {
+            this.root.dispose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomerJourneyComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CustomerJourneyComponent, selector: "lib-customer-journey", ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\"><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                    <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 \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        <div id=\"customerjourney\"></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}\n"], dependencies: [{ 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomerJourneyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-customer-journey', 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\"><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                    <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 \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        <div id=\"customerjourney\"></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}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i2$1.FormBuilder }] });
+
+class TopPerformingComponent {
+    modalService;
+    fb;
+    Zonev2Service;
+    changeDetector;
+    toast;
+    gs;
+    elementRef;
+    topPerformingStores = [];
+    topPerformingZones = [];
+    searchInput = '';
+    searchDisabled = false;
+    analysisLoading = true;
+    analysisNoData = false;
+    topperformingstoresLoading = true;
+    topperformingstoresNodata = false;
+    headerData;
+    isExport = false;
+    type = 'top-zones';
+    storetype = 'top-Stores';
+    // Default selected type
+    disableTopZones = false; // Control whether the Top 5 Zones button is disabled
+    disableBottomZones = false;
+    disableTopStores = false; // Control whether the Top 5 Zones button is disabled
+    disableBottomStores = false;
+    // invoiceNoData: boolean = true;
+    // invoiceLoading: boolean = false;
+    // isExport: boolean = false;
+    // clientId: string = '';
+    // userType:any = '';
+    destroy$ = new Subject();
+    constructor(modalService, fb, Zonev2Service, changeDetector, toast, gs, elementRef) {
+        this.modalService = modalService;
+        this.fb = fb;
+        this.Zonev2Service = Zonev2Service;
+        this.changeDetector = changeDetector;
+        this.toast = toast;
+        this.gs = gs;
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime(300))
+            .subscribe((data) => {
+            this.headerData = data;
+            this.getTopPerformingZones('top');
+            this.getTopPerformingStores('top');
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    getTopPerformingZones(sortType) {
+        this.analysisLoading = true;
+        this.analysisNoData = true;
+        const requestData = {
+            // fromDate: this.headerData.date.startDate,
+            // toDate: this.headerData.date.endDate,
+            // storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+            // // storeId: ["11-253", "11-511","11-1176"],
+            // clientId:this.headerData.client,
+            fromDate: '2024-07-01',
+            toDate: '2024-07-22',
+            storeId: ['11'],
+            sortType: sortType,
+            sort: 'footfall',
+            sortBy: sortType === 'top' ? 1 : -1
+        };
+        this.Zonev2Service.getTopPerformingZones(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
+            this.analysisLoading = false;
+            if (response?.code === 200 && response?.status === "success") {
+                this.topPerformingZones = response.data.topPerformingZones;
+                this.analysisLoading = false;
+                this.analysisNoData = false;
+            }
+            else {
+                this.analysisLoading = false;
+                this.analysisNoData = true;
+                this.topPerformingZones = [];
+                this.changeDetector.detectChanges();
+            }
+        }, error => {
+            this.topPerformingZones = [];
+            this.changeDetector.detectChanges();
+        });
+    }
+    getTopPerformingStores(sortType) {
+        this.topperformingstoresLoading = true;
+        this.topperformingstoresNodata = true;
+        const requestData = {
+            // fromDate: this.headerData.date.startDate,
+            // toDate: this.headerData.date.endDate,
+            // storeId: this.headerData.stores.filter((store:any) => store.checked).map((store:any) => store.storeId),
+            // // storeId: ["11-253", "11-511","11-1176"],
+            // clientId:this.headerData.client,
+            fromDate: '2024-07-01',
+            toDate: '2024-07-22',
+            storeId: ['11'],
+            sortType: sortType,
+            sort: 'footfall',
+            sortBy: sortType === 'top' ? 1 : -1
+        };
+        this.Zonev2Service.getTopPerformingStores(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
+            this.topperformingstoresLoading = false;
+            if (response?.code === 200 && response?.status === "success") {
+                this.topPerformingStores = response.data.topPerformingStores;
+                this.topperformingstoresLoading = false;
+                this.topperformingstoresNodata = false;
+            }
+            else {
+                this.topperformingstoresLoading = false;
+                this.topperformingstoresNodata = true;
+                this.topPerformingStores = [];
+                this.changeDetector.detectChanges();
+            }
+        }, error => {
+            this.topPerformingStores = [];
+            this.changeDetector.detectChanges();
+        });
+    }
+    selectPlanzone(type) {
+        this.type = type;
+        if (type === 'top-zones') {
+            this.getTopPerformingZones('top'); // Fetch top zones
+        }
+        else if (type === 'bottom-zones') {
+            this.getTopPerformingZones('bottom'); // Fetch bottom zones
+        }
+    }
+    selectPlanStore(storetype) {
+        console.log("storetype", storetype);
+        this.storetype = storetype;
+        if (storetype === 'top-Stores') {
+            this.getTopPerformingStores('top'); // Fetch top zones
+        }
+        else if (storetype === 'bottom-Stores') {
+            this.getTopPerformingStores('bottom'); // Fetch bottom zones
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TopPerformingComponent, deps: [{ token: i1$1.NgbModal }, { token: i2$1.FormBuilder }, { token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i4.ToastService }, { token: i2.GlobalStateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: TopPerformingComponent, selector: "lib-top-performing", ngImport: i0, template: "<div class=\"row \">\r\n    <div class=\"d-flex justify-content-between p-3\">\r\n      <div class=\"col-lg-6 card\">\r\n        <div class=\"h-100\">\r\n          <div class=\"card-header border-0 p-4\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n              <span class=\"headtext\">Top Performing Zones <span\r\n                  ngbTooltip=\"Top performing zones across the stores selected\" placement=\"top\"\r\n                  triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <g clip-path=\"url(#clip0_3512_32868)\">\r\n                      <path\r\n                        d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n                        stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_3512_32868\">\r\n                        <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg></span></span>\r\n              <span class=\"subratetext mt-2\">Based on Concentration Rate</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                  <!--begin::Nav group-->\r\n                  <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n                    <button class=\"btn btn-outline\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': type === 'top-zones',\r\n                        'inactivePlanBtn': type !== 'top-zones',\r\n                        'disabled': disableTopZones\r\n                      }\" \r\n                      (click)=\"selectPlanzone('top-zones')\" \r\n                      [attr.disabled]=\"disableTopZones ? true : null\">\r\n                      Top 5 Zones\r\n                    </button>\r\n                \r\n                    <button class=\"btn btn-outline px-6 py-3\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': type === 'bottom-zones',\r\n                        'inactivePlanBtn': type !== 'bottom-zones',\r\n                        'disabled': disableBottomZones\r\n                      }\" \r\n                      (click)=\"selectPlanzone('bottom-zones')\" \r\n                      [attr.disabled]=\"disableBottomZones ? true : null\">\r\n                      Bottom 5 Zones\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"table-container mx-4\">\r\n            <table *ngIf=\"!analysisLoading && !analysisNoData\" class=\"table bottom-border\">\r\n              <thead class=\"fixed-header\">\r\n                <tr>\r\n                  <th>Zone Name</th>\r\n                  <th>Footfall</th>\r\n                  <th>Bounced</th>\r\n                  <th>Engagers</th>\r\n                  <th>Impressions</th>\r\n  \r\n                </tr>\r\n              </thead>\r\n              <tbody class=\"table-responsive topstores\">\r\n                <tr *ngFor=\"let zone of topPerformingZones\">\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.zoneName ? zone.zoneName : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.footfallCount ? zone.footfallCount : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.bouncedCount ? zone.bouncedCount : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.engagersCount ? zone.engagersCount : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.impressionRate ? zone.impressionRate + '%' : '--' }}</div>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          <ng-container *ngIf=\"analysisLoading\">\r\n            <div class=\"row loader Analysiscard 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=\"analysisNoData && !analysisLoading\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 Analysiscard\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                  <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                  <div class=\"nodatasubtext\">There is no result for Top Performing Analysis</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n  \r\n        </div>\r\n  \r\n      </div>\r\n      <div class=\"col-lg-6 card mx-2\">\r\n        <div class=\"h-100\">\r\n          <div class=\"card-header border-0 p-4\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n              <span class=\"headtext\">Top Performing Stores <span\r\n                  ngbTooltip=\"Top performing stores and their concentration % along with avg dwell time\" placement=\"top\"\r\n                  triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <g clip-path=\"url(#clip0_3512_32868)\">\r\n                      <path\r\n                        d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n                        stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_3512_32868\">\r\n                        <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg></span></span>\r\n              <span class=\"subratetext mt-2\">Based on Concentration Rate</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                  <!--begin::Nav group-->\r\n                  <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n                    <button class=\"btn btn-outline\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': storetype === 'top-Stores',\r\n                        'inactivePlanBtn': storetype !== 'top-Stores',\r\n                        'disabled': disableTopStores\r\n                      }\" \r\n                      (click)=\"selectPlanStore('top-Stores')\" \r\n                      [attr.disabled]=\"disableTopStores ? true : null\">\r\n                      Top 5 Stores\r\n                    </button>\r\n                \r\n                    <button class=\"btn btn-outline px-6 py-3\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': storetype === 'bottom-Stores',\r\n                        'inactivePlanBtn': storetype !== 'bottom-Stores',\r\n                        'disabled': disableBottomStores\r\n                      }\" \r\n                      (click)=\"selectPlanStore('bottom-Stores')\" \r\n                      [attr.disabled]=\"disableBottomStores ? true : null\">\r\n                      Bottom 5 Stores\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"table-container mx-4\">\r\n            <table *ngIf=\"!topperformingstoresLoading && !topperformingstoresNodata\" class=\"table bottom-border\">\r\n              <thead class=\"fixed-header\">\r\n                <tr>\r\n                  <th>Store Info</th>\r\n                  <th>Zone Name</th>\r\n                  <th>Zone Footfall</th>\r\n                  <th>Concentration</th>\r\n                  <th>Avg Dwell Time</th>\r\n  \r\n  \r\n                </tr>\r\n              </thead>\r\n              <tbody class=\"table-responsive topstores\">\r\n                <tr *ngFor=\"let store of topPerformingStores\">\r\n                  <td>\r\n                    <div class=\"table-title-primary invoice mb-2\">{{ store.storeName || '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.zoneName || '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.zoneFootfallCount || '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.impressionRate || '--' }}%</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.avgDwellTime || '--' }} mins</div>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          <ng-container *ngIf=\"topperformingstoresLoading\">\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=\"topperformingstoresNodata && !topperformingstoresLoading\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column mt-18\">\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 Top Performing Stores</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      \r\n    </div>\r\n    </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;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}}tr{vertical-align:middle}.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 th,table td{height:44px!important;padding:18px 15px!important;align-items:center;gap:12px;align-self:stretch}.Analysiscard,.storescard{margin-top:11%;margin-bottom:20%}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.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}\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.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TopPerformingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-top-performing', template: "<div class=\"row \">\r\n    <div class=\"d-flex justify-content-between p-3\">\r\n      <div class=\"col-lg-6 card\">\r\n        <div class=\"h-100\">\r\n          <div class=\"card-header border-0 p-4\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n              <span class=\"headtext\">Top Performing Zones <span\r\n                  ngbTooltip=\"Top performing zones across the stores selected\" placement=\"top\"\r\n                  triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <g clip-path=\"url(#clip0_3512_32868)\">\r\n                      <path\r\n                        d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n                        stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_3512_32868\">\r\n                        <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg></span></span>\r\n              <span class=\"subratetext mt-2\">Based on Concentration Rate</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                  <!--begin::Nav group-->\r\n                  <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n                    <button class=\"btn btn-outline\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': type === 'top-zones',\r\n                        'inactivePlanBtn': type !== 'top-zones',\r\n                        'disabled': disableTopZones\r\n                      }\" \r\n                      (click)=\"selectPlanzone('top-zones')\" \r\n                      [attr.disabled]=\"disableTopZones ? true : null\">\r\n                      Top 5 Zones\r\n                    </button>\r\n                \r\n                    <button class=\"btn btn-outline px-6 py-3\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': type === 'bottom-zones',\r\n                        'inactivePlanBtn': type !== 'bottom-zones',\r\n                        'disabled': disableBottomZones\r\n                      }\" \r\n                      (click)=\"selectPlanzone('bottom-zones')\" \r\n                      [attr.disabled]=\"disableBottomZones ? true : null\">\r\n                      Bottom 5 Zones\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"table-container mx-4\">\r\n            <table *ngIf=\"!analysisLoading && !analysisNoData\" class=\"table bottom-border\">\r\n              <thead class=\"fixed-header\">\r\n                <tr>\r\n                  <th>Zone Name</th>\r\n                  <th>Footfall</th>\r\n                  <th>Bounced</th>\r\n                  <th>Engagers</th>\r\n                  <th>Impressions</th>\r\n  \r\n                </tr>\r\n              </thead>\r\n              <tbody class=\"table-responsive topstores\">\r\n                <tr *ngFor=\"let zone of topPerformingZones\">\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.zoneName ? zone.zoneName : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.footfallCount ? zone.footfallCount : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.bouncedCount ? zone.bouncedCount : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.engagersCount ? zone.engagersCount : '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ zone?.impressionRate ? zone.impressionRate + '%' : '--' }}</div>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          <ng-container *ngIf=\"analysisLoading\">\r\n            <div class=\"row loader Analysiscard 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=\"analysisNoData && !analysisLoading\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 Analysiscard\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                  <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                  <div class=\"nodatasubtext\">There is no result for Top Performing Analysis</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n  \r\n        </div>\r\n  \r\n      </div>\r\n      <div class=\"col-lg-6 card mx-2\">\r\n        <div class=\"h-100\">\r\n          <div class=\"card-header border-0 p-4\">\r\n            <h3 class=\"card-title align-items-start flex-column\">\r\n              <span class=\"headtext\">Top Performing Stores <span\r\n                  ngbTooltip=\"Top performing stores and their concentration % along with avg dwell time\" placement=\"top\"\r\n                  triggers=\"mouseenter:mouseleave\" tooltipClass=\"custom-tooltip\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <g clip-path=\"url(#clip0_3512_32868)\">\r\n                      <path\r\n                        d=\"M8.00016 10.6666V7.99998M8.00016 5.33331H8.00683M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n                        stroke=\"#98A2B3\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_3512_32868\">\r\n                        <rect width=\"16\" height=\"16\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg></span></span>\r\n              <span class=\"subratetext mt-2\">Based on Concentration Rate</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                  <!--begin::Nav group-->\r\n                  <div class=\"nav-group nav-group-outline border-1 btn-group p-0\">\r\n                    <button class=\"btn btn-outline\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': storetype === 'top-Stores',\r\n                        'inactivePlanBtn': storetype !== 'top-Stores',\r\n                        'disabled': disableTopStores\r\n                      }\" \r\n                      (click)=\"selectPlanStore('top-Stores')\" \r\n                      [attr.disabled]=\"disableTopStores ? true : null\">\r\n                      Top 5 Stores\r\n                    </button>\r\n                \r\n                    <button class=\"btn btn-outline px-6 py-3\" \r\n                      [ngClass]=\"{\r\n                        'activePlanBtn': storetype === 'bottom-Stores',\r\n                        'inactivePlanBtn': storetype !== 'bottom-Stores',\r\n                        'disabled': disableBottomStores\r\n                      }\" \r\n                      (click)=\"selectPlanStore('bottom-Stores')\" \r\n                      [attr.disabled]=\"disableBottomStores ? true : null\">\r\n                      Bottom 5 Stores\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"table-container mx-4\">\r\n            <table *ngIf=\"!topperformingstoresLoading && !topperformingstoresNodata\" class=\"table bottom-border\">\r\n              <thead class=\"fixed-header\">\r\n                <tr>\r\n                  <th>Store Info</th>\r\n                  <th>Zone Name</th>\r\n                  <th>Zone Footfall</th>\r\n                  <th>Concentration</th>\r\n                  <th>Avg Dwell Time</th>\r\n  \r\n  \r\n                </tr>\r\n              </thead>\r\n              <tbody class=\"table-responsive topstores\">\r\n                <tr *ngFor=\"let store of topPerformingStores\">\r\n                  <td>\r\n                    <div class=\"table-title-primary invoice mb-2\">{{ store.storeName || '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.zoneName || '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.zoneFootfallCount || '--' }}</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.impressionRate || '--' }}%</div>\r\n                  </td>\r\n                  <td>\r\n                    <div class=\"table-title\">{{ store.avgDwellTime || '--' }} mins</div>\r\n                  </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n          <ng-container *ngIf=\"topperformingstoresLoading\">\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=\"topperformingstoresNodata && !topperformingstoresLoading\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column mt-18\">\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 Top Performing Stores</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      \r\n    </div>\r\n    </div>", styles: [".subtext{color:var(--Gray-800, #1D2939);font-size:14px;font-weight:500;line-height:20px}.headcount{color:var(--Gray-900, #101828);font-size:20px;font-weight:600;line-height:30px}.headtext{color:var(--Gray-700, #344054);font-size:18px;font-weight:600;line-height:28px}.subratetext{color:var(--Gray-500, #667085);font-size:12px;font-weight:500;line-height:18px}#zonechartdiv{width:100%;height:365px;margin-bottom:6%}.invoicesearch{color:var(--Gray-700, #344054)!important;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}}tr{vertical-align:middle}.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 th,table td{height:44px!important;padding:18px 15px!important;align-items:center;gap:12px;align-self:stretch}.Analysiscard,.storescard{margin-top:11%;margin-bottom:20%}.form-control:disabled{background-color:#f9fafb!important}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.table-container{position:relative;max-height:400px;overflow-y:auto}.fixed-header th{position:sticky;top:0;background-color:#fff;z-index:2}.table.bottom-border thead th{border-bottom:2px solid #dee2e6}.table.bottom-border tbody tr td{border-bottom:1px solid #dee2e6}.table.bottom-border th,.table.bottom-border td{padding:8px 16px;white-space:nowrap}.table-responsive::-webkit-scrollbar{width:6px}.table-responsive::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:4px}.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}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i2$1.FormBuilder }, { type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i4.ToastService }, { type: i2.GlobalStateService }, { type: i0.ElementRef }] });
+
+class SummaryTableComponent {
+    Zonev2Service;
+    changeDetector;
+    gs;
+    modalService;
+    router;
+    route;
+    toast;
+    isExport = false;
+    itemsPerPage = 10;
+    currentPage = 1;
+    totalItems = 0;
+    paginationSizes = [10, 20, 30];
+    pageSize = 10;
+    sortColumName = '';
+    sortBy = 1;
+    searchInput = "";
+    topPerformingStores = [];
+    searchDisabled = false;
+    invoiceList = [];
+    zonesummaryLoading = true;
+    zonesummaryNoData = false;
+    headerData;
+    sortDirection = 1;
+    destroy$ = new Subject();
+    // loading: boolean = true;
+    // noData: boolean = false;
+    // user: any;
+    // searchInput = new FormControl("");
+    // receivedData: string = "stores";
+    // columns: any[];
+    // sortColumName: string;
+    // sortDirection: number;
+    constructor(Zonev2Service, changeDetector, gs, modalService, router, route, toast) {
+        this.Zonev2Service = Zonev2Service;
+        this.changeDetector = changeDetector;
+        this.gs = gs;
+        this.modalService = modalService;
+        this.router = router;
+        this.route = route;
+        this.toast = toast;
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime(300))
+            .subscribe((data) => {
+            this.headerData = data;
+            this.getSummayTable();
+        });
+    }
+    getSummayTable() {
+        this.searchDisabled = true;
+        this.zonesummaryLoading = true;
+        this.zonesummaryNoData = true;
+        const requestData = {
+            fromDate: this.headerData.date.startDate,
+            toDate: this.headerData.date.endDate,
+            // storeId: ["11-253", "11-511","11-1176"],
+            storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
+            clientId: this.headerData.client,
+            // valueType: "sum",
+            search: this.searchInput,
+            sort: this.sortColumName,
+            sortBy: this.sortDirection,
+            limit: this.pageSize,
+            offset: this.currentPage,
+            export: false,
+        };
+        this.Zonev2Service.getSummaryTableData(requestData)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((response) => {
+            this.zonesummaryLoading = false;
+            if (response?.code === 200 && response?.status === "success") {
+                // this.topPerformingStores = response.data;
+                this.topPerformingStores = response.data.zoneSummaryData;
+                this.totalItems = response.data.totalCount;
+                this.zonesummaryLoading = false;
+                this.zonesummaryNoData = false;
+                this.searchDisabled = false;
+            }
+            else {
+                this.zonesummaryLoading = false;
+                this.zonesummaryNoData = true;
+                this.searchDisabled = true;
+                if (this.searchInput?.length) {
+                    this.searchDisabled = true;
+                }
+                this.topPerformingStores = [];
+                this.totalItems = 0;
+                this.changeDetector.detectChanges();
+            }
+        }, error => {
+            this.topPerformingStores = [];
+            this.changeDetector.detectChanges();
+        });
+    }
+    onExport() {
+        this.currentPage = 1;
+        const requestData = {
+            fromDate: this.headerData.date.startDate,
+            toDate: this.headerData.date.endDate,
+            storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
+            // storeId: ["11-253", "11-511","11-1176"],
+            clientId: this.headerData.client,
+            // valueType: "sum",
+            search: this.searchInput,
+            sort: this.sortColumName,
+            sortBy: this.sortDirection,
+            limit: this.pageSize,
+            offset: this.currentPage,
+            export: true
+        };
+        this.Zonev2Service.getSummaryTableExport(requestData)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (res) => {
+                this.Zonev2Service.saveAsExcelFile(res, 'ZoneSummaryTable');
+            },
+            error: (e) => {
+                this.toast.getErrorToast('Something went Wrong..');
+            }
+        });
+    }
+    searchField() {
+        this.getSummayTable();
+    }
+    sortData(column) {
+        if (this.sortColumName === column) {
+            this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+        }
+        else {
+            this.sortColumName = column;
+            this.sortDirection = 1;
+        }
+        this.changeDetector.detectChanges();
+        this.getSummayTable();
+    }
+    onPageSizeChange(pageSize) {
+        this.currentPage = 1;
+        this.pageSize = parseInt(pageSize);
+        this.getSummayTable();
+    }
+    onPageChange(pageOffset) {
+        this.currentPage = parseInt(pageOffset);
+        this.getSummayTable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SummaryTableComponent, deps: [{ token: Zonev2Service }, { token: i0.ChangeDetectorRef }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: i4$1.Router }, { token: i4$1.ActivatedRoute }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SummaryTableComponent, selector: "lib-summary-table", ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span class=\"card-label mb-2\">Zone Summary Table</span>\r\n            <span class=\"text-sub mb-2\"> From {{ headerData?.date?.startDate | date: 'MMM d' }} to {{ headerData?.date?.endDate | date: 'MMM d, y' }}\r\n                </span>\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center  position-relative my-1\">\r\n                    <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute  ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                            viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\"\r\n                                height=\"2\" rx=\"1\" transform=\"rotate(45 17.0365 15.1223)\"\r\n                                fill=\"currentColor\">\r\n                            </rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <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                        [disabled]=\"searchDisabled\" />\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>\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                        <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                        <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n                            StoreId\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><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                            ')\">\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('\r\n                            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                            ')\">\r\n                            Age 46-59\r\n                            <svg  [ngClass]=\"sortColumName === '46-59\r\n                            ' && 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\r\n                                ' ? '#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\r\n                            ' && 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\r\n                                ' ? '#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\r\n                            ' && 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\r\n                                ' ? '#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\r\n                            ' && 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\r\n                                ' ? '#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><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.storeName || '--' }}</div></td>\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.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}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SummaryTableComponent, decorators: [{
+            type: Component,
+            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                    <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                        [disabled]=\"searchDisabled\" />\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>\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                        <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                        <th ><div class=\"cursor-pointer\" (click)=\"sortData('storeId')\">\r\n                            StoreId\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><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                            ')\">\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('\r\n                            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                            ')\">\r\n                            Age 46-59\r\n                            <svg  [ngClass]=\"sortColumName === '46-59\r\n                            ' && 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\r\n                                ' ? '#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\r\n                            ' && 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\r\n                                ' ? '#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\r\n                            ' && 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\r\n                                ' ? '#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\r\n                            ' && 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\r\n                                ' ? '#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><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.storeName || '--' }}</div></td>\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.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}\n"] }]
+        }], ctorParameters: () => [{ type: Zonev2Service }, { type: i0.ChangeDetectorRef }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: i4$1.Router }, { type: i4$1.ActivatedRoute }, { type: i4.ToastService }] });
+
+class ZoneV2Component {
+    pageInfo;
+    gs;
+    storeId = 0;
+    headerData;
+    destroy$ = new Subject();
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    constructor(pageInfo, gs) {
+        this.pageInfo = pageInfo;
+        this.gs = gs;
+    }
+    ngOnInit() {
+        this.gs.dataRangeValue
+            .pipe(takeUntil(this.destroy$), debounceTime(300))
+            .subscribe((data) => {
+            console.log("data", data);
+            this.headerData = data;
+            this.updateStoreId();
+            this.setPageData();
+        });
+    }
+    setPageData() {
+        this.pageInfo.setTitle("Zones");
+        this.pageInfo.setDescription("Zones");
+        this.pageInfo.setBreadcrumbs([
+            { title: "Analyze", path: "/manage/traffic", isActive: false, isSeparator: false },
+            { title: "Analyze", path: "/manage/traffic", isActive: false, isSeparator: true },
+        ]);
+    }
+    updateStoreId() {
+        this.storeId = this.headerData.stores.filter((store) => store.checked).length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZoneV2Component, deps: [{ token: i2.PageInfoService }, { token: i2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ZoneV2Component, selector: "lib-zone-v2", ngImport: i0, template: "<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", styles: [""], 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ZoneV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-zone-v2', template: "<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" }]
+        }], ctorParameters: () => [{ type: i2.PageInfoService }, { type: i2.GlobalStateService }] });
+
+const routes = [
+    {
+        path: 'v1',
+        component: TangoAnalyseZoneComponent
+    },
+    {
+        path: 'v2',
+        component: ZoneV2Component
+    }
+];
+class TangoAnalyseZoneRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [i4$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class TangoAnalyseZoneModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, declarations: [OverallcardsComponent,
+            TangoAnalyseZoneComponent,
+            TopPerformingZonesComponent,
+            ZoneSummaryTableComponent,
+            ZoneConcentrationComponent,
+            ConcentrationheatmapComponent,
+            ZoneV2Component,
+            ConcentrationheatmapComponent,
+            ZonesCardsComponent,
+            StoreHeatmapComponent,
+            ImageDirectoryComponent,
+            ImageDirectoryViewComponent,
+            CustomerJourneyComponent,
+            ReactiveSelectComponent,
+            TopPerformingComponent,
+            SummaryTableComponent,
+            StoreZoomHeatmapComponent], imports: [
+            // CommonModule,
+            // TangoAnalyseZoneRoutingModule,
+            // NgbProgressbarModule,
+            // FormsModule,
+            // ReactiveFormsModule,
+            // NgbCarouselModule,
+            // CommonSharedModule,
+            // NgbTooltipModule,
+            // NgbModule
+            CommonModule,
+            TangoAnalyseZoneRoutingModule,
+            NgbProgressbarModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CommonSharedModule,
+            NgbTooltipModule,
+            NgbModule,
+            NgbAccordionModule,
+            CommonSharedModule,
+            NgbCarouselModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, imports: [
+            // CommonModule,
+            // TangoAnalyseZoneRoutingModule,
+            // NgbProgressbarModule,
+            // FormsModule,
+            // ReactiveFormsModule,
+            // NgbCarouselModule,
+            // CommonSharedModule,
+            // NgbTooltipModule,
+            // NgbModule
+            CommonModule,
+            TangoAnalyseZoneRoutingModule,
+            NgbProgressbarModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CommonSharedModule,
+            NgbTooltipModule,
+            NgbModule,
+            NgbAccordionModule,
+            CommonSharedModule,
+            NgbCarouselModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TangoAnalyseZoneModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        OverallcardsComponent,
+                        TangoAnalyseZoneComponent,
+                        TopPerformingZonesComponent,
+                        ZoneSummaryTableComponent,
+                        ZoneConcentrationComponent,
+                        ConcentrationheatmapComponent,
+                        ZoneV2Component,
+                        ConcentrationheatmapComponent,
+                        ZonesCardsComponent,
+                        StoreHeatmapComponent,
+                        ImageDirectoryComponent,
+                        ImageDirectoryViewComponent,
+                        CustomerJourneyComponent,
+                        ReactiveSelectComponent,
+                        TopPerformingComponent,
+                        SummaryTableComponent,
+                        StoreZoomHeatmapComponent
+                    ],
+                    imports: [
+                        // CommonModule,
+                        // TangoAnalyseZoneRoutingModule,
+                        // NgbProgressbarModule,
+                        // FormsModule,
+                        // ReactiveFormsModule,
+                        // NgbCarouselModule,
+                        // CommonSharedModule,
+                        // NgbTooltipModule,
+                        // NgbModule
+                        CommonModule,
+                        TangoAnalyseZoneRoutingModule,
+                        NgbProgressbarModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        CommonSharedModule,
+                        NgbTooltipModule,
+                        NgbModule,
+                        NgbAccordionModule,
+                        CommonSharedModule,
+                        NgbCarouselModule
                     ]
                 }]
         }] });